Flutter Easy GetX

人们问我如何处理 Flutter 中的状态、依赖、路由等问题，这里简单介绍一下 GetX，我用于一个简单的基础电子商务概念的 Flutter 应用开发。
这里我涵盖了

  • 状态管理
  • 路由管理
  • 依赖管理
  • 国际化
  • 存储

入门

依赖项

dependencies
get: ^4.3.0

get_storage: ^2.0.3

安装

  • flutter pub add get

执行程序

  • 状态管理
class Purchase extends GetxController {
  var products = <Product>[].obs;
  .........

obs 用于观察可以改变的产品。同样，当任何用户添加到购物车时，它也需要被观察，所以

class DemoController extends GetxController {
  var cartItems = <Product>[].obs;
  int get cartCount => cartItems.length;

欲知更多，请查看 Controller 和 Home.dart 以及 Demo.dart 文件

  • 路由管理

在 main.dart 中初始化路由

  routes: {
          //routes for named navigation
          '/': (context) => HomePage(),
          '/cart': (context) => DemoPage(),
        },
        
        -------

现在你可以通过命名路由使用 getX 调用了。

  IconButton(
                      onPressed: () => Get.toNamed('/cart',
                          arguments:
                              "Home Page To Demo Page -> Passing arguments"), //sending arguments 
                      icon: Icon(
                        Icons.arrow_forward_ios_rounded,
                        color: Colors.white,
                      ))
     ......

  • 依赖管理
    处理依赖注入的控制器（Controller）。
 
  final var ctrl = Get.put(DemoController());
  .......

在项目中添加一次后，您就可以找到它了，无需反复重连。只需使用 Get.find() 即可

 
 final DemoController ctrl = Get
      .find(); //getting the cart controller , you can show amount or anything
  .......

  • 国际化

轻松更改主题或语言。这是演示
main.dart

 
void main() async {
  await GetStorage.init();
  runApp(MyApp());
}


class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  final DemoController ctrl = Get.put(DemoController());
  @override
  Widget build(BuildContext context) {
    return SimpleBuilder(builder: (_) {
      // for darkmode instant change
      return GetMaterialApp(
        //for navigation dont forget to use GetMaterialApp
        title: 'Easy GetX',
        theme: ctrl.theme,
        debugShowCheckedModeBanner: false,
        initialRoute: '/',
        routes: {
          //routes for named navigation
          '/': (context) => HomePage(),
          '/cart': (context) => DemoPage(),
        },
      );
    });
  }
}

在控制器末尾

 
 bool get isDark => storage.read('darkmode') ?? false;
  ThemeData get theme => isDark ? ThemeData.dark() : ThemeData.light();
  void changeTheme(bool val) => storage.write('darkmode', val);

  .......

从任何地方触发它 [查看 DemoPage.dart 文件]

SwitchListTile(
              value: ctrl.isDark,
              title: Text("Touch to change ThemeMode"),
              onChanged: ctrl.changeTheme,
            ),
  .......

  • 存储 [shared preference 的替代品] 只需写入 GetStorage();
  final storage = GetStorage();
  bool get isDark => storage.read('darkmode') ?? false;
  ThemeData get theme => isDark ? ThemeData.dark() : ThemeData.light();
  void changeTheme(bool val) => storage.write('darkmode', val);

帮助

如果您需要任何帮助

[email protected]

GitHub

https://github.com/TasnuvaOshin/Flutter_Easy_GetX