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
更多关于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
这样,你的应用启动时就会显示自定义的启动屏,并在指定的时间后跳转到主屏幕。