开发中闪屏页的 10 种选择

IOS

2023-12-07 18:56:23

闪屏页：让您的 Flutter 应用拥有惊艳的启动体验

为何需要闪屏页？

当您打开一个应用时，看到一个空白的窗口可能会令人沮丧，给人一种应用已经停止的感觉。闪屏页可以改善这一体验，提供一个一致且有吸引力的界面，让用户了解应用正在运行。

闪屏页还可以：

预加载资源： 在应用首次打开时，应用可能需要加载图标、字体和图像等资源。闪屏页可以利用这段时间预加载这些资源，从而加快加载速度，提供更流畅的体验。
控制用户体验： 应用启动是用户与应用的首次互动。闪屏页是一个机会，可以给用户留下积极的第一印象。

如何实现闪屏页？

使用 Flutter SDK 实现闪屏页是最简单的方法之一。Flutter SDK 提供了一个名为 SplashScreen 的内置类，可以轻松创建和自定义闪屏页。

只需将以下代码添加到您的 main.dart 文件中：

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

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
  ));
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SplashScreen(
        seconds: 5,
        navigateAfterSeconds: MyHomePage(),
        title: Text(
          'My App',
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 20.0,
            color: Colors.white,
          ),
        ),
        image: Image.asset('assets/images/logo.png'),
        backgroundColor: Colors.blue,
        styleTextUnderTheLoader: TextStyle(),
        photoSize: 100.0,
        loaderColor: Colors.white,
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Home Page'),
      ),
      body: Center(
        child: Text('My Home Page'),
      ),
    );
  }
}