【Flutter Splash闪屏页】
Splash页
- flutter也可以添加一个SplashPage
void main() {
runApp(MyApp());
}class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MySplashPage(),
);
}
}class MySplashPage extends StatefulWidget {
@override
_MySplashPageState createState() => _MySplashPageState();
}class _MySplashPageState extends State {
@override
Widget build(BuildContext context) {
return Container(
child: Image(
image: AssetImage('images/splash.png'),
fit: BoxFit.fill,
),
);
}@override
void initState() {
// 启动的时候将屏幕设置成全屏模式
SystemChrome.setEnabledSystemUIOverlays([]);
super.initState();
// 这里进行1秒后跳转
Timer(
Duration(seconds: 1),
() => Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (BuildContext context) => MyHomePage())));
}@override
void dispose() {
// 关闭的时候将屏幕设置成原来的状态
SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
super.dispose();
}
}
- Android端需要将对应的 launch_background.xml 里添加splash的图片资源
-
全屏显示
- 如果想要在跳转到第一个page的时候也是当前的splash.png 的话 就需要更改另一个配置 styles.xml 文件
- @drawable/launch_background
- false
- @drawable/launch_background
最后官方其实有教程的
官方地址
推荐阅读
- 回顾 Flutter 2021 重要时刻,奉上虎年红包封面喜迎新年!
- Flutter实现左侧边栏导航
- 如何在 Flutter 创建一个后台任务
- Flutter Convex Bottom 底部导航
- Flutter动态化框架Thresh
- 基于 Riverpod 的 Flutter 状态管理
- Flutter 2022 产品路线图发布
- Flutter 插件库
- Windows Running “flutter pub get“ in XXX卡死
- Flutter之下拉刷新,上拉加载更多