介绍
之前开发 H5 页面时，使用 rem 方案来适配不同的机型。在 flutter 中有没类似的方案呢?
对于不熟悉 flutter 开发的前端同学怎么快速上手项目呢？
本文将介绍我在项目中所使用到的依赖。
依赖包查询网址
适配方案 flutter_screenutil
依赖网址 flutter_screenutil
安装依赖：
dependencies:
flutter:
sdk: flutter
# 添加依赖
flutter_screenutil: ^5.9.3
对比使用
未使用 flutter_screenutil，Container 宽高不会随屏幕宽度变化
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
body: Container(
width: 100,
height: 100,
decoration: const BoxDecoration(color: Colors.red),
),
),
);
}
}
使用 flutter_screenutil，按照文档填入设计稿尺寸等参数，后面只要在数值后面加 .w （根据屏幕宽度适配尺寸）即可。
import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
+ return ScreenUtilInit(
+ designSize: const Size(375, 812), // 设计稿宽高
+ minTextAdapt: true, // 是否根据宽度/高度中的最小值适配文字
+ splitScreenMode: true, // 支持分屏尺寸
+ builder: (context, child) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
body: Container(
! width: 100.w,
! height: 100.w,
decoration: const BoxDecoration(color: Colors.red),
),
),
);
+ },
+ );
}
}
其他内容参考文档
依赖推荐
get
-
GetX 是 Flutter 上的一个轻量且强大的解决方案：高性能的状态管理、智能的依赖注入和便捷的路由管理。
-
GetX 有3个基本原则：
- 性能： GetX 专注于性能和最小资源消耗。GetX 打包后的apk占用大小和运行时的内存占用与其他状态管理插件不相上下。如果你感兴趣，这里有一个性能测试。
- 效率： GetX 的语法非常简捷，并保持了极高的性能，能极大缩短你的开发时长。
- 结构： GetX 可以将界面、逻辑、依赖和路由完全解耦，用起来更清爽，逻辑更清晰，代码更容易维护。
-
GetX 并不臃肿，却很轻量。如果你只使用状态管理，只有状态管理模块会被编译，其他没用到的东西都不会被编译到你的代码中。它拥有众多的功能，但这些功能都在独立的容器中，只有在使用后才会启动。
-
GetX有一个庞大的生态系统，能够在Android、iOS、Web、Mac、Linux、Windows和你的服务器上用同样的代码运行。 通过Get Server 可以在你的后端完全重用你在前端写的代码。
此外，通过Get CLI，无论是在服务器上还是在前端，整个开发过程都可以完全自动化。
此外，为了进一步提高您的生产效率，我们还为您准备了一些插件
-
getx_template：一键生成每个页面必需的文件夹、文件、模板代码等等
-
GetX Snippets：输入少量字母，自动提示选择后，可生成常用的模板代码
