轻松实现 Flutter 的闪屏页：闪屏也可以这样搞？

2023-09-30 23:41:43

Flutter中的闪屏页：打造引人入胜的应用程序开场

什么是闪屏页？

闪屏页是应用程序启动时出现的第一个界面，通常用于展示应用程序的徽标、名称或加载信息。它为用户提供了一个视觉提示，表明应用程序正在加载并准备就绪。

在Flutter中创建闪屏页

在Flutter中创建闪屏页非常简单。首先，安装 flutter_spinkit 依赖项，该依赖项提供各种加载动画。然后，在你的 lib 文件夹中创建一个 splash_screen.dart 文件，并添加以下代码：

import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SpinKitWave(
          color: Colors.blue,
          size: 50.0,
        ),
      ),
    );
  }
}

接下来，在你的 main.dart 文件中，将 SplashScreen 组件设置为应用程序的主页：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SplashScreen(),
    );
  }
}

自定义闪屏页

你可以根据你的需求自定义闪屏页。例如，你可以更改加载动画、添加文本或图像。要更改加载动画，可以使用 flutter_spinkit 包中的其他组件。要添加文本，可以使用 Text 组件。要添加图像，可以使用 Image 组件。

隐藏闪屏页

当应用程序加载完成后，你需要隐藏闪屏页。你可以使用 FutureBuilder 组件来实现此目的。在 splash_screen.dart 文件中，将 SplashScreen 组件更新为：

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: Future.delayed(Duration(seconds: 3)),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          return MyApp();
        } else {
          return Scaffold(
            body: Center(
              child: SpinKitWave(
                color: Colors.blue,
                size: 50.0,
              ),
            ),
          );
        }
      },
    );
  }
}