flutter项目中常用第三方模块

持续更新中

序言

本章介绍项目中常用第三方模块，方便快速构建项目

关于第三方模块安装

使用前可清除下缓存，然后下载

flutter clean
flutter pub get
1
2

flutter_native_splash

解决web与移动端初始加载白屏问题，提供启动图

使用方式

模块安装后，在根目录下运行
flutter pub run flutter_native_splash:create

模块配置

dependencies:
  flutter_native_splash: ^1.2.1
flutter_native_splash:

  # 该锯生成原生代码来自定义 Flutter 默认白色原生闪屏界面的背景色和闪屏图像。
  # 自定义下面的参数，然后在命令行终端运行下面的命令：
  # flutter pub run flutter_native_splash:create
  # 要恢复为 Flutter 默认的白色闪屏界面，运行下面的命令：
  # flutter pub run flutter_native_splash:remove

  # 只有 color 或 background_image 是必需的参数。使用 color 将闪屏界面的背景设置为单色。
  # 使用 background_image 可将 png 图像设置为闪屏界面的背景。该图像会被拉伸以适应应用大小。
  # color 和 background_image 不能同时设置，只有一个会被使用。 
  color: "#2DCBD0"
  #background_image: "assets/background.png"

  # 以下是可选的参数。去掉注释前面的 #可使参数起作用。

  # image 参数允许你指定在闪屏界面使用的图像。它必须是 png 文件，且应该是用于4倍像素密度的大小。
  image: assets/splash.png

  # 该属性允许你指定图像作为商标在闪屏界面显示。它必须是 png 文件。现在它只支持 Android 和 iOS 。
  #branding: assets/dart.png

  # 为黑暗模式指定商标图像
  #branding_dark: assets/dart_dark.png

  # 要将商标图像放置在界面底部，可以使用 bottom 、 bottomRight 和 bottomLeft 。如果未指定或者指定了其它值，使用默认值 bottom 。
  # 确保该内容模式值与 android_gravity 值 和 ios_content_mode 值不相似。
  #branding_mode: bottom

  # color_dark 、 background_image_dark 和 image_dark 用于设备在黑暗模式时设置背景色和图像。
  # 如果没有指定，应用会使用上面的参数。如果指定了 image_dark ，必须要指定 color_dark 或 background_image_dark 。
  # color_dark 和 background_image_dark 不能同时设置。
  #color_dark: "#042a49"
  #background_image_dark: "assets/dark-background.png"
  #image_dark: assets/splash-invert.png

  # android 、 ios 和 web 参数可用于不为对应的平台生成闪屏界面。
  #android: false
  #ios: false
  #web: false

  #  可用 android_gravity 、 android_gravity 、 ios_content_mode 和 web_image_mode 来设置闪屏图像的位置。默认是居中。
  #
  # android_gravity 可以是以下 Android Gravity 其中之一 (查看
  # https://developer.android.com/reference/android/view/Gravity): bottom 、 center 、
  # center_horizontal 、 center_vertical 、 clip_horizontal 、 clip_vertical 、 
  # end 、 fill 、 fill_horizontal 、 fill_vertical 、 left 、 right 、 start 或 top 。
  android_gravity: center
  #
  # ios_content_mode 可以是以下 iOS UIView.ContentMode 其中之一 (查看
  # https://developer.apple.com/documentation/uikit/uiview/contentmode): scaleToFill 、
  # scaleAspectFit 、 scaleAspectFill 、 center 、 top 、 bottom 、
  # left 、 right 、 topLeft 、 topRight 、 bottomLeft 或  bottomRight 。
  ios_content_mode: center
  #
  # web_image_mode 可以是以下模式其中之一：center 、 contain 、 stretch 和 cover 。
  web_image_mode: center

  # 要隐藏通知栏，使用 fullscreen 参数 。在 Web 上不起作为，因为 Web 没有通知栏。默认是 false 。
  # 注意: 不像 Android 、 iOS 当应用加载时不会自动显示通知栏。
  #       要显示通知栏，在 Flutter 应用中添加以下代码：
  #       WidgetsFlutterBinding.ensureInitialized();
  #       SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom, SystemUiOverlay.top]);
  #fullscreen: true
  
  # 如果改变了 info.plist 的名字，可以使用 info_plist_files 指定对应的文件名。 
  # 只需移除下面三行前面的 # 字符，不要移除任何空格：
  #info_plist_files:
  #  - 'ios/Runner/Info-Debug.plist'
  #  - 'ios/Runner/Info-Release.plist'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

flutter_localizations

解决国际化问题

模块配置

dependencies:
  flutter_localizations:
    sdk: flutter
1
2
3

使用方式

1. vscode安装 Flutter Intl 插件
2. vscode使用command+shift+p，输入 ==**flutterIntl.initialize指令初始化语言配置信息

执行完后会在lib目录下增加 generated 和 l10n两个包

generated包下的intl包默认存在一个messages_all.dart和messages_en.dart文件，messages开头的文件会在添加语言后自动生成

l10n包下存在一个intl_en.arb文件
1
2
3
4
5

3. vscode使用command+shift+p ，输入==flutterIntl.addLocale== ，填写需要添加的语言，指令生成其他语言的arb文件

例如:zh_CN , 会在l10n包下生成Intl_zh_CN.arb文件 , 在其中填入对应的文案
1

4. MaterialApp() 中引入

import 'package:flutter_localizations/flutter_localizations.dart';
import 'generated/l10n.dart';
1
2

@override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // 国际化
      localizationsDelegates: const [
        S.delegate,
        // 本地化的代理类
        GlobalMaterialLocalizations.delegate, //为Material组件库提供的本地化的字符串和其他值
        GlobalWidgetsLocalizations.delegate, // 定义组件默认的文本方向，从左到右或从右到左
        GlobalCupertinoLocalizations.delegate, //日期和时间格式化字符
      ],
      // 应用支持的语言列表
      supportedLocales: S.delegate.supportedLocales,
      localeListResolutionCallback: (locales, supportedLocales) {
        print('当前系统语言环境$locales');
        return;
      },
      // locale: Locale('fr'), // Set the initial locale here
      home: Scaffold( //脚手架 搭建页面结构
        appBar: AppBar( //导航栏
          title: Text("asas"),
        ),
        body: HYHomePage()
      )
    );
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

5. 其他组件中使用

例如： 使用文本组件  Text(S.of(context).title)
1

get_storage

本地数据持久化

模块配置

dependencies:
  flutter_native_splash: ^1.2.1
1
2

使用方式

1. 安装
2. 导入

import 'package:get_storage/get_storage.dart';
1

3. 代码中初始化

main() async {
  await GetStorage.init();
  runApp(App());
}
1
2
3
4

4. 使用

final box = GetStorage(); //初始化容器  
或者
GetStorage g = GetStorage('MyStorage'); //初始化指定容器


box.write('a', '666'); //存
print(box.read('a'));  //读   输出666
box.remove('a'); //删
box.erase(); //清空
1
2
3
4
5
6
7
8
9

get

状态管理

模块配置

dependencies:
  get: ^4.6.5
1
2

使用方式

1. 安装
2. 导入

import 'package:get/get.dart';
1

3. 代码中修改MaterialApp为GetMaterialApp

void main() => runApp(GetMaterialApp(home: Home()));
1

4. 创建业务逻辑类

class Controller extends GetxController{
  var count = 0.obs;
  increment() => count++;
}
1
2
3
4

5. 使用

class Home extends StatelessWidget {

  @override
  Widget build(context) {

    // 使用Get.put（）实例化上一步创建您的类。
    final Controller c = Get.put(Controller());

    return Scaffold(
      // Use Obx(()=> to update Text() whenever count is changed.
      appBar: AppBar(title: Obx(() => Text("Clicks: ${c.count}"))),

      // Replace the 8 lines Navigator.push by a simple Get.to(). You don't need context
      body: Center(child: ElevatedButton(
              child: Text("Go to Other"), onPressed: () => Get.to(Other()))),
      floatingActionButton:
          FloatingActionButton(child: Icon(Icons.add), onPressed: c.increment));
  }
}

class Other extends StatelessWidget {
  // You can ask Get to find a Controller that is being used by another page and redirect you to it.
  final Controller c = Get.find();

  @override
  Widget build(context){
     // Access the updated count variable
     return Scaffold(body: Center(child: Text("${c.count}")));
  }
}`
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30