大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
近来闲暇时间一直在做Flutter,闪屏页是一个比较常见的需求,网上的闪屏页教程大部分是那种类似于广告页,而非iOS中的 LaunchScreen 性质的闪屏页.按照原来的方案我们要配置闪屏页的话,我们需要同时配置两端的闪屏页,那么有没有比较简单的方案来配置闪屏页呢? 毋庸置疑,当然是有了,那就是Flutter的插件 - flutter_native_splash . 接下来我们就来看一下具体应该怎么使用这个插件.
成都创新互联公司是一家专注网站建设、网络营销策划、微信小程序、电子商务建设、网络推广、移动互联开发、研究、服务为一体的技术型公司。公司成立十载以来,已经为1000+成都石雕各业的企业公司提供互联网服务。现在,服务的1000+客户与我们一路同行,见证我们的成长;未来,我们一起分享成功的喜悦。
首先把 flutter_native_splash 导入到工程的 pubspec.yaml 中.这里需要注意的是需要放在 dev_dependencies 下,而不是 dependencies .具体如下所示.
接下来我们就来配置 flutter_native_splash ,在配置之前我们看一下 flutter_native_splash 的可配置项.
例如,我现在只有一个logo图片,那么我想生成iOS和android两端的闪屏页,这时候我只需在 pubspec.yaml 如下设置即可.
当然了,如果你有其他配置可以自行进行添加.
配置完成了,我们该如何生成呢?这时候需要我们打开终端 cd 到我们的工程目录下.如果是Android Studio 或者 VSCode 默认就是在当前工程目录下.
然后我们需要执行下面的三个命令来生成闪屏页
每一次都敲三个命令实属麻烦,我们把上诉的三个命令整合成一个命令,如下所示.
那么,我们不想使用该插件生成的闪屏页该怎么办呢?我们只需要执行下面命令即可.
注:每一次更换图片都是需要重新执行命令重新生成.
OK,上面就是关于 flutter_native_splash 的使用全部内容,其实比较简单,如果需要定制化的,建议还是各自平台配置各自的闪屏页.如果有任何问题欢迎在评论区批评指导,感谢大家了.
如果和我一样,用惯了VS Code来开发项目的话,那就跟我一起来配置一下如何在VS Code里运行flutter项目。
1.在VS Code里安装扩展:
2.在VScode上打开打开终端,快捷键:Ctrl+~(Tab上一个键),在终端上输入:flutter create flutter_app02,即可创建完成!
也可以把之前的项目放到工作区
3.在终端中运行命令:flutter run
运行的时候你会发现手机提示你安装个app,点击安装完成,项目就在手机上显示了,下图是运行成功的提示。
下图是手机效果:
如果报错的话,运行下清缓存的命令:flutter clean,把文件夹.gradle删掉,然后flutter run重新跑下项目。
如果没有输出可能原因有两个
1.我们使用 vscode ## vs code支持的额很好。
版本问题 -- 自行查找对应版本
修改 yaml 文件中的版本知道运行成功。或者直接改成any,从lock文件中找到真正版本再修改yaml中的文件
Flutter项目可以用三种方式开发:
可以根据自己的需求选择,由于之前一直做iOS开发,也做过RN项目开发,Mac上装过Android Studio 和 其他安卓模拟器 Genymotion ,所以我选择Android Studio开发工具,之前装的版本 3.0.1 比较老了,所以进行了升级 3.4 。
体验Flutter
PS:第一次创建项目可以成功,之后再执行这一步操作创建新的Flutter项目时,一直卡住,重启过很多次Android Studio一直都是这样,后面查询资料,发现自己没有同意使用 android-licenses ,可以通过下列命令验证,第一步,先验证:
第一步检测结果,发现是需要同意 android-licenses :
第二步执行同意命令,操作时会有很多个 android-licenses 需要同意:
第二步检测结果:
第三步再次验证,当得到以下截图中结果时,代表所有环境配置已经完成:
上述命令创建一个Flutter项目,项目名为 myapp ,在项目目录中,有安卓和iOS两个项目目录。
Android Studio中会列出所有已经连接了电脑的设备,包括安卓和iPhone。如果想在模拟器上运行,下面可以选择对应的模拟器,如图:
PS:如果想在模拟器上运行,需要先安装一个模拟器,选择Tools AVD Manager,如图:
然后选择Create Virtual Device,根据提示一步一步操作即可(建议翻墙条件下操作),添加完成后就可以在这个界面看到自己已经添加的模拟器,点击绿色的运行按钮,即可打开该模拟器: