如何在 Flutter中创建启动画面？

最新推荐文章于 2024-05-11 04:18:03 发布
最新推荐文章于 2024-05-11 04:18:03 发布
阅读量827 收藏
点赞数
文章标签： flutter ios android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sexylin2010/article/details/106948433
版权

如何在 Flutter 中创建启动画面

Flutter Splash Demo的创建旨在帮我们了解如何为Android和iOS创建不同类型的Splash。

正如大多数iOS开发人员的同感，由于操作系统的特定限制，创建 iOS Splash可能会有些麻烦，另一方面，创建Android Splash仅仅是小菜一碟。现在，随着 Flutter 的出现，这种情况大有改善。

 

The Problem Statement

要创建一个展示不同类型的启动页的应用，即：

  1. 图片启动页
  2. 视频启动页
  3. 动画启动页

点击阅读更多

sexylin2010
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Flutter开发的常见的App启动页
08-10
使用Flutter开发的常见的App启动页
Flutter 启动页白屏设置/启动画面设置
01-03
新建flutter项目 刚启动是有段时间的白屏 ,这个是系统开机的白屏,可以更换成自己的启动画面,设置如下: launch_backgroud.xml里修改成自己的图片名称,src表示图片的名称不带扩展名，mipmap表示对应各种分辨率下的图片 launch_background.xml文件 <!-- --> 设置全屏图片 styles.xml 文件 false true @mipmap/launcher 这么设将是图片全屏 ,应用有顶部状态栏,windowfullscreen设为tr
最新Flutter&amp；Android 启动页（闪屏页）的加载流程和优化方案(1)，2024年最新面试系列
最新发布
2401_84558914的博客
05-11 837
面试题集可以帮助你查漏补缺，有方向有针对性的学习，为之后进大厂做准备。但是如果你仅仅是看一遍，而不去学习和深究。那么这份面试题对你的帮助会很有限。最终还是要靠资深技术水平说话。网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。建议先制定学习计划，根据学习计划把知识点关联起来，形成一个系统化的知识体系。学习方向很容易规划，但是如果只通过碎片化的学习，对自己的提升是很慢的。
Flutter 启动添加照片
weixin_46504917的博客
09-25 146
Android端替换启动页图片，打开android/app/src/main/res/drawable/launch_background.xml文件，效果如下： 注意 有两个文件都需要改 android/app/src/main/res/drawable/launch_background.xml 和 android/app/src/main/res/drawable-v21/launch_background.xml <?xml version="1.0" encoding="utf-8"?&gt
flutter添加启动图及设置启动时间
weixin_30477293的博客
08-12 555
首先贴个官方的设置方法，看这里：https://flutterchina.club/assets-and-images/#%E6%9B%B4%E6%96%B0%E5%90%AF%E5%8A%A8%E9%A1%B5 虽然官方的方法比较简单，但是有时我们可能需要自己配置启动图的生效时间，这时就需要另外实现了。思路就是第一个页面放一张全屏图片，倒数计时结束时再跳转到主页： 1 import '...
flutter_animated_splash_screen：一个程序包，可自动执行在flutter中创建动画启动画面的任务
02-28
首先，添加animated_native_splash在你pubspec.yaml文件中的开发依赖。 它属于dev_dependencies因为它是命令行工具。 dev_dependencies : animated_native_splash : ^1.0.0 animated_native_splash : # This ...
Flutter Android端启动白屏问题的解决
01-20
此外，还可以考虑利用 Flutter 的动画库创建更丰富的启动画面，提高应用的整体质感。 总之，解决 Flutter Android 端启动白屏问题需要结合 Android 原生技术和 Flutter 的特性，通过合理设置启动背景和优化引擎初始...
Flutter Education应用程序UI概念-JavaScript开发
05-26
Flutter Education应用程序用户界面概念edu_app教育用户界面概念从点滴中汲取灵感用户界面不完整，我正在研究中。 如果您有任何建议，请创建一个问题。 启动画面第1页第2页...
Sociogram - 社交媒体应用程序 android studio项目源码完整的 Flutter 源代码Java
01-26
Sociogram - 社交媒体应用程序 | Instagram 卷轴 |主题 |会所|聊天 |社交网络应用程序项目源码 ...动画启动画面 易于理解的代码 干净的代码 终身免费更新和出色的客户支持 轻松集成到您的项目中 完整的 Flutter 源代码
flutter_portfolio
03-09
3. `android/` 和 `ios/`：针对不同平台的原生配置，包含各自平台的构建设置、图标和启动画面等。 4. `assets/`：存放应用的静态资源，如图片、字体、音频等。 5. `.gitignore`：定义了版本控制系统忽略的文件和...
Flutter启动页(闪屏页)的具体实现及原理详析
08-26
主要给大家介绍了关于Flutter启动页(闪屏页)的具体实现及原理的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Flutter具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
Flutter 启动页(闪屏页)具体实现和原理分析
2401_84123026的博客
04-09 879
在技术领域内，没有任何一门课程可以让你学完后一劳永逸，再好的课程也只能是“师傅领进门，修行靠个人”。“学无止境”这句话，在任何技术领域，都不只是良好的习惯，更是程序员和工程师们不被时代淘汰、获得更好机会和发展的必要前提。如果你觉得自己学习效率低，缺乏正确的指导，可以一起学习交流！加入我们吧！群内有许多来自一线的技术大牛，也有在小厂或外包公司奋斗的码农，我们致力打造一个平等，高质量的Android交流圈子，不一定能短期就让每个人的技术突飞猛进，但从长远来说，眼光，格局，长远发展的方向才是最重要的。
Flutter 启动页面
小天空的博客
06-02 1035
//启动页面 import 'dart:async'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; //项目首页 import 'package:firstflutter/base/Tabs.dart'; class LaunchPage extends StatelessWidget { @override Widget build(BuildContext context...
flutter启动页
weixin_44911775的博客
06-01 769
参考文章
Flutter淘宝App添加启动图最简单实现方法
weixin_34315665的博客
06-01 1347
不说复杂的，就谈你可能会遇到的问题 本人文字和表达水平一般，所以可能打错字或写错，还请见谅 Flutter是移动跨平台的UI框架，一份代码即可在Android和iOS上一致的体验，但是有一些还是需要我们去修改iOS和Android代码才能实现的，比如今天要说的启动图！ Flutter默认是没有启动图的，所以打开App是闪现的界面就是一个白屏，一个体验好的App肯定是需要启动图的。 目前使用F...
flutter（1） 启动页 引导页
一抹离愁
11-26 4452
flutter 启动页 引导页 Android 原生引导页面的方法如下 1 自定义 使用 ViewPager控件 2使用第三方 组建AppIntroAppIntro快速启动页面 flutter引导页面的方式 1使用 pageView (指示器需要自定义) 2使用TabBarView，指示器TabPageSelector 代码如下可以直接使用。 启动页面 class SplashPage extends StatefulWidget { @override _Sp...
【Flutter】Flutter 使用splashscreen包创建启动页面
Code Metaverse
06-14 2055
如何在 Flutter 中使用 splashscreen 包来创建启动页面
如何在flutter中实现启动广告页？
04-04
在Flutter中，可以使用以下步骤来实现启动广告页： 1. 在pubspec.yaml文件中添加flutter_svg插件，以便加载SVG图片： dependencies: flutter_svg: ^0.22.0 2. 创建一个新的类，例如SplashScreen，来显示启动广告页。在这个类中，可以使用Stack Widget来叠加一个Image或SVG图片和一个倒计时Widget。 import 'dart:async'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; class SplashScreen extends StatefulWidget { @override _SplashScreenState createState() => _SplashScreenState(); } class _SplashScreenState extends State<SplashScreen> { int _countdown = 3; @override void initState() { super.initState(); startTimer(); } void startTimer() { Timer.periodic(Duration(seconds: 1), (timer) { setState(() { if (_countdown > 1) { _countdown--; } else { timer.cancel(); // 跳转到主页 } }); }); } @override Widget build(BuildContext context) { return Scaffold( body: Stack( fit: StackFit.expand, children: [ SvgPicture.asset( 'assets/images/splash_screen.svg', fit: BoxFit.cover, ), Positioned( top: 40, right: 40, child: GestureDetector( onTap: () { // 跳过广告，直接跳转到主页 }, child: Container( padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5), decoration: BoxDecoration( color: Colors.black54, borderRadius: BorderRadius.circular(20), ), child: Text( '跳过 $_countdown', style: TextStyle( color: Colors.white, fontSize: 16, ), ), ), ), ), ], ), ); } } 3. 在主Flutter应用程序中，将SplashScreen作为Navigator的第一个页面，以便在启动时显示。 void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'MyApp', debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.blue, ), home: SplashScreen(), // 启动广告页 ); } } 通过上述步骤，即可在Flutter中实现启动广告页。可以根据具体需求，调整广告图片、倒计时时间和跳过广告的操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值