如何在Flutter App 中添加启动画面？

我们都听说过Flutter ，它是一个跨平台的应用程序开发工具。 Flutter可用于制作 Android、IOS 和 Web 应用程序，只需一种代码库（Dart编程语言）。在本文中，让我们看看如何为我们的应用程序添加启动画面。

什么是启动画面？

当我们在手机上打开一个应用程序时，我们首先看到的是一个屏幕，中间有一个应用程序的标志，这个屏幕被称为启动屏幕现在这个启动屏幕可以用来让我们的应用程序看起来很花哨，但是有更重要的是。

当我们在设备上打开应用程序时，某些应用程序需要先对用户（打开应用程序的用户）进行身份验证，然后才能让我们使用该应用程序。这种身份验证有时需要几分之一秒，在此期间用户会看到一个启动屏幕，这样应用程序就不会出现卡住的情况。

如何实施？

Flutter是关于包的，总有一个包可供我们使用。在我们的这个问题中，我们将使用一个名为animated_splash_screen的包。

要安装此软件包，请将以下代码添加到pubspec.yaml文件并运行 pub get ：

dependencies:
  animated_splash_screen: ^1.1.0

注意：注意缩进，如果你弄错了缩进，你会得到一个错误，我们绝对不喜欢错误。

当我们从头开始创建一个flutter应用程序时，我们会看到一些样板代码，如下所示。dart文件。

Dart

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        
      // Application name
      title: 'Flutter Hello World',
        
      // Application theme data, you can set
      // the colors for the application as
      // you want
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
        
      // A widget which will be started on application startup
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
  
class MyHomePage extends StatelessWidget {
  final String title;
  
  const MyHomePage({@required this.title});
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          
        // The title text which will
        // be shown on the action bar
        title: Text(title),
      ),
      body: Center(
        child: Text(
          'Hello, World!',
        ),
      ),
    );
  }
}

在上面的代码中，我们不会返回 MyHomePage，而是返回一个 AnimatedSplashScreen，它还需要一个nextScreen ，我们将在其中返回 MyHomePage。像这样：

Dart

import 'package:flutter/material.dart';
import 'package:animated_splash_screen/animated_splash_screen.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        
      // Application name
      title: 'GFG tutotial',
        
      // Application theme data, you can set the
      // colors for the application as
      // you want
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
        
      // A widget which will be started on application startup
      home: AnimatedSplashScreen(
        splash: 'images/gfg.png',
        nextScreen: MyHomePage(title: 'GeeksForGeeks'),
        splashTransition: SplashTransition.fadeTransition,
      ),
    );
  }
}
  
class MyHomePage extends StatelessWidget {
  final String title;
  
  const MyHomePage({@required this.title});
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          
        // The title text which will be shown on the action bar
        title: Text(title),
      ),
      body: Center(
        child: Text(
          'GeeksForGeeks!',
        ),
      ),
    );
  }
}

要将我们自己的图像用于启动画面，我们必须在pubspec.yaml文件的 assets 部分下包含图像：

输出 ：