当前位置：移动技术网 > IT编程>开发语言>Java > Flutter Splash闪屏页

Flutter Splash闪屏页

2020年07月17日 | 移动技术网IT编程 | 我要评论

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>

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

本文地址：https://blog.csdn.net/ButtonXin/article/details/107388129