在Flutter App 中添加启动画面

启动画面是应用程序启动时的第一个留下印象的东西，也是用户第一次与应用程序交互的地方。因此，为应用程序添加一个令人印象深刻的启动画面非常重要。在本篇文章中，我们将介绍如何在Flutter App中添加启动画面。

1. 使用默认启动画面

Flutter提供了一个默认的启动画面，可以在应用程序启动时显示。这个画面来自Flutter的库，在加载你的应用程序之前，将会显示。

如果你不需要自定义启动画面，可以跳过此步骤，直接进入第二步。

要在您的应用程序中使用默认的启动画面，请按照以下步骤操作：

1. 在pubspec.yaml文件中添加以下内容：

   dependencies:
     flutter:
       sdk: flutter
   
   flutter:
     assets:
       - assets/flutter_logo.png # 引用默认的启动画面（可选）
   

   在这个例子中，我们使用 Flutter 的客户端资产管理器将默认的启动画面作为应用程序图标加载。

2. 在您的main.dart文件中，添加以下代码：

   import 'dart:async';
   import 'package:flutter/material.dart';
   
   void main() => runApp(MyApp());
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter App',
         home: SplashScreen(),
       );
     }
   }
   
   class SplashScreen extends StatefulWidget {
     @override
     _SplashScreenState createState() => _SplashScreenState();
   }
   
   class _SplashScreenState extends State<SplashScreen> {
     @override
     void initState() {
       super.initState();
       Timer(Duration(seconds: 3), () {
         Navigator.of(context).pushReplacement(MaterialPageRoute(
           builder: (BuildContext context) => HomePage(),
         ));
       });
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         backgroundColor: Colors.white,
         body: Center(
           child: FlutterLogo(size: 200),
         ),
       );
     }
   }
   
   class HomePage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: Text('Home Page')),
         body: Center(
           child: Text('Welcome to Flutter', style: TextStyle(fontSize: 24)),
         ),
       );
     }
   }
   

   在这个代码片段中，我们为SplashScreen创建了一个StatefulWidget，其initState()方法将等待3秒钟然后加载HomePage页面。

   我们使用了FlutterLogo控件作为默认启动画面，您也可以更换为其他控件。

2. 自定义启动画面

如果你想要给应用程序添加自定义的启动画面，这里是一个步骤：

1. 添加你的启动画面到你的项目中，并在pubspec.yaml文件中声明它。下面是一个例子：

   flutter:
     assets:
       - assets/splash.png
   

   在这个例子中，我们在项目assets目录下创建了一个名为splash.png的图片资源。

2. 创建新的StatelessWidget作为您的启动画面，例如：

   import 'package:flutter/material.dart';
   
   class CustomSplashScreen extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         backgroundColor: Colors.white,
         body: Center(
           child: Image.asset('assets/splash.png'),
         ),
       );
     }
   }
   

   在这个代码片段中，我们创建了一个名为CustomSplashScreen的StatelessWidget，它显示了名为splash.png的图片资源。

3. 在您的应用程序中，将CustomSplashScreen视为主页：

   import 'dart:async';
   import 'package:flutter/material.dart';
   
   void main() => runApp(MyApp());
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter App',
         home: CustomSplashScreen(),
       );
     }
   }
   
   class HomePage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: Text('Home Page')),
         body: Center(
           child: Text('Welcome to Flutter', style: TextStyle(fontSize: 24)),
         ),
       );
     }
   }
   

   起始页被更改为CustomSplashScreen，当启动画面的任务完成时，我们通过Timer将路由替换为HomePage。

现在，您已经成功地为您的Flutter应用程序添加了自定义启动画面。