关注我们

Flutter - Splash Screen

初始屏幕是启动屏幕，开始屏幕或引导屏幕，它是包含图像，徽标和软件当前版本的图形控制元素。这是应用程序加载时显示的第一个屏幕。它也可以是应用程序的欢迎屏幕，在启动移动游戏或程序时提供简单的初始体验。

方法1:在第一种方法中，无涯教程将实现Timer()函数以在应用程序中创建启动画面。

首先，在您使用的IDE中创建一个新项目。打开项目，导航到lib文件夹，然后将以下代码替换为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(
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  SplashScreenState createState() => SplashScreenState();
}
class SplashScreenState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    Timer(Duration(seconds: 5),
            ()=>Navigator.pushReplacement(context,
            MaterialPageRoute(builder:
                (context) => HomeScreen()
            )
         )
    );
  }
  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.yellow,
        child:FlutterLogo(size:MediaQuery.of(context).size.height)
    );
  }
}
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:Text("Splash Screen Example")),
      body: Center(
          child:Text("Welcome to Home Page",
              style: TextStyle( color: Colors.black, fontSize: 30)
          )
      ),
    );
  }
}

在上面的代码中，当有状态窗口小部件插入窗口小部件树中时，无涯教程有一个方法initState()被调用一次。此方法首先调用super.initState()，然后调用Timer函数。计时器函数包含两个参数，其中第一个是持续时间，第二个是要执行的操作。无涯教程将持续时间指定为五秒钟，完成时间后，当前屏幕将替换为应用程序的主屏幕，即HomeScreen()。

当无涯教程打开应用程序时，无涯教程将首先看到Flutter Logo 5秒钟，如下所示屏幕截图所示。

完成5秒后，它将显示下面的屏幕截图中显示的应用程序的主屏幕。

方法2:在第二种方法中，无涯教程将使用启动屏幕包在无涯教程的应用程序中创建启动屏幕。该程序包提供以下许多属性：

复制代码

SplashScreen ({ Color loaderColor,
int seconds, 
double photoSize, 
Image image, 
Text loadingText, 
Color backgroundColor,
Text title, 
TextStyle styleTextUnderTheLoader, 
dynamic onClick, 
dynamic navigateAfterSeconds, 
ImageProvider<dynamic> imageBackground, 
Gradient gradientBackground})

首先，在您使用的IDE中创建一个新项目。打开项目，导航到lib文件夹，然后打开pubspec.yaml文件，在其中无涯教程需要添加启动画面依赖项，如下所示：

现在，打开 main.dart 文件并用以下代码替换它。

复制代码

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:splashscreen/splashscreen.dart';

void main() { runApp(MyApp()); }

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: SplashScreenPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
class SplashScreenPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SplashScreen(
      seconds: 5,
      navigateAfterSeconds: new HomeScreen(),
      backgroundColor: Colors.yellow,
      title: new Text('Flutter Learnfk',textScaleFactor: 2,),
      image: new Image.network(
          'https://static.learnfk.com/tutorial/flutter/images/flutter-creating-android-platform-specific-code3.png'
      ),
      loadingText: Text("Loading"),
      photoSize: 150.0,
      loaderColor: Colors.red,
    );
  }
}
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:Text("Splash Screen Example")),
      body: Center(
          child:Text("Welcome to Home Page",
              style: TextStyle( color: Colors.black, fontSize: 30)
          )
      ),
    );
  }
}