CodeArena

1. 文档/资源/博客

2. 使用GetX

GetX是一个第三方状态管理插件。Flutter的状态管理方案还有：redux、bloc、state、provider[官方方案]。

GetX的主要功能：状态管理、路由管理、主题管理、国际化、Obx局部更新、网络请求、数据验证等。

Some examples:

Get.changeTheme() 切换主题，搭配食用Get.bottomSheet

1
@override
2
  Widget build(BuildContext context) {
3
    return GetMaterialApp(
4
      home: Scaffold(
5
        appBar: AppBar(
6
          title: const Text("changeTheme 示例"),
7
        ),
8
        body: Center(
9
          child: Column(
10
            mainAxisAlignment: MainAxisAlignment.center,
11
            crossAxisAlignment: CrossAxisAlignment.center,
12
            children: [
13
              ElevatedButton(
14
                  onPressed: () {
15
                    Get.bottomSheet(Wrap(
25 collapsed lines
16
                      children: [
17
                        ListTile(
18
                          leading: const Icon(Icons.wb_sunny_outlined),
19
                          title: const Text("白天模式"),
20
                          onTap: () {
21
                            Get.changeTheme(ThemeData.light());
22
                          },
23
                        ),
24
                        ListTile(
25
                          leading: const Icon(Icons.wb_sunny),
26
                          title: const Text("夜间模式"),
27
                          onTap: () {
28
                            Get.changeTheme(ThemeData.dark());
29
                          },
30
                        ),
31
                      ],
32
                    ));
33
                  },
34
                  child: const Text("切换主题")),
35
            ],
36
          ),
37
        ),
38
      ),
39
    );
40
  }

使用snackbar

1
@override
2
  Widget build(BuildContext context) {
3
    return GetMaterialApp(
4
      home: Scaffold(
5
        appBar: AppBar(
6
          title: const Text("Snackbar 示例"),
7
        ),
8
        body: Center(
9
          child: Column(
10
            mainAxisAlignment: MainAxisAlignment.center,
11
            crossAxisAlignment: CrossAxisAlignment.center,
12
            children: [
13
              ElevatedButton(
14
                  onPressed: () {
15
                    Get.snackbar("Snackbar 示例", "Snackbar 示例内容",
10 collapsed lines
16
                        snackPosition: SnackPosition.BOTTOM,
17
                        duration: const Duration(seconds: 2));
18
                  },
19
                  child: const Text("使用 Snackbar 显示消息")),
20
            ],
21
          ),
22
        ),
23
      ),
24
    );
25
  }

flutter初探

1. 文档/资源/博客

2. 使用GetX

3. flutter 工程化