Flutter web - 4 H5 移动端适配与依赖推荐

介绍

之前开发

H5

页面时，使用

rem

方案来适配不同的机型。在

flutter

中有没类似的方案呢?

对于不熟悉

flutter

开发的前端同学怎么快速上手项目呢？

本文将介绍我在项目中所使用到的依赖。

依赖包查询网址

pub.dev

适配方案 flutter_screenutil

依赖网址 flutter_screenutil

安装依赖：

dependencies:flutter:sdk: flutter
  # 添加依赖flutter_screenutil: ^5.9.3

对比使用

未使用

flutter_screenutil

，

Container

宽高不会随屏幕宽度变化

import'package:flutter/material.dart';voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});@overrideWidgetbuild(BuildContext context){returnMaterialApp(
      title:'Flutter Demo',
      home:Scaffold(
        body:Container(
          width:100,
          height:100,
          decoration:constBoxDecoration(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：一键生成每个页面必需的文件夹、文件、模板代码等等- Android Studio/Intellij插件
• GetX Snippets：输入少量字母，自动提示选择后，可生成常用的模板代码- Android Studio/Intellij扩展- VSCode扩展

依赖网址

文档