Flutter 闪屏页实现

最新推荐文章于 2024-06-23 07:17:46 发布
最新推荐文章于 2024-06-23 07:17:46 发布
阅读量6.8k 收藏 4
点赞数 1
分类专栏： Flutter 文章标签： Flutter闪屏 Flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15602635/article/details/80677526
版权
Flutter 闪屏页实现导入图片在lib同级目录新建images目录，放入闪屏图片。 更新配置文件打开pubspec.yaml文件，添加如下asstes:assets:-images/splash_girl.png创建两个页面lib下新建HomePage和SplashPage，分别作为主页和闪屏页。编写mian.dartmain.d...
摘要由CSDN通过智能技术生成

Flutter 闪屏页实现

导入图片

在lib同级目录新建images目录，放入闪屏图片。
flutter_splash1

更新配置文件

打开pubspec.yaml文件，添加如下asstes:

assets:
-images/splash_girl.png

flutter_splash2

创建两个页面

lib下新建HomePage和SplashPage，分别作为主页和闪屏页。

flutter_splash3

编写mian.dart

main.dart做一个逻辑，直接启动闪屏页，并且提供一个跳转到主页的路由。

import
最低0.47元/天 解锁文章
100斤
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter 闪屏页面的几种实现方式
xq610928的博客
11-12 903
前言 ： 各位同学大家好，有段时间没有给大家更新文章了，大家都有用过安卓和iOS主流的 app ，原生app都有一个欢迎页面 然后等待几秒钟进入主页，今天趁着有时间我就分钟几种不同的方式来实现欢迎页面的案例,废话不多说，我们正式开始 准备工作 ： 需要安装flutter的开发环境：大家可以去看看之前的教程： 1 win系统flutter开发环境安装教程: https://www.jianshu.com/p/152447bc8718 2 mac系统flutter开发环境安装教程：https://www.jia
Flutter实战（一）---闪屏（启动）页面的实现
学无止境
02-26 6972
很多app启动之后都会出现一个splash启动界面，显示广告信息或产品的LOGO、公司的LOGO或者开发者信息。如果应用程序启动时间比较长，那么启动界面就是一个很好的东西，可以让用户耐心等待这段枯燥的时间。 那么，我们使用Flutter开发应用该怎么实现闪屏页面呢？ 有两种方案可以实现：第一种，平台无关，在dart main函数里将启动页面作为第一个显示页面，设置一个定时器，定时显示多少秒后跳转到......
全面理解-Flutter（万字长文，深度解析）
最新发布
2401_85667460的博客
06-23 1253
题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限，很多程序员朋友无法获得正确的资料得到学习提升，故此将并将重要的Android进阶资料包括自定义view、性能优化、MVC与MVP与MVVM三大框架的区别、NDK技术、阿里面试题精编汇总、常见源码分析等录播视频免费分享出来。
Flutter 闪屏页(开屏页)
Seven丶Echo的博客
08-16 1万+
Flutter 闪屏页(开屏页)   先来说一下我们需要实现的效果，我们需要实现一个三秒钟后自动跳转到主页面的一个开屏页面，且该页面如果用户点击了屏幕后我们需要立即跳过开屏页面。到了主页面后用户点击返回时直接退出程序而不是跳转回开屏页面。 新建images文件夹用于存放图片（把images文件夹建在根目录下即可） 为图片配置路径 编写main.dart让其开启第一个页面为开屏页面 编写开屏页...
Flutter 闪屏页面
丿灬安之若死
04-15 368
main.dart import 'package:flutter/material.dart'; import 'package:flutter_yzdzy/page/splash.dart'; import 'package:flutter_yzdzy/utlis/statusbar_utils.dart'; import 'package:sp_util/sp_util.dart'; import 'page/home_index_page.dart'; import 'res/my_color
Flutter项目配置-4-闪屏页配置
weixin_44531811的博客
05-29 647
建议先将Flutter官方文档过一遍，本系列教程 Flutter SDK >= 3.10.0。
Flutter 启动页(闪屏页)具体实现和原理分析
erhtre的博客
05-13 801
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Flutter-快速创建简单闪屏页
得不到的永远是骚栋.
02-19 584
前言 近来闲暇时间一直在做Flutter,闪屏页是一个比较常见的需求,网上的闪屏页教程大部分是那种类似于广告页,而非iOS中的 LaunchScreen 性质的闪屏页.按照原来的方案我们要配置闪屏页的话,我们需要同时配置两端的闪屏页,那么有没有比较简单的方案来配置闪屏页呢? 毋庸置疑,当然是有了,那就是Flutter的插件 - flutter_native_splash . 接下来我们就来看一下具体应该怎么使用这个插件. 使用 首先把 flutter_native_splash 导入到工程的pu..
Flutter入门系列-App闪屏页设置
好好学习，天天向上
04-29 761
在Flutter项目中，好像之前的版本设置闪屏页都比较复杂，但是现在比较简单了，可以在 android 项目的清单文件中进行设置，如下 <activity android:name=".MainActivity" android:launchMode="singleTop" android:theme="@style/LaunchTheme" android:configChanges="orientation|keyboardHidden|keyboard|scr
Flutter android和ios闪屏页配置
wang_yong_hui_1234的博客
11-08 1812
另外还能起到预加载的作用，比如项目功能多，上来就需要加载很多模块，如果不加个启动页，用户等待的时候过长，体验不好。这就是为什么不推荐显示一整张图的原因，有没有解决的办法呢，简单来说可以在做图片的时候，主要的内容信息不要显示在图片的边缘。2.为什么会有闪屏也，由于app启动需要加载代码，这个过程需要耗时，在没有加载完成之前，是看不到app真正的页面。图片为什么被裁减了：由于图片是整个屏幕显示，需要适配不同机型，会对图片进行等比例缩放，超出的部分会被裁减。图片是分开展示的，分为上中下，可适当配置。
Flutter启动页(闪屏页)的具体实现及原理详析
08-26
Flutter启动页（闪屏页）的实现及原理详析 Flutter启动页，也被称为闪屏页，是App启动时显示的初始页面。其主要作用是避免App启动时的白屏或黑屏现象，提高用户体验。下面将详细介绍Flutter启动页的实现及原理。 ...
（两百四十六）Flutter – 学习向 Android 应用中添加闪屏页
01-20
Flutter 支持在 Android 应用初始化的时候展示启动页，并且还支持在你的 Flutter 初始化时展示闪屏页。本指南展示如何在 Flutter 编写的 Android 应用中使用启动页和闪屏页。 iOS 启动页 所有应用在交付到 Apple ...
使用此插件轻松在flutterApp中显示令人惊叹的Lottie动画
08-10
在Flutter应用中添加令人惊叹的Lottie动画是一个增强用户体验的有效方式。Lottie是一种流行的动画库，它能够将Adobe After Effects创建的复杂动画导出为轻量级JSON文件，然后在移动设备上流畅地运行。本篇文章将深入...
这个示例 实现闪屏后转到主界面
10-27
- 使用React Native、Flutter等跨平台框架，可以在各自的组件库中实现闪屏页，然后编写代码处理跳转逻辑。 - 在React Native中，可以创建一个特殊的组件模拟闪屏效果，并通过生命周期方法控制页面切换。 - ...
Flutter Android端启动白屏问题的解决
01-20
在 Flutter 中，我们可以通过以下步骤来实现这一目标： 1. **添加闪屏图片**：首先，在项目的 `android/app/src/main/res/mipmap-xhdpi` 目录下（根据需要也可以在其他分辨率目录下）添加一张闪屏图片，例如 `...
Flutter填坑：Waiting for another flutter command to release the startup lock
热门推荐
100斤的博客
06-10 2万+
打开AndroidStudio的时候顶部的模拟器一直是loading状态，即使已经打开了模拟器。 运行flutter doctor 提示 Waiting for another flutter command to release the startup lock 查了一下github的flutter issue 找到了解决方法，如下： 1、打开flutter的安装目录/bin/...
Flutter与Android原生的交互
100斤的博客
07-02 1万+
Flutter发布Preview版本后热度持续上升，但是仍然有很多不足之处，所有前期还是采用与原生结合的混合开发，那就需要了解Flutter与原生的交互的一些方法。 原生启动Flutter Activity 新建Flutter 项目默认启动MainActivity，继承自FlutterActivity，在AndroidManifest中可以看到intent-filter的配置。 思路：新建一...
flutter 闪屏页
04-04
Flutter的闪屏页可以通过Flutter的启动流程来实现。在Flutter中，应用程序的入口是main()函数，在main()函数中，我们可以使用Flutter提供的WidgetsFlutterBinding.ensureInitialized()方法来初始化Flutter的绑定。 在初始化完成后，我们可以使用Navigator.pushReplacement()方法来实现闪屏页的效果。具体步骤如下： 1.在main()函数中，初始化Flutter的绑定： void main() async { WidgetsFlutterBinding.ensureInitialized(); ... } 2.创建闪屏页的Widget，并在Widget的build()方法中调用Navigator.pushReplacement()方法： class SplashScreen extends StatelessWidget { @override Widget build(BuildContext context) { Future.delayed(Duration(milliseconds: 3000), () { Navigator.pushReplacement( context, MaterialPageRoute(builder: (context) => HomePage()), ); }); return Scaffold( backgroundColor: Colors.white, body: Center( child: Text( 'Splash Screen', style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold), ), ), ); } } 在上面的代码中，我们使用Future.delayed()方法来延迟3秒钟，然后调用Navigator.pushReplacement()方法来跳转到主页。在实际开发中，我们可以根据需要设置延迟时间。 3.在main()函数中，调用runApp()方法并传入闪屏页的Widget： void main() async { WidgetsFlutterBinding.ensureInitialized(); runApp(MaterialApp(home: SplashScreen())); } 这样，当应用程序启动时，就会显示闪屏页，延迟一定时间后自动跳转到主页。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值