Как бы вы подошли к добавлению заставки в приложения Flutter? Он должен загружаться и отображаться перед любым другим контентом. В настоящее время перед загрузкой виджета Scaffold (home: X) происходит короткая вспышка цвета.
Добавление заставки в приложения Flutter
Ответ 1
Я хочу осветить реальный способ создания заставки во Флаттере.
Я немного проследил здесь след и увидел, что на экране-заставке во Флаттере все выглядит не так плохо.
Возможно, большинство разработчиков (как и я) думают, что в Flutter по умолчанию нет заставки, и им нужно с этим что-то делать. На самом деле есть заставка, но она с белым фоном, и никто не может понять, что по умолчанию уже есть заставка для iOS и Android.
Это на самом деле круто, потому что единственное, что нужно сделать разработчику, это поместить изображение бренда в нужное место, и заставка начнет работать именно так.
Теперь вот как это можно сделать, шаг за шагом:
Сначала для Android (потому что это моя любимая платформа :))
-
Найдите папку "android" в вашем проекте Flutter.
-
Перейдите в папку app → src → main → res и поместите все варианты вашего фирменного изображения в соответствующие папки. Например:
- изображение с плотностью 1 необходимо поместить в mipmap-mdpi,
- изображение с плотностью 1,5 нужно поместить в mipmap-hdpi,
- изображение с плотностью 2 нужно поместить в mipmap-xdpi,
- изображение с плотностью 3 необходимо поместить в mipmap-xxdpi,
- изображение с плотностью 4 необходимо поместить в mipmap-xxxdpi,
По умолчанию для папки Android нет drawable-mdpi, drawable-hdpi и т.д., Но каждый может создать, если захочет. Вот почему изображения должны быть размещены в папках MipMap. Кроме того, XML-код по умолчанию для экрана Splash (в Android) будет выглядеть в @mipmap, а не в @drawable (вы можете изменить его, если хотите).
-
Последний шаг в Android - это раскомментировать некоторый код в drawable/launch_background.xml. Перейдите в приложение → src → main → res-> drawable и откройте launch_background.xml. Внутри этого файла вы увидите, почему фон экрана Slash белый. Чтобы применить фирменное изображение, которое мы поместили на шаге 2, нам нужно раскомментировать часть кода XML в файле launch_background.xml, поэтому после изменения код должен выглядеть следующим образом:
<!--<item android:drawable="@android:color/white" />--> <item> <bitmap android:gravity="center" android:src="@mipmap/your_image_name" /> </item>
Пожалуйста, обратите внимание, что мы комментируем белый фоновый код и раскомментируем код для изображения mipmap. Если кому-то интересно, этот launch_background.xml используется в файле styles.xml.
Теперь для iOS:
-
Найдите папку "ios" в вашем проекте Flutter.
-
Перейдите к Runner → Assets.xcassets → LaunchImage.imageset. Должны быть LaunchImage.png, [email protected] и т.д. Теперь вы должны заменить эти изображения своими вариантами брендинга. Например:
- изображение с плотностью 1 необходимо переопределить LaunchImage.png,
- изображение с плотностью 2 необходимо переопределить [email protected],
- изображение с плотностью 3 необходимо переопределить [email protected],
- изображение с плотностью 4 необходимо переопределить [email protected],
Если я не ошибаюсь, [email protected] не существует по умолчанию, но вы можете легко создать его. Если [email protected] не существует, вы должны объявить его также в файле Contents.json, который находится в том же каталоге, что и изображения. После изменения мой файл Contents.json выглядит так:
{
"images" : [
{
"idiom" : "universal",
"filename" : "LaunchImage.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"filename" : "[email protected]",
"scale" : "2x"
},
{
"idiom" : "universal",
"filename" : "[email protected]",
"scale" : "3x"
},
{
"idiom" : "universal",
"filename" : "[email protected]",
"scale" : "4x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
И это должно быть все. В следующий раз, когда вы запустите свое приложение, на Android и iOS у вас должен быть правильный экран заставки с добавленным вами изображением бренда.
Спасибо
Ответ 2
Если вы flutter create свой проект, вы можете следовать инструкциям на https://flutter.io/assets-and-images/#updating-the-launch-screen.
Ответ 3
Хорошего примера этого пока нет, но вы можете сделать это самостоятельно, используя встроенные инструменты для каждой платформы:
iOS: https://docs.nativescript.org/publishing/creating-launch-screens-ios
Android: https://www.bignerdranch.com/blog/splash-screens-the-right-way/
Подпишитесь на выпуск 8147 для получения обновлений примера кода для заставок. Если черное мерцание между заставкой и приложением на iOS беспокоит вас, подпишитесь на выпуск 8127 для получения обновлений.
Изменение: По состоянию на 31 августа 2017 года улучшенная поддержка заставок теперь доступна в новом шаблоне проекта. Смотрите # 11505.
Ответ 4
Для Android перейдите в android> app> src> main> res> drawable> launcher_background.xml
Теперь раскомментируйте это и замените @mipmap/launch_image, с вашим расположением изображения.
<item>
<bitmap
android:gravity="center"
android:src="@mipmap/launch_image" />
</item>
Здесь вы можете изменить цвет экрана -
<item android:drawable="@android:color/white" />
Ответ 5
Flutter на самом деле дает более простой способ добавить Splash Screen в наше приложение. Сначала нам нужно создать базовую страницу, когда мы создаем другие экраны приложений. Вам нужно сделать его StatefulWidget, так как его состояние изменится через несколько секунд.
import 'dart:async';
import 'package:flutter/material.dart';
import 'home.dart';
class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
@override
void initState() {
super.initState();
Timer(
Duration(seconds: 3),
() => Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (BuildContext context) => HomeScreen())));
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Image.asset('assets/splash.png'),
),
);
}
}
Logic Внутри initState(), вызов Timer() с продолжительностью, как вы хотите, я сделал это 3 секунды, как только закончите, нажмите навигатор на домашний экран нашего приложения.
Примечание: Приложение должно показывать заставку только один раз, пользователь не должен возвращаться к нему снова при нажатии кнопки "Назад". Для этого мы используем Navigator.pushReplacement(). Он переместится на новый экран и удалит предыдущий экран из стека истории навигации.
Для лучшего понимания посетите Flutter: создайте свой собственный экран-заставку
Ответ 6
Вы должны попробовать под кодом, работали для меня
import 'dart:async';
import 'package:attendance/components/appbar.dart';
import 'package:attendance/homepage.dart';
import 'package:flutter/material.dart';
class _SplashScreenState extends State<SplashScreen>
with SingleTickerProviderStateMixin {
void handleTimeout() {
Navigator.of(context).pushReplacement(new MaterialPageRoute(
builder: (BuildContext context) => new MyHomePage()));
}
startTimeout() async {
var duration = const Duration(seconds: 3);
return new Timer(duration, handleTimeout);
}
@override
void initState() {
// TODO: implement initState
super.initState();
_iconAnimationController = new AnimationController(
vsync: this, duration: new Duration(milliseconds: 2000));
_iconAnimation = new CurvedAnimation(
parent: _iconAnimationController, curve: Curves.easeIn);
_iconAnimation.addListener(() => this.setState(() {}));
_iconAnimationController.forward();
startTimeout();
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Scaffold(
body: new Center(
child: new Image(
image: new AssetImage("images/logo.png"),
width: _iconAnimation.value * 100,
height: _iconAnimation.value * 100,
)),
),
);
}
}
Ответ 7
Оба @Collin Jackson и @Sniper правы. Вы можете выполнить следующие шаги для настройки изображений запуска в Android и iOS соответственно. Затем в вашем MyApp() в вашем initState() вы можете использовать Future.delayed для настройки таймера или вызова любого api. Пока ответ не будет возвращен из Будущего, будут показаны ваши значки запуска, а затем, когда появится ответ, вы можете перейти к экрану, на который вы хотите перейти после заставки. Вы можете увидеть эту ссылку: Flutter Splash Screen
Ответ 8
лица, которые получают ошибку, как изображение, не найденное после применения проверенного ответа, убедитесь, что вы добавляете @mipmap/ic_launcher вместо @mipmap/ic_launcher.png
Ответ 9
Добавление страницы, как показано ниже и маршрутизации, может помочь
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutkart/utils/flutkart.dart';
import 'package:flutkart/utils/my_navigator.dart';
class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
@override
void initState() {
// TODO: implement initState
super.initState();
Timer(Duration(seconds: 5), () => MyNavigator.goToIntro(context));
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
decoration: BoxDecoration(color: Colors.redAccent),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 2,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.white,
radius: 50.0,
child: Icon(
Icons.shopping_cart,
color: Colors.greenAccent,
size: 50.0,
),
),
Padding(
padding: EdgeInsets.only(top: 10.0),
),
Text(
Flutkart.name,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 24.0),
)
],
),
),
),
Expanded(
flex: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircularProgressIndicator(),
Padding(
padding: EdgeInsets.only(top: 20.0),
),
Text(
Flutkart.store,
softWrap: true,
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.white),
)
],
),
)
],
)
],
),
);
}
}
Если вы хотите просмотреть, см. Https://www.youtube.com/watch?v=FNBuo-7zg2Q
Ответ 10
Это можно сделать несколькими способами, но самый простой, который я использую, это:
Для запуска иконок я использую библиотеку флаттера Flutter Launcher Icon
Для настраиваемого заставки я создаю разные разрешения экрана, а затем добавляю заставки в папку mipmap в соответствии с разрешением для Android.
Последняя часть настраивает файл launch_background.xml в папке drawable в папке res в Android.
Просто измените ваш код так, как показано ниже:
<?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="@drawable/<splashfilename>" /> --> -->
<!-- You can insert your own image assets here -->
<item>
<bitmap
android:gravity="center"
android:src="@mipmap/<Your splash image name here as per the mipmap folder>"/>
</item>
</layer-list>
Несколько разработчиков, которых я видел, добавляют всплеск как нарисованный, я пробовал это, но каким-то образом сборка не удалась во Flutter 1.0.0 и Dart SDK 2. 0+. Поэтому я предпочитаю добавлять всплеск в разделе растрового изображения.
Создание Splash-экрана в iOS довольно просто.
В папке "Runner" в iOS просто обновите файлы LaunchImage.png, добавив свои собственные изображения экрана-заставки с теми же именами, что и у LaunchImage.png @2x, @3x, @4x.
Просто добавление. Я чувствую, что хорошо иметь изображение 4х в LaunchImage.imageset. Просто добавьте ваш код в Content.json следующими строками, ниже масштаба 3x, чтобы добавить параметр масштаба 4x:
{
"idiom" : "universal",
"filename" : "[email protected]",
"scale" : "4x"
}
Ответ 11
Код от Jaldhi Bhatt не работает для меня.
Flutter выдает " запрошенную операцию навигатора с контекстом, который не включает навигатор".
Я исправил код, заключающий в себе потребительский компонент Navigator внутри другого компонента, который инициализирует контекст Navigator с использованием маршрутов, как упоминалось в этой статье.
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:my-app/view/main-view.dart';
class SplashView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Builder(
builder: (context) => new _SplashContent(),
),
routes: <String, WidgetBuilder>{
'/main': (BuildContext context) => new MainView()}
);
}
}
class _SplashContent extends StatefulWidget{
@override
_SplashContentState createState() => new _SplashContentState();
}
class _SplashContentState extends State<_SplashContent>
with SingleTickerProviderStateMixin {
var _iconAnimationController;
var _iconAnimation;
startTimeout() async {
var duration = const Duration(seconds: 3);
return new Timer(duration, handleTimeout);
}
void handleTimeout() {
Navigator.pushReplacementNamed(context, "/main");
}
@override
void initState() {
super.initState();
_iconAnimationController = new AnimationController(
vsync: this, duration: new Duration(milliseconds: 2000));
_iconAnimation = new CurvedAnimation(
parent: _iconAnimationController, curve: Curves.easeIn);
_iconAnimation.addListener(() => this.setState(() {}));
_iconAnimationController.forward();
startTimeout();
}
@override
Widget build(BuildContext context) {
return new Center(
child: new Image(
image: new AssetImage("images/logo.png"),
width: _iconAnimation.value * 100,
height: _iconAnimation.value * 100,
)
);
}
}
Ответ 12
В случае, если вам нужен дополнительный экран-заставка (после родного), вот простой пример, который работает:
class SplashPage extends StatelessWidget {
SplashPage(BuildContext context) {
Future.delayed(const Duration(seconds: 3), () {
// Navigate here to next screen
});
}
@override
Widget build(BuildContext context) {
return Text('Splash screen here');
}
}
Ответ 13
Вы не можете удалить белый заставки по умолчанию, насколько я знаю. Но вы можете добавить еще одну заставку сразу после этой белой, вы можете добавить один виджет с заставкой и ограничением по времени. Этот код работал для меня.
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
void initState() {
super.initState();
Timer(Duration(seconds: 3), (){
Navigator.pushReplacement(context,
MaterialPageRoute(builder: (context) => Dashboard(),
);
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new Container(
child: new Container(
constraints: new BoxConstraints.expand(),
alignment: Alignment.bottomCenter,
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage("assets/app_splash.jpg"),
fit: BoxFit.cover,
),
),
),
),
),
);
}
}
Ответ 14
Flutter предоставляет вам возможность иметь заставку по умолчанию, но есть много плагинов, которые могут сделать эту работу. Если вы не хотите использовать плагин для этой задачи и беспокоитесь, что добавление нового плагина может повлиять на размер вашего приложения. Тогда вы можете сделать это следующим образом.
ДЛЯ Android
Откройте файл launch_background.xml, после чего вы можете добавить изображение заставки или нужный вам цвет градиента. Это первое, что видит ваш пользователь, когда открывает ваше приложение.
Для IOS
Откройте ваше приложение, используя Xcode, нажмите Runner> Assest.xcassets> LaunchImage, вы можете добавить изображение здесь. Если вы хотите отредактировать, какое изображение экрана запуска позиции должно занимать или выглядеть, вы можете отредактировать его на LaunchScreen.storyboard.
Ответ 15
Самый простой способ добавить заставку во флаттере - это imho этот пакет: https://pub.dev/packages/flutter_native_splash
Руководство по установке (автором пакета):
1. Настройка заставки
Добавьте ваши настройки в файл проекта pubspec.yaml или создайте файл в корневой папке проекта с именем flutter_native_splash.yaml со своими настройками.
flutter_native_splash:
image: assets/images/splash.png
color: "42a5f5"
изображение должно быть в формате png.
Вы также можете использовать # в цвете. цвет: "# 42a5f5" Вы также можете установить для Android или IOS значение false, если вы не хотите создавать заставку для конкретной платформы.
flutter_native_splash:
image: assets/images/splash.png
color: "42a5f5"
android: false
Если ваше изображение должно использовать весь доступный экран (ширину и высоту), вы можете использовать свойство fill.
flutter_native_splash:
image: assets/images/splash.png
color: "42a5f5"
fill: true
Примечание: свойство fill еще не реализовано для заставок iOS.
Если вы хотите отключить полноэкранный заставки на Android, вы можете использовать свойство android_disable_fullscreen.
flutter_native_splash:
image: assets/images/splash.png
color: "42a5f5"
android_disable_fullscreen: true
2. Запустите пакет
После добавления настроек запустите пакет с
flutter pub pub run flutter_native_splash:create
Когда пакет завершит работу, ваш заставка готова.
Ответ 16
Для Android
app → src → main → res → drawble-> launch_background.xml
и раскомментируйте
прокомментированный блок, как этот
<item>
<bitmap
android:gravity="center"
android:src="@mipmap/launch_image" /></item>
есть ли какое-либо лицо с любой ошибкой после такого кодирования
Используйте синхронизацию с системой в Android Studio или отключите кэш и сбросьте. Это решило мою проблему
В режиме отладки флаттера потребуется некоторое время, чтобы получить заставку. После сборки он будет уменьшаться как родной андроид