[译]Flutter闪屏画面库flutter_native_splash

本文翻译自pub: flutter_native_splash | Flutter Package (flutter-io.cn)

译时版本: flutter_native_splash 2.0.2


当应用打开时,在原生应用加载 Flutter 之前会有一个短暂的时间。默认情况下,在此期间,原生应用会显示一个白屏画面。该包自动生成 iOS 、 Android 和 Web 的原生代码来自定义闪屏画面的背景色和闪屏图像。支持黑暗模式、全屏和平台指定选项。

splash_demo.gif

splash_demo_dark.gif

新内容

现在可以在应用初始化时一直显示闪屏界面!不再需要第二个闪屏界面。 只需使用 removeAfter 方法在初始化完成之后移除闪屏界面。 查看下面的详细内容

用法

更想看视频指南?可以看下 Johannes Milke 的指南(油管)。

首先,添加 flutter_native_splash 依赖到 pubspec.yaml 文件中。

dependencies:
  flutter_native_splash: ^2.0.2 

别忘了 flutter pub get

1. 闪屏界面

自定义下面的设置,然后添加到工程的 pubspec.yaml 文件中,或者在工程文件夹下放置名为 flutter_native_splash.yaml 的新文件。

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: "#42a5f5"
  #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/and
  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Flutter闪屏页可以通过Flutter的启动流程来实现。在Flutter中,应用程序的入口是main()函数,在main()函数中,我们可以使用Flutter提供的WidgetsFlutterBinding.ensureInitialized()方法来初始化Flutter的绑定。 在初始化完成后,我们可以使用Navigator.pushReplacement()方法来实现闪屏页的效果。具体步骤如下: 1.在main()函数中,初始化Flutter的绑定: void main() async { WidgetsFlutterBinding.ensureInitialized(); ... } 2.创建闪屏页的Widget,并在Widget的build()方法中调用Navigator.pushReplacement()方法: class SplashScreen extends StatelessWidget { @override Widget build(BuildContext context) { Future.delayed(Duration(milliseconds: 3000), () { Navigator.pushReplacement( context, MaterialPageRoute(builder: (context) => HomePage()), ); }); return Scaffold( backgroundColor: Colors.white, body: Center( child: Text( 'Splash Screen', style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold), ), ), ); } } 在上面的代码中,我们使用Future.delayed()方法来延迟3秒钟,然后调用Navigator.pushReplacement()方法来跳转到主页。在实际开发中,我们可以根据需要设置延迟时间。 3.在main()函数中,调用runApp()方法并传入闪屏页的Widget: void main() async { WidgetsFlutterBinding.ensureInitialized(); runApp(MaterialApp(home: SplashScreen())); } 这样,当应用程序启动时,就会显示闪屏页,延迟一定时间后自动跳转到主页。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值