logo标签列表

在Flutter应用中添加启动画面

flutterdartsplash-screenflutter-widget
265

你如何为Flutter应用添加启动屏？它应该在任何其他内容加载之前就能够加载和显示。目前，Scaffold(home:X)小部件加载之前会有短暂的闪烁。

2
我不确定设置一个自定义定时器来添加启动画面是否是正确的方法。我不喜欢让处理器处于空闲状态，为什么不要做一些类似于检查所需文件或目录、同步某些日志或在后台备份某些文件等任务，同时在前端完成品牌推广。毕竟，对于处理器来说，3-4秒是很长的时间。 - Mahesh Jamdade
2
这个链接解释了如何实现它：https://flutter.dev/docs/development/ui/splash-screen/android-splash-screen - live-love
请参阅 Flutter 中深色和浅色模式的启动屏幕。 - Suragch
使用Flutter原生闪屏包，您将能够轻松完成此操作。这里有一个关于它的教程：https://youtu.be/GV19Hawgpeg - Tawanda Muzavazi
我为Flutter启动屏幕创建了一个教程，其中一个是不使用任何库的，另一个是使用库，即Flutter Native Splash，它们肯定会对你有所帮助。不使用任何库的教程：https://youtu.be/MCosWsD5yKc 使用Flutter Native Splash的教程：https://www.youtube.com/watch?v=GV19Hawgpeg - undefined
25个回答
0

对于那些像我一样按照步骤操作但仍然无法使其正常工作的人...

请注意，如果您有一个drawable-v21文件夹，您需要将代码从drawable文件夹中的launch_background.xml复制到drawable-v21文件夹中的launch_background.xml。

我的项目不喜欢android:src="@mipmap/launch" />

因此我使用了android:src="@drawable/launch" />

0

你可以用两种方式创建它

  1. 进入本地包并创建一个初始页面。例如，在本地 Android 包中创建一个 drawable。
  2. 创建一个 Dart 屏幕以显示一段时间。

我找到了一个完整的解释，移除白屏并在这里显示启动画面

0
这似乎不再相关了，因为同样的答案已经在4月9日给出了。 - Keimeno
但我的更加直截了当，使用最佳字体。 - Fabrício Justo
谢谢。您的推荐很好，覆盖了iOS和Android设备。 - Esmaeil Ahmadipour
0
你可以做的是将Flutter默认的启动屏颜色与你自定义的Flutter（小部件类）启动屏颜色匹配。由于无法覆盖默认的原生启动屏，所以只能这样处理。
<?xml version="1.0" encoding="utf-8"?>
 <!-- Modify this file to customize your launch splash screen -->
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 <!-- <item android:drawable="@android:color/white" /> -->
 
 <item android:drawable="@color/custom_color" /> <!-- // Modified \\ -->
 
 <!-- You can insert your own image assets here -->
  <!-- <item>
      <bitmap
          android:gravity="center"
          android:src="@mipmap/launch_image" />
  </item> -->
 </layer-list>
-1
SplashScreen(
          seconds: 3,
          navigateAfterSeconds: new MyApp(),
          // title: new Text(
          //   'Welcome In SplashScreen',
          //   style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
          // ),
          image: new Image.network('https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Tesla_Motors.svg/1200px-Tesla_Motors.svg.png'),
          backgroundColor: Colors.white,
          styleTextUnderTheLoader: new TextStyle(),
          photoSize: 150.0,
          loaderColor: Colors.black),
    ),
  );
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接