Flutter Splash闪屏页

最新推荐文章于 2025-09-24 13:42:43 发布

原创最新推荐文章于 2025-09-24 13:42:43 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

Flutter 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Flutter中创建SplashPage，包括在Android端设置launch_background.xml以添加splash图片，修改styles.xml以保持 splash.png 显示，以及遵循官方教程进行配置。关键点在于UI按1080p尺寸切图，并将图片放入xxxhdpi drawable文件夹，确保在不同设备上显示正常。

Splash页

flutter也可以添加一个SplashPage

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MySplashPage(),
    );
  }
}

class MySplashPage extends StatefulWidget {
  @override
  _MySplashPageState createState() => _MySplashPageState();
}

class _MySplashPageState extends State<MySplashPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Image(
        image: AssetImage('images/splash.png'),
        fit: BoxFit.fill,
      ),
    );
  }

  @override
  void initState() {
    // 启动的时候将屏幕设置成全屏模式
    SystemChrome.setEnabledSystemUIOverlays([]);
    super.initState();

// 这里进行1秒后跳转
    Timer(
        Duration(seconds: 1),
        () => Navigator.of(context).pushReplacement(MaterialPageRoute(
            builder: (BuildContext context) => MyHomePage())));
  }

  @override
  void dispose() {
    // 关闭的时候将屏幕设置成原来的状态
    SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
    super.dispose();
  }
}

Android端需要将对应的 launch_background.xml 里添加splash的图片资源

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
      全屏显示
        <bitmap android:gravity="fill" android:src="@drawable/splash" />
    </item>

</layer-list>

如果想要在跳转到第一个page的时候也是当前的splash.png 的话就需要更改另一个配置 styles.xml 文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Theme applied to the Android Window while the process is starting -->
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
        <item name="android:windowDrawsSystemBarBackgrounds">false</item>
    </style>
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.
         
         This Theme is only used starting with V2 of Flutter's Android embedding. -->
<!--    正常的状态下也是显示splash一样的状态-->
    <style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">@drawable/launch_background</item>

    </style>
</resources>

最后官方其实有教程的
官方地址

最后是一些splash相关的的xml编写；

这是主题中的配置
<item name="android:windowBackground">@drawable/launch_background</item>

launch_background.xml 

<?xml version="1.0" encoding="utf-8"?><!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!--背景图-->
    <item android:drawable="@drawable/splash_background" />

    <!--中间显示logo+文案  图片-->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/logo_text" />
    </item>


</layer-list>

然后需要注意的点是：背景图和 logo 这些都让UI按1080的图片进行切图，
然后我们把这2个图片都放到xxxhdpi的drawable里，这样大小不同的机型都可以显示正常的！！！