Flutter自定义启动屏插件flutter_custom_splash_screen的使用

Flutter 自定义启动屏插件 flutter_custom_splash_screen 的使用

当您的应用打开时,在加载期间会有短暂的时间。默认情况下,在此期间,应用程序会显示一个白色启动屏。这个插件将帮助您添加一个自定义的启动屏,允许您包含自己的背景图像和徽标。它还具有可自定义颜色的进度加载器,以指示加载进度,从而增强用户体验。一旦启动屏完全加载,您可以使用 navigateToNextScreen 回调函数导航到下一个屏幕。

特性

  • Flutter 自定义启动屏。
  • 可通过背景图像和您的徽标图像进行自定义。
  • 具有可自定义颜色的加载百分比指示器。
  • 启动屏完全加载后,可以使用回调函数处理导航。
  • 可自定义徽标图像容器的高度和宽度。

安装

pubspec.yaml 文件中添加以下依赖项:

dependencies:
  flutter_custom_splash_screen: ^latest_version

然后运行 flutter pub get 来安装该插件。

使用

这是一个简单的使用 flutter_custom_splash_screen 的示例:

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: SplashScreen(
        bgImage: 'assets/bg_image.png', // 背景图像路径
        logoImage: 'assets/logo.png', // 徽标图像路径
        logoHeight: 90, // 徽标高度
        logoWidth: 90, // 徽标宽度
        logoColor: Colors.blue, // 徽标颜色
        logoBgColor: Colors.black, // 徽标背景颜色
        textColor: Colors.black, // 文本颜色
      ),
    );
  }
}

更多关于Flutter自定义启动屏插件flutter_custom_splash_screen的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义启动屏插件flutter_custom_splash_screen的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用flutter_custom_splash_screen插件来创建自定义启动屏的示例代码。

1. 添加依赖

首先,在你的pubspec.yaml文件中添加flutter_custom_splash_screen依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_custom_splash_screen: ^2.0.0  # 请检查最新版本号

然后运行flutter pub get来安装依赖。

2. 配置启动屏资源

assets文件夹中创建一个启动屏的图像文件,比如assets/launch_image.png。确保在pubspec.yaml中声明这个资源:

flutter:
  assets:
    - assets/launch_image.png

3. 配置启动屏信息

android/app/src/main/AndroidManifest.xml中配置启动屏的主题(可选,但推荐),确保启动屏显示时不显示默认的白屏或黑屏:

<application
    ... >
    <activity
        android:name=".MainActivity"
        ...
        android:theme="@style/LaunchTheme">
        ...
    </activity>
    ...
</application>

res/values/styles.xml中定义LaunchTheme

<resources>
    <!-- Define your custom theme here -->
    <style name="LaunchTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
</resources>

launch_background.xml(放在res/drawable文件夹中)可以是一个简单的颜色或者一个可绘制资源:

<!-- res/drawable/launch_background.xml -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <color android:color="@android:color/white"/>
    </item>
    <!-- Optionally, you can add an image here -->
    <!-- <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/launch_image" />
    </item> -->
</layer-list>

注意:对于iOS,你通常不需要在Info.plist中进行额外配置,除非你有特定的启动图像需求。

4. 使用Flutter插件

在你的main.dart文件中,配置flutter_custom_splash_screen

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // Optional: Set a delay for the splash screen
  await FlutterCustomSplashScreen.delay(seconds: 3, navigateAfterSeconds: HomeScreen.routeName);
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: FlutterCustomSplashScreen.splashScreenRouteName,
      routes: {
        FlutterCustomSplashScreen.splashScreenRouteName: (context) => CustomSplashScreen(),
        HomeScreen.routeName: (context) => HomeScreen(),
      },
    );
  }
}

class CustomSplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlutterCustomSplashScreen(
      backgroundColor: Colors.white,
      image: Image.asset('assets/launch_image.png'),
      animationEffect: 'zoom-in', // 'fade-in', 'slide-up', 'slide-down', 'slide-left', 'slide-right', 'zoom-in', 'zoom-out'
      logoSize: 100,
      animateLogo: true,
      duration: 2000,
      photoSize: 100,
      onExit: (context) {
        // Navigate to your home screen
        Navigator.pushNamed(context, HomeScreen.routeName);
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  static const routeName = '/home';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Text('Welcome to the Home Screen!'),
      ),
    );
  }
}

5. 运行应用

确保一切配置正确后,运行你的Flutter应用:

flutter run

这样,你的应用启动时就会显示自定义的启动屏,并在指定的时间后跳转到主屏幕。

回到顶部