html购物网站模板下载,那个公司建站好,凡科网小程序怎么样,wordpress 男孩同志flutter项目中常用第三方模块 持续更新中序言关于第三方模块安装flutter_native_splash使用方式模块配置 flutter_localizations模块配置使用方式 get_storage模块配置使用方式 get模块配置使用方式 持续更新中
序言 本章介绍项目中常用第三方模块#xff0c;方便快速构建项目… flutter项目中常用第三方模块 持续更新中序言关于第三方模块安装flutter_native_splash使用方式模块配置 flutter_localizations模块配置使用方式 get_storage模块配置使用方式 get模块配置使用方式 持续更新中
序言 本章介绍项目中常用第三方模块方便快速构建项目 关于第三方模块安装
使用前可清除下缓存然后下载
flutter clean
flutter pub getflutter_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.plistflutter_localizations 解决国际化问题 模块配置
dependencies:flutter_localizations:sdk: flutter使用方式
vscode安装 Flutter Intl 插件vscode使用commandshiftp输入 **flutterIntl.initialize指令初始化语言配置信息
执行完后会在lib目录下增加 generated 和 l10n两个包generated包下的intl包默认存在一个messages_all.dart和messages_en.dart文件messages开头的文件会在添加语言后自动生成l10n包下存在一个intl_en.arb文件vscode使用commandshiftp 输入flutterIntl.addLocale 填写需要添加的语言指令生成其他语言的arb文件
例如:zh_CN , 会在l10n包下生成Intl_zh_CN.arb文件 , 在其中填入对应的文案MaterialApp() 中引入
import package:flutter_localizations/flutter_localizations.dart;
import generated/l10n.dart;overrideWidget build(BuildContext context) {// TODO: implement buildreturn 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 herehome: Scaffold( //脚手架 搭建页面结构appBar: AppBar( //导航栏title: Text(asas),),body: HYHomePage()));}其他组件中使用
例如 使用文本组件 Text(S.of(context).title)get_storage 本地数据持久化 模块配置
dependencies:flutter_native_splash: ^1.2.1使用方式
安装导入
import package:get_storage/get_storage.dart;代码中初始化
main() async {await GetStorage.init();runApp(App());
}使用
final box GetStorage(); //初始化容器
或者
GetStorage g GetStorage(MyStorage); //初始化指定容器box.write(a, 666); //存
print(box.read(a)); //读 输出666
box.remove(a); //删
box.erase(); //清空get 状态管理 模块配置
dependencies:get: ^4.6.5使用方式
安装导入
import package:get/get.dart;代码中修改MaterialApp为GetMaterialApp
void main() runApp(GetMaterialApp(home: Home()));创建业务逻辑类
class Controller extends GetxController{var count 0.obs;increment() count;
}使用
class Home extends StatelessWidget {overrideWidget 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 dont need contextbody: 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();overrideWidget build(context){// Access the updated count variablereturn Scaffold(body: Center(child: Text(${c.count})));}
}
