Dart与Flutter教程 应用启动画面设置

如何在Flutter应用中设置启动画面？我尝试使用flutter_native_splash插件，但生成的启动画面在Android和iOS设备上显示时间不一致。具体问题是：

  1. Android设备上启动画面消失太快，几乎看不到；
  2. iOS设备上却会多停留几秒，导致白屏时间较长。
    已按照文档配置color和image参数，是否需要调整duration或其他隐藏设置？有没有更稳定的原生实现方案？
3 回复

在Dart和Flutter中设置应用启动画面（Splash Screen），你可以通过修改launch_background.xml文件来实现。首先，在android/app/src/main/res目录下找到drawable文件夹，如果没有就创建一个。

  1. 图片方式：准备一张启动图放到drawable文件夹里，比如splash_screen.png。
  2. 颜色方式：编辑launch_background.xml，如下：
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/your_color"/>
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/splash_screen"/>
    </item>
</layer-list>

然后在styles.xml中配置主题：

<style name="LaunchTheme" parent="Theme.AppCompat">
    <item name="android:windowBackground">@drawable/launch_background</item>
</style>

最后，在main.dart的MaterialApp里指定初始路由或页面即可完成启动画面设置。如果需要动态加载，可以结合FutureBuilder延迟显示主页面。

更多关于Dart与Flutter教程 应用启动画面设置的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中设置应用启动画面（Splash Screen）主要涉及两个部分：启动画面图片和显示时长。首先，在pubspec.yaml文件中配置图片资源：

flutter:
  assets:
    - assets/splash.png

然后将图片放在assets目录下。接着修改main.dart文件，使用SplashScreen插件或手动实现。以下是手动实现代码示例：

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SplashPage(),
    );
  }
}

class SplashPage extends StatefulWidget {
  @override
  _SplashPageState createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage> {
  @override
  void initState() {
    super.initState();
    Future.delayed(Duration(seconds: 3), () {
      Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (_) => HomePage()));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image.asset('assets/splash.png', width: 200),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Home")),
      body: Center(child: Text("欢迎！")),
    );
  }
}

这段代码会在应用启动时显示splash.png图片，延迟3秒后跳转到主页。

Dart与Flutter应用启动画面设置教程

在Flutter应用中设置启动画面(启动页)主要有两种方式：

方法一：使用flutter_native_splash包(推荐)

  1. 添加依赖到pubspec.yaml：
dependencies:
  flutter_native_splash: ^2.3.10
  1. 配置启动画面参数：
flutter_native_splash:
  color: "#42a5f5"
  image: assets/images/splash.png
  android: true
  ios: true
  1. 运行命令生成启动画面：
flutter pub add flutter_native_splash
flutter pub run flutter_native_splash:create

方法二：原生平台配置(适用于需要完全自定义的情况)

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="@android:color/white"/>
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/splash"/>
    </item>
</layer-list>

iOS配置(ios/Runner/LaunchScreen.storyboard)

需要修改Storyboard文件或添加图片资源

注意事项

  • 启动画面显示时间不可控，会持续到Flutter引擎初始化完成
  • 图片建议使用矢量图或适配多种屏幕尺寸
  • 启动画面完成后可以添加过渡动画到首屏

建议使用flutter_native_splash包，它简化了跨平台配置过程并自动处理各种屏幕尺寸。

回到顶部