Flutter splash 屏幕
Flutter splash 屏幕
![](/assets/blank.gif)
原文 https://medium.com/@bedirhanssaglam/flutter-splash-screen-a8cafec52c8e
前言
启动画面通常被特别大的应用程序用来通知用户程序正在加载过程中。它们提供的反馈表明,一个漫长的过程正在进行中。有时,启动画面中的进度条会指示加载进度。当应用程序的主窗口出现时,启动画面就会消失。启动画面可以添加一段时间,然后重新替换。
正文
启动画面通常用于增强应用程序或网站的外观和感觉,因此它们通常在视觉上很吸引人。它们还可以具有动画、图形和声音。
![](/assets/blank.gif)
对于本文,我将从 flutter_national_splash 包获得帮助,我也在业务项目中使用该包。Flutter_national_splash 是 Flutter 最喜欢的软件包之一。它是最先进的闪屏解决方案之一。
让我们看看如何一步一步地做。
flutter_native_splash 包
首先,我们将库添加到 pubspec.yaml 文件。接下来,我们将用于启动画面的图像文件包含到项目中。
图像文件必须有.png extension 名。
pubspec.yaml
dependencies: flutter: sdk: flutter cupertino_icons: ^1.0.2
flutter_native_splash: ^2.2.10+1
![](/assets/blank.gif)
flutter_navite_splash.yaml 配置
然后,创建一个名为 flutter_navite_splash.yaml 的文件,复制并粘贴下面的文本。 注意: 我在这里为您定制了一些设置。如果您想在自己的项目中使用该文件,只需更改“ image”部分:)
flutter_native_splash.yaml
flutter_native_splash: # This package generates native code to customize Flutter's default white native splash screen # with background color and splash image. # Customize the parameters below, and run the following command in the terminal: # flutter pub run flutter_native_splash:create # To restore Flutter's default white splash screen, run the following command in the terminal: # flutter pub run flutter_native_splash:remove
# color or background_image is the only required parameter. Use color to set the background # of your splash screen to a solid color. Use background_image to set the background of your # splash screen to a png image. This is useful for gradients. The image will be stretch to the # size of the app. Only one parameter can be used, color and background_image cannot both be set. color: "#ffffff" #background_image: "assets/background.png"
# Optional parameters are listed below. To enable a parameter, uncomment the line by removing # the leading # character.
# The image parameter allows you to specify an image used in the splash screen. It must be a # png file and should be sized for 4x pixel density. image: "assets/images/covid_splash.png"
# The color_dark, background_image_dark, and image_dark are parameters that set the background # and image when the device is in dark mode. If they are not specified, the app will use the # parameters from above. If the image_dark parameter is specified, color_dark or # background_image_dark must be specified. color_dark and background_image_dark cannot both be # set. #color_dark: "#042a49" #background_image_dark: "assets/dark-background.png" #image_dark: assets/splash-invert.png
# The android, ios and web parameters can be used to disable generating a splash screen on a given # platform. android: true ios: true web: false
# The position of the splash image can be set with android_gravity, ios_content_mode, and # web_image_mode parameters. All default to center. # # android_gravity can be one of the following Android Gravity (see # 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, or top. android_gravity: fill # # ios_content_mode can be one of the following iOS UIView.ContentMode (see # https://developer.apple.com/documentation/uikit/uiview/contentmode): scaleToFill, # scaleAspectFit, scaleAspectFill, center, top, bottom, left, right, topLeft, topRight, # bottomLeft, or bottomRight. ios_content_mode: scaleToFill # # web_image_mode can be one of the following modes: center, contain, stretch, and cover. #web_image_mode: center
# To hide the notification bar, use the fullscreen parameter. Has no affect in web since web # has no notification bar. Defaults to false. # NOTE: Unlike Android, iOS will not automatically show the notification bar when the app loads. # To show the notification bar, add the following code to your Flutter app: # WidgetsFlutterBinding.ensureInitialized(); # SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom, SystemUiOverlay.top]); #fullscreen: true
# If you have changed the name(s) of your info.plist file(s), you can specify the filename(s) # with the info_plist_files parameter. Remove only the # characters in the three lines below, # do not remove any spaces: #info_plist_files: # - 'ios/Runner/Info-Debug.plist' # - 'ios/Runner/Info-Release.plist'
然后在终端运行 Flutter clean
清理命令。
然后运行 flutter pub,运行 「flutter pub run flutter_native_splash:create」
在那之后,如果你在终端中看到以下内容,那么你已经做到了! :)
![](/assets/blank.gif)
main.dart 代码
现在是时候把最后一点。
main.dart
void main() async { WidgetsFlutterBinding.ensureInitialized(); await initialization(null); runApp(MyApp());}
Future initialization(BuildContext? context) async { await Future.delayed(const Duration(milliseconds: 500));}}
我们在不运行 MyApp 的情况下调用启动画面。然后我们决定它会在屏幕上出现多长时间。现在,当我们关闭应用程序并从菜单中再次打开它时,我们定义的图像将出现。
结束语
如果本文对你有帮助,请转发让更多的朋友阅读。
也许这个操作只要你 3 秒钟,对我来说是一个激励,感谢。
祝你有一个美好的一天~
© 猫哥
微信 ducafecat
https://wiki.ducafecat.tech
https://video.ducafecat.tech
本文由 mdnice 多平台发布
Flutter splash 屏幕相关推荐
- Flutter Splash闪屏页
Splash页 flutter也可以添加一个SplashPage void main() {runApp(MyApp()); }class MyApp extends StatelessWidget ...
- 【Flutter】屏幕像素适配方案 ( flutter_screenutil 插件 )
文章目录 一.推荐使用 flutter_screenutil 插件 二.flutter_screenutil 插件使用 1.导入 flutter_screenutil 插件依赖 2. flutter_ ...
- Flutter唤醒屏幕(Android)
本篇有用到混合开发,我不懂原生,粗略带过... 本篇使用java作为Android语言,不是Flutter官方的Kotlin 这里写目录标题 Dart部分 Android部分 Dart部分 创建Met ...
- 解决Flutter旋转屏幕状态栏空缺的问题
问题 最近要实现一个视频播放器,全屏播放时需要旋转屏幕,把案例拿出来试了一下,旋转屏幕后呈现的状态是这样 解决办法 打开项目下android/app/src/main/res/values/style ...
- flutter rpx屏幕适配方案
rpx是小程序中的适配方案,它将750px作为设计稿,1rpx=屏幕宽度/750,其它所有的单位都使用rpx单位. 不管是什么屏幕,统一分成750份 在iPhone8上: 1rpx = 375/750 ...
- cocos2dx3.2 实现splash屏幕图片秀滚动
嘿,秀一下效果图: 让这四张美女图片,循环的向上滚动,那么如何做的呢? 首先准备四张图片分别命名: Beauty1,Beauty2, Beauty3,Beauty4 然后在Splash类中添加_vcS ...
- Flutter中获取监听屏幕方向、锁定屏幕方向
文章目录 获取当前屏幕的方向 实时监听屏幕方向的改变 锁定屏幕方向 锁定方向,禁止App随着设备的方向改变 锁定启动图的方向 默认效果 Android配置 IOS配置 动态改变Flutter的屏幕方向 ...
- 走近科学,探究阿里闲鱼团队通过数据提升Flutter体验的真相
背景 闲鱼客户端的flutter页面已经服务上亿级用户,这个时候Flutter页面的用户体验尤其重要,完善Flutter性能稳定性监控体系,可以及早发现线上性能问题,也可以作为用户体验提升的衡量标准. ...
- 开始用Flutter做游戏吧
一点点基础 游戏主循环(GameLoop) 游戏主循环是游戏的核心,计算机一次又一次运行的一组指令,用通俗的话来说,如果游戏有生命,那么游戏主循环就是游戏的心跳. 同时为了更好的理解游戏主循环,还需要 ...
最新文章
- 权威预测:2018年这十大数字化转型趋势要火!
- LeetCode最大子序和 (动态规划)python
- php数组添加省会城市,【JSON数据】中国各省份省会城市经纬度 JSON
- linux工作笔记-linux之间文件传输图形界面工具gftp
- java的io流的file类_java IO流 (一) File类的使用
- shell命令行快捷键
- Feign集成Hystric报错
- web微信授权登陆-配置篇
- Python快速实现人脸识别
- 译《Office商业应用程序入门》
- python中的除法、取整和求模_python中的除法,取整和求模-Go语言中文社区
- 老话讲“深秋不补,过冬吃苦”,五种食物要常吃,安稳度秋
- NFT游戏开发元宇宙游戏开发游戏源码+搭建
- html 动画接口,10款 Web 动画插件
- Python Scrapy使用实例讲解
- 重新编译开源代码绕过杀毒软件(无导入表编译)
- 响应号召!中国北斗+国产GIS 打好基础软件国产化攻坚战
- 安装软件之后需要管理员身份才能运行
- 基于stm32的FIR滤波
- 【转载】【无敌】电脑端Root Explorer!