Flutter如何实现开机Splash界面

Flutter开发新手求教，如何在应用中实现一个开机Splash界面？我尝试了官方文档的方法，但效果不太理想，想了解一下大家常用的实现方案和最佳实践。另外，Splash界面加载后如何平滑过渡到主页面？希望有经验的开发者能分享一下具体的代码示例和注意事项。

2 回复

在Flutter中实现开机Splash界面，可在main.dart中设置home为Splash页面，使用Timer延迟跳转主页面。或使用flutter_native_splash包自动生成原生Splash。

更多关于Flutter如何实现开机Splash界面的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现开机Splash界面（启动页）主要有两种方法：

方法一：使用原生配置（推荐）

Android配置

在 android/app/src/main/res/drawable/launch_background.xml 中：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/background_color"/>
    
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/splash_logo"/>
    </item>
</layer-list>

iOS配置

在 ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json 中配置启动图片。

方法二：使用flutter_native_splash包

  1. 添加依赖
dev_dependencies:
  flutter_native_splash: ^2.3.7
  1. 配置pubspec.yaml
flutter_native_splash:
  color: "#ffffff"
  image: assets/images/splash_logo.png
  android: true
  ios: true
  1. 生成启动页
flutter pub get
flutter pub run flutter_native_splash:create

方法三：自定义Splash页面

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    _navigateToHome();
  }

  _navigateToHome() async {
    await Future.delayed(Duration(seconds: 3));
    Navigator.pushReplacement(
      context,
      MaterialPageRoute(builder: (context) => HomePage()),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Image.asset('assets/images/splash_logo.png'),
      ),
    );
  }
}

推荐使用方法二，因为它能提供更好的用户体验，避免白屏现象，且实现简单。

回到顶部