0


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

介绍

之前开发

  1. H5

页面时,使用

  1. rem

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

  1. flutter

中有没类似的方案呢?

对于不熟悉

  1. flutter

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

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

依赖包查询网址

pub.dev

适配方案 flutter_screenutil

依赖网址 flutter_screenutil

安装依赖:

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

对比使用

未使用

  1. flutter_screenutil

  1. Container

宽高不会随屏幕宽度变化

在这里插入图片描述
在这里插入图片描述

  1. import'package:flutter/material.dart';voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});@overrideWidgetbuild(BuildContext context){returnMaterialApp(
  2. title:'Flutter Demo',
  3. home:Scaffold(
  4. body:Container(
  5. width:100,
  6. height:100,
  7. decoration:constBoxDecoration(color:Colors.red),),),);}}

使用

  1. flutter_screenutil

,按照文档填入设计稿尺寸等参数,后面只要在数值后面加

  1. .w

(根据屏幕宽度适配尺寸)即可。

在这里插入图片描述

在这里插入图片描述

  1. import 'package:flutter/material.dart';
  2. +import 'package:flutter_screenutil/flutter_screenutil.dart';
  3. void main() {
  4. runApp(const MyApp());
  5. }
  6. class MyApp extends StatelessWidget {
  7. const MyApp({super.key});
  8. @override
  9. Widget build(BuildContext context) {
  10. + return ScreenUtilInit(
  11. + designSize: const Size(375, 812), // 设计稿宽高
  12. + minTextAdapt: true, // 是否根据宽度/高度中的最小值适配文字
  13. + splitScreenMode: true, // 支持分屏尺寸
  14. + builder: (context, child) {
  15. return MaterialApp(
  16. title: 'Flutter Demo',
  17. home: Scaffold(
  18. body: Container(
  19. ! width: 100.w,
  20. ! height: 100.w,
  21. decoration: const BoxDecoration(color: Colors.red),
  22. ),
  23. ),
  24. );
  25. + },
  26. + );
  27. }
  28. }

其他内容参考文档

依赖推荐

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扩展

依赖网址

文档

在这里插入图片描述

标签: flutter 前端

本文转载自: https://blog.csdn.net/qq_35886767/article/details/141264941
版权归原作者 kerry丶 所有, 如有侵权,请联系我们删除。

“Flutter web - 4 H5 移动端适配与依赖推荐”的评论:

还没有评论