【Flutter】Flutter 使用splashscreen包创建启动页面

文章目录

一、前言

大家好，今天我们要聊一聊如何在 Flutter 中使用 splashscreen 包来创建一个漂亮的启动页面。启动页面在许多应用中都是非常重要的一部分，它能够给用户留下深刻的第一印象，并且可以在应用加载数据或者进行初始化操作的时候为用户提供一个视觉效果。

如果你想深入学习 Flutter，掌握更多的技巧和最佳实践，我有一个好消息要告诉你：我们有一个全面的 Flutter专栏->Flutter Developer 101 入门小册 等待着你。在那里，你将获得完整的、系统的 Flutter 学习资料，包括详细的代码示例和深入的概念解析。更重要的是，我们的专栏正在不断更新和完善，而价格也会随着内容的丰富而逐渐上调。所以，现在加入，你将以最优惠的价格获得所有的内容。现在，让我们开始今天的学习吧！

二、什么是启动页面和 splashscreen

首先，我们来了解一下什么是启动页面。启动页面，也被称为闪屏页面，是一个应用启动后最先显示的页面，通常用于展示应用的 logo 或者其他形式的品牌标识。

splashscreen 则是一个我们在 Flutter 中用来创建启动页面的包，它为我们提供了很多有用的功能，例如可以在加载数据的时候显示一个动画，或者在数据加载完毕后自动跳转到主页面等。

三、如何安装和使用 splashscreen

要在 Flutter 中使用 splashscreen，首先我们需要在项目的 pubspec.yaml 文件中添加它的依赖，就像这样：

dependencies:
  flutter:
    sdk: flutter

  splashscreen: ^1.3.5

然后，我们可以在代码中使用 SplashScreen 这个 widget 来创建我们的启动页面。下面是一个简单的示例：

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(
      home: SplashScreen(
        seconds: 3,
        navigateAfterSeconds: AfterSplash(),
        title: Text(
          '欢迎来到我的应用！',
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 20.0,
          ),
        ),
        image: Image.asset('images/logo.png'),
        backgroundColor: Colors.white,
        photoSize: 50.0,
      ),
    );
  }
}

class AfterSplash extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text('主页'),
      ),
      body: Center(
        child: Text('你好，世界！'),
      ),
    );
  }
}

这段代码会创建一个显示 3 秒钟的启动页面，然后跳转到主页面。启动页面上显示的文字是 “欢迎来到我的应用！”，并且还有一个我们从 ‘images/logo.png’ 加载的图片。

以上就是一个简单的使用 splash

screen 的示例。

四、详细的代码示例：使用 splashscreen 创建启动页面

接下来，我们将在一个新的 Flutter 项目中创建一个具有实际业务逻辑的启动页面。我们的启动页面将会在加载数据的同时显示一个动画，数据加载完成后，页面将自动跳转到主页面。

首先，我们创建一个新的 Flutter 项目，然后在 pubspec.yaml 文件中添加 splashscreen 的依赖：

dependencies:
  flutter:
    sdk: flutter

  splashscreen: ^1.3.5

然后，我们在 main.dart 文件中编写以下代码：

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(
      home: MySplashScreen(),
    );
  }
}

class MySplashScreen extends StatefulWidget {
    
    
  @override
  _MySplashScreenState createState() => _MySplashScreenState();
}

class _MySplashScreenState extends State<MySplashScreen> {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return SplashScreen(
      seconds: 3,
      navigateAfterSeconds: AfterSplash(),
      title: Text(
        '正在加载数据，请稍候...',
        style: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 20.0,
        ),
      ),
      image: Image.asset('images/loading.gif'),
      backgroundColor: Colors.white,
      photoSize: 50.0,
      loaderColor: Colors.blue,
    );
  }
}

class AfterSplash extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text('主页'),
      ),
      body: Center(
        child: Text('欢迎来到主页！'),
      ),
    );
  }
}

这段代码首先定义了一个 MySplashScreen 类，它是一个 StatefulWidget，在它的 build 方法中，我们使用 SplashScreen widget 来创建启动页面。我们设置了显示的文字为 “正在加载数据，请稍候…”，并使用一个 GIF 图片作为加载动画。然后我们定义了 AfterSplash 类，它是启动页面数据加载完成后跳转的页面。

在实际的业务逻辑中，你可能需要从网络或本地数据库加载数据。你可以在 SplashScreen 的 navigateAfterFuture 属性中使用一个 Future 来实现这个功能。以下是一个例子：

SplashScreen(
  navigateAfterFuture: loadData(),
  // ... 其他属性
)

Future<void> loadData() async {
    
    
  // 这里是加载数据的逻辑
  // 例如从网络或本地数据库加载数据
  // 使用 Future.delayed 来模拟加载数据
  await Future.delayed(Duration(seconds: 3));
}

五、总结

在本文中，我们介绍了如何在 Flutter 中使用 splashscreen 包来创建启动页面。我们首先介绍了启动页面和 splashscreen 的概念，然后通过一个简单的示例演示了如何使用 splashscreen，最后我们在一个新的 Flutter 项目中创建了一个具有实际业务逻辑的启动页面。

如果你对 Flutter 感兴趣，想要更深入地学习，那么我要推荐你一个很棒的资源：我们的 Flutter专栏->Flutter Developer 101 入门小册。在那里，你将获得完整的、系统的 Flutter 学习资料，包括详细的代码示例和深入的概念解析。比如，你知道如何使用 Flutter 构建一个完整的应用吗？在我们的专栏中，你将找到答案。更重要的是，我们的专栏正在不断更新和完善，而价格也会随着内容的丰富而逐渐上调。所以，现在加入，你将以最优惠的价格获得所有的内容。让我们一起在 Flutter 的世界中继续探索吧！如果你想了解更多，可以先阅读我们的 一站式解决你的需求，Flutter Developer 101 入门小册专栏指引。