Flutter基础架构和Getx使用

最新推荐文章于 2024-06-26 13:09:31 发布

tijjyire

最新推荐文章于 2024-06-26 13:09:31 发布

阅读量585

点赞数

分类专栏： Flutter开发文章标签： flutter android ui

本文链接：https://blog.csdn.net/tijjyire/article/details/129854850

版权

Flutter开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

移动app开发在跨平台需求下，使得我们学习使用flutter跨平台框架，帮助我们产生高效率高质量的UI界面，这里简介下flutter项目开发基础脚手架，和getx这个状态管理框架使用。

一、状态管理

响应式的编程框架中都会有一个永恒的主题——“状态(State)管理”，在flutter框架中一切组件都是Widget，有的组件自己管理自己的widget状态、有的组件需要管理父类组件widget状态，这个时候需要传递回调函数或者BuildContext对象才能更新ui，但是如果嵌套很深，或者跨组件的场景下上面的办法很难管理。目前主要有两种办法：

实现一个全局的事件总线，将语言状态改变对应为一个事件，然后在APP中依赖应用语言的组件的initState 方法中订阅语言改变的事件。当用户在设置页切换语言后，我们发布语言改变事件，而订阅了此事件的组件就会收到通知，收到通知后调用setState(…)方法重新build一下自身即可。
使用一些专门用于状态管理的包，如 Provider、Redux，Mobx等

二、getx

本文基于getx基本使用为例子，在没有上下文的情况下打开屏幕/snackbars/dialogs/bottomSheets，使用 Get 轻松管理状态和注入依赖项。

三、flutter项目基础配置

第三方插件依赖
资源文件配置（图片、svg、lottie、字体等）
Dart包管理
Dart包管理原生启动页配置和屏幕适配

# 屏幕适配
flutter_screenutil: ^5.6.1
# 原生启动
flutter_native_splash: ^2.1.6

void main() async{
  //启动页 需要配置flutter_native_splash.yaml文件
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  // 初始化全局配置
  await Application.init();
  runApp(ScreenUtilInit(
    designSize: const Size(375, 797),
    minTextAdapt: true,
    splitScreenMode: true,
    builder: (BuildContext context, Widget? child) {
      return GetMaterialApp(
        getPages: Routes.routePage,
        debugShowCheckedModeBanner: false,
        initialRoute: '/',
        builder: (context, child) => Scaffold(
          // Global GestureDetector that will dismiss the keyboard
          body: GestureDetector(
            onTap: () {

            },
            child: child,
          ),
        ),
        ///主题颜色
        theme: appThemeData,
        ///国际化支持-来源配置
        translations: Messages(),
        ///国际化支持-默认语言
        locale: LocaleOptions.getDefault(),
        ///国际化支持-备用语言
        fallbackLocale: const Locale('en', 'US'),
        defaultTransition: Transition.rightToLeft,
        initialBinding: SplashBinding(),
        home:  const SplashPage(),
      );
    },
  ));
  //关闭启动页
  FlutterNativeSplash.remove();

}