重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
flutter web有三种渲染模式,auto 、html 和 canvaskit。
目前成都创新互联已为1000+的企业提供了网站建设、域名、网络空间、网站改版维护、企业网站设计、东平网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
flutter build web命令默认的渲染模式为auto,这种模式在移动端使用html渲染,在pc端使用canvaskit渲染。
目前我的flutter版本是2.5.2,pc端浏览器使用canvaskit渲染时中文会出现短暂的乱码(方块叉号),像这样:
我们可以指定渲染模式为html,就不会有这个问题了,命令如下:
指定渲染模式为canvaskit的命令为:
2021.10.21:flutter web对中文的支持貌似不太好,在手机浏览器调试web项目时,textfield hinttext有中文输入会有卡顿bug
上一篇讲到如果解决ios长按输入框报错的问题,但是最终没有达到我们的要求,因为我们想实现中文的提示,那么本篇文章讲讲如何来实现多语言配置;
1.首先在pubspec.yaml的dependencies下加入这个
flutter_localizations:
sdk: flutter
如图:
2.然后在MaterialApp设置一下localizationsDelegates如图:
3.写一个类继承一下CupertinoLocalizations,在项目中 我这个类名叫ChineseCupertinoLocalizations(没错,就是localizationsDelegates中的第三个),如图:
上次提到报错的原因就是因为cutButtonLabel,copyButtonLabel,pasteButtonLabel,selectAllButtonLabel 这几个按钮没有实现,所以继承CupertinoLocalizations一定要为这几个按钮赋值,这里是那种语言,那么,赋值就对应那种语言,同时要注意locale.languageCode也要填写,如果你是中文,那么locale.languageCode =='zh';
4.在ios工程中,在项目的info设置语言环境
添加 Localization native development region---china
添加一个Localizations 为array类型的,并且设置值为 Chinese (simplified)
效果图:( 注意:请把手机环境调试成中文的语言环境 )
Android
ios 效果图
我公司用flutter做了一个《柚品生活》的app,感兴趣的朋友可以去看看,Android和ios都已经上架了
最后附上GitHub项目地址 GitHub - hxxsocket/flutter_lg_demo: flutter多语言配置之中文
android打包教程:
1、在AndroidManifest中确定app的名字:
2、在app/build.gradle中设置安卓兼容版本targetSdkVersion和最低版本minSdkVersion,还有编译版本compileSdkVersion,还有设置包名applicationId,一般不用设置,除非你是要变更
4、添加启动图标,图标资源文件的位置如下:
看到这个文件的时候,就说明创建证书成功了
6、配置项目证书
在android目录下新建一个file文件key.properties,然后填写证书的信息如下:
7、启用混淆
在app路径中添加proguard-rules.pro文件(这个百度下就好了)
8、构建flutter build apk