flutter开屏页

安卓flutter默认的开屏页

在flutter项目找到安卓的配置文件AndroidManifest.xml,将下面的代码写进 <activity>里面

<meta-data

​       android:name="io.flutter.embedding.android.SplashScreenDrawable"

​       android:resource="@drawable/launch_image"

​       />

flutter开屏页插件

flutter_native_splash

插件地址:https://pub.dev/packages/flutter_native_splash

通过插件地址可以看到的使用方法，以下是官方给出的用法截图

也就是要在flutter项目的配置文件(pubspec.yaml)里面复制官方的代码,注意缩进否则报错

dev_dependencies:
  flutter_native_splash: ^1.1.7+1

复制完成后官方说别忘了打命令行来安装插件

flutter pub get

1.设置启动画面

自定义以下设置，并将其添加到项目的pubspec.yaml文件中或放置在名为的根项目文件夹中的新文件中flutter_native_splash.yaml。

flutter_native_splash:
  #需要打开app背景颜色
  color: "#42a5f5"
  #需要打开app背景图片
  # background_image: "assets/launch_image.png"
  #需要打开app图片
  image: assets/launch_image.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: false
  #ios: false
  #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: center
  #
  # 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: center
  #
  # 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'

2.运行包

添加设置后，在终端中运行以下命令：

flutter pub run flutter_native_splash:create

当程序包完成运行时，您的启动屏幕已准备就绪。

建议

二次启动画面：

当本机应用程序加载Flutter框架时，将显示本机启动屏幕。一旦Flutter载入，您的应用程序准备就绪之前，仍然可能需要加载一些资源。因此，您应该考虑实现在加载这些资源时显示的Flutter启动屏幕。这是辅助Flutter初始屏幕的代码示例，或使用pub.dev中的软件包。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      // Replace the 3 second delay with your initialization code:
      future: Future.delayed(Duration(seconds: 3)),
      builder: (context, AsyncSnapshot snapshot) {
        // Show splash screen while waiting for app resources to load:
        if (snapshot.connectionState == ConnectionState.waiting) {
          return MaterialApp(home: Splash());
        } else {
          // Loading is done, return the app:
          return MaterialApp(
            home: Scaffold(body: Center(child: Text('App loaded'))),
          );
        }
      },
    );
  }
}

class Splash extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Icon(
          Icons.apartment_outlined,
          size: MediaQuery.of(context).size.width * 0.785,
        ),
      ),
    );
  }
}

物质资源：

• 如果要使用“材质图标”作为初始图像，请在（material.io/resources/icons）中以Android的****PNG格式下载图标。我建议使用刚刚下载的文件夹中最大的图标，以获得更好的效果。drawable-xxxhdpi
• 材料颜色可在material.io/resources/color中找到

常见问题解答

我可以更改启动画面的持续时间吗？

当本机应用程序加载Flutter框架时，将显示本机启动屏幕。因为在显示本机初始屏幕时无法加载应用程序中的资源，所以本机初始屏幕必须尽可能快。但是，如果您想要更长的启动画面，请参阅辅助启动画面建议。

是否支持动画/字幕/ GIF图像？

目前不行。但是，您可能需要考虑一个支持动画的辅助启动屏幕。请参阅辅助启动画面建议。

注释

• 如果在iOS上未正确更新启动屏幕，或者在启动屏幕之前遇到白屏，请运行flutter clean并重新编译您的应用。如果仍不能解决问题，请按照此stackoverflow线程从设备中删除您的应用程序，关闭设备电源，打开设备电源，安装并启动应用程序。
• 此包修改launch_background.xml和styles.xml文件在Android，LaunchScreen.storyboard和Info.plistiOS设备和index.html基于Web。如果您手动修改了这些文件，则此插件可能无法正常工作。如果发现任何错误，请打开一个问题。

运作方式

Android

• 您的开机画面将调整为mdpi，hdpi，xhdpi，xxhdpi和xxxhdpi可绘。
• <item>包含<bitmap>用于您的初始图像可绘制的标签将添加到launch_background.xml
• 背景色将添加到中colors.xml并在中引用launch_background.xml。
• 用于全屏模式切换的代码将添加到中styles.xml。
• 暗模式变体放置在drawable-night，values-night等资源文件夹。

iOS

• 您的启动图像将被调整为@3x和@2x图像。
• 颜色和图像属性将插入中LaunchScreen.storyboard。
• 通过使用单个像素png文件并将其拉伸以适合屏幕来实现背景色。
• 隐藏状态栏切换的代码将添加到中Info.plist。

网页

• web/splash将为初始屏幕图像和CSS文件创建一个文件夹。
• 您的开机画面将调整为1x，2x以及3x尺寸和放置web/splash/img。
• 初始样式表web/index.html以及初始图片的HTML将添加到应用程序的中。

删除

如果要恢复Flutter的默认白色启动屏幕，请在终端中运行以下命令：

flutter pub run flutter_native_splash:remove