Как бы вы подошли к добавлению заставки в приложения Flutter? Он должен загружаться и отображаться перед любым другим контентом. В настоящее время перед загрузкой виджета Scaffold (home: X) происходит короткая вспышка цвета.

Я хочу пролить свет на фактический способ создания заставки во Flutter.

Я немного проследил за следом здесь и увидел, что с Splash Screen во Flutter дела обстоят не так уж плохо.

Возможно, большинство разработчиков (например, я) думают, что во Flutter по умолчанию нет заставки, и им нужно что-то с этим делать. Есть экран-заставка, но он с белым фоном, и никто не может понять, что по умолчанию уже есть экран-заставка для iOS и Android.

Единственное, что нужно сделать разработчику, - это поместить изображение брендинга в нужное место, и заставка начнет работать именно так.

Вот как это можно сделать шаг за шагом:

Сначала на Android (потому что это моя любимая платформа :))

1. Найдите папку "android" в вашем проекте Flutter.

2. Перейдите в папку 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-код по умолчанию для экрана-заставки (в Android) будет использовать @mipmap вместо ресурса @drawable (вы можете изменить его, если хотите).

3. Последний шаг на Android - раскомментировать часть кода XML в файле drawable / launch_background.xml. Перейдите к app -> 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>

Обратите внимание, что мы комментируем код XML для белого фона и раскомментируем код изображения mipmap. Если кому-то интересно, то в файле styles.xml используется файл launch_background.xml.

Второй на iOS:

1. Найдите папку «ios» в своем проекте Flutter.

2. Перейдите в Runner -> Assets.xcassets -> LaunchImage.imageset. Должны быть LaunchImage.png, LaunchImage@2x.png и т. Д. Теперь вам нужно заменить эти изображения на свои варианты изображения бренда. Например:

• изображение с плотностью 1 должно переопределить LaunchImage.png,
• изображение с плотностью 2 должно переопределить LaunchImage@2x.png,
• изображение с плотностью 3 должно переопределить LaunchImage@3x.png,
• изображение с плотностью 4 должно переопределить LaunchImage@4x.png,

Если я не ошибаюсь, LaunchImage@4x.png не существует по умолчанию, но вы можете легко его создать. Если LaunchImage@4x.png не существует, вы также должны объявить его в файле Contents.json, который находится в том же каталоге, что и изображения. После изменения мой файл Contents.json выглядит так:

{
  "images" : [
    {
      "idiom" : "universal",
      "filename" : "LaunchImage.png",
      "scale" : "1x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@2x.png",
      "scale" : "2x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@3x.png",
      "scale" : "3x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@4x.png",
      "scale" : "4x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

Это должно быть все, что вам нужно. В следующий раз, когда вы запустите приложение на Android или iOS, у вас должен быть правильный экран-заставка с добавленным вами фирменным изображением.

Спасибо

Если вы flutter createсоздали свой проект, вы можете выполнить действия, указанные на странице https://flutter.io/assets-and-images/#updating-the-launch-screen .

На самом деле Flutter дает более простой способ добавить заставку в наше приложение. Сначала нам нужно создать базовую страницу, как мы разрабатываем экраны других приложений. Вам нужно сделать его 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'),
      ),
    );
  }
}

Логика Внутри initState () вызовите Timer () с продолжительностью, как вы хотите, я сделал это 3 секунды, как только закончите, переместите навигатор на главный экран нашего приложения.

Примечание . Приложение должно отображать экран-заставку только один раз, пользователь не должен возвращаться к нему снова при нажатии кнопки «Назад». Для этого мы используем Navigator.pushReplacement () , он переместится на новый экран и удалит предыдущий экран из стека истории навигации.

Для лучшего понимания посетите Flutter: Создайте свой собственный экран-заставку.

Хорошего примера пока нет, но вы можете сделать это самостоятельно, используя собственные инструменты для каждой платформы:

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 .

Для 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" />

Самый простой способ добавить заставку во флаттер - это 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.

Вы также можете использовать # в цвете. color: "# 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 Когда пакет завершит работу, ваш экран-заставка будет готов.

Вы должны попробовать код ниже, работал у меня

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,
      )),
    ),
  );
}
}

люди, которые получают сообщение об ошибке, например, изображение не найдено, после применения проверенного ответа, убедитесь, что вы добавляете @ mipmap / ic_launcher вместо @ mipmap / ic_launcher.png

И @Collin Jackson, и @Sniper правы. Вы можете выполнить следующие действия, чтобы настроить изображения запуска в Android и iOS соответственно. Затем в MyApp (), в initState () вы можете использовать Future.delayed для установки таймера или вызова любого API. Пока ответ не будет возвращен из Future, ваши значки запуска будут отображаться, а затем, когда придет ответ, вы можете перейти к экрану, на который хотите перейти после экрана-заставки. Вы можете увидеть эту ссылку: Flutter Splash Screen

Добавление страницы, как показано ниже, и маршрутизация могут помочь

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.

Это можно сделать несколькими способами, но самый простой из них:

Для значков запуска я использую библиотеку flutter Значок запуска Flutter

Для настраиваемого экрана-заставки я создаю различные разрешения экрана, а затем добавляю изображения-заставки в папку mipmap в соответствии с разрешением для Android.

Последняя часть - это настройка launch_background.xml в папке с возможностью переноса в папке 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+. Поэтому я предпочитаю добавлять заставку в разделе растрового изображения.

Создание заставки в iOS намного проще.

В папке Runner в iOS просто обновите файлы LaunchImage.png своими собственными изображениями экрана-заставки с такими же именами, как LaunchImage.png @ 2x, @ 3x, @ 4x.

Просто дополнение, я считаю, что хорошо иметь 4-кратное изображение в LaunchImage.imageset. Просто обновите свой код в Content.json следующими строками, ниже 3-кратного масштаба, чтобы добавить вариант 4-кратного масштабирования:

{
      "idiom" : "universal",
      "filename" : "LaunchImage@4x.png",
      "scale" : "4x"
    }

сделайте ваше материальное приложение таким

=> Добавить зависимость

=> import import 'package: splashscreen / splashscreen.dart';

import 'package:flutter/material.dart';
import 'package:splashscreen/splashscreen.dart';
import 'package:tic_tac_toe/HomePage.dart';
void main(){
  runApp(
    MaterialApp(
      darkTheme: ThemeData.dark(),
      debugShowCheckedModeBanner: false,
      home: new MyApp(),
    )
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new SplashScreen(
      seconds: 6,
      navigateAfterSeconds: new HomePage(),
      title: new Text('Welcome',
      style: new TextStyle(
        fontWeight: FontWeight.bold,
        fontSize: 26.0,
        color: Colors.purple,
       ),
      ),
      image: Image.asset("images/pic9.png"),
      backgroundColor: Colors.white,
      photoSize: 150.0,
    );
  }
}

Окончательный вывод экрана, подобный этому, вы можете изменить вторую в соответствии с вашими требованиями, круг будет круглым.

Это безошибочный и лучший способ добавить динамический экран-заставку во Flutter.

MAIN.DART

import 'package:flutter/material.dart';
import 'constant.dart';

void main() => runApp(MaterialApp(
      title: 'GridView Demo',
      home: SplashScreen(),
      theme: ThemeData(
        primarySwatch: Colors.red,
        accentColor: Color(0xFF761322),
      ),
      routes: <String, WidgetBuilder>{
        SPLASH_SCREEN: (BuildContext context) => SplashScreen(),
        HOME_SCREEN: (BuildContext context) => BasicTable(),
        //GRID_ITEM_DETAILS_SCREEN: (BuildContext context) => GridItemDetails(),
      },
    ));

SPLASHSCREEN.DART

import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:app_example/constants.dart';


class SplashScreen extends StatefulWidget {
  @override
  SplashScreenState createState() => new SplashScreenState();
}

class SplashScreenState extends State<SplashScreen>
    with SingleTickerProviderStateMixin {
  var _visible = true;

  AnimationController animationController;
  Animation<double> animation;

  startTime() async {
    var _duration = new Duration(seconds: 3);
    return new Timer(_duration, navigationPage);
  }

  void navigationPage() {
    Navigator.of(context).pushReplacementNamed(HOME_SCREEN);
  }

@override
dispose() {
  animationController.dispose();  
  super.dispose();
}

  @override
  void initState() {
    super.initState();
    animationController = new AnimationController(
      vsync: this,
      duration: new Duration(seconds: 2),
    );
    animation =
        new CurvedAnimation(parent: animationController, curve: Curves.easeOut);

    animation.addListener(() => this.setState(() {}));
    animationController.forward();

    setState(() {
      _visible = !_visible;
    });
    startTime();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          new Column(
            mainAxisAlignment: MainAxisAlignment.end,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(bottom: 30.0),
                child: new Image.asset(
                  'assets/images/powered_by.png',
                  height: 25.0,
                  fit: BoxFit.scaleDown,
                ),
              )
            ],
          ),
          new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Image.asset(
                'assets/images/logo.png',
                width: animation.value * 250,
                height: animation.value * 250,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

CONSTANTS.DART

String SPLASH_SCREEN='SPLASH_SCREEN';
String HOME_SCREEN='HOME_SCREEN';

HOMESCREEN.DART

import 'package:flutter/material.dart';

class BasicTable extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Table Widget")),
      body: Center(child: Text("Table Widget")),
    );
  }
}

Код от Джалди Бхатта у меня не работает.

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,
        )
    );
  }
}

Если вам нужен дополнительный экран-заставка (после родного), вот простой пример, который работает:

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');
  }
}

Flutter предоставляет вам возможность иметь заставку по умолчанию, но есть много плагинов, которые могут сделать эту работу. Если вы не хотите использовать плагин для этой задачи и беспокоитесь, что добавление нового плагина может повлиять на размер вашего приложения. Тогда вы можете сделать это вот так.

ДЛЯ Android

Откройте файл launch_background.xml, затем вы можете вставить изображение экрана-заставки или цвет градиента по своему желанию. Это первое, что видит пользователь, открывая ваше приложение.

Для iOS

Откройте свое приложение с помощью Xcode, нажмите Runner> Assest.xcassets> LaunchImage, вы можете добавить изображение сюда. Если вы хотите изменить положение изображения экрана запуска, его можно изменить на LaunchScreen.storyboard.

Вот шаги по настройке заставки на платформах IOS и Android для вашего приложения Flutter.

Платформа iOS

Все приложения, представленные в Apple App Store, должны использовать раскадровку Xcode для обеспечения экрана запуска приложения. Сделаем это за 3 шага: -

Шаг 1. Откройте ios / Runner.xcworkspace из корня каталога вашего приложения.

Шаг 2 : Выберите Runner / Assets.xcassets в навигаторе проекта и перетащите изображения запуска всех размеров (2x, 3x и т. Д.). Вы также можете создавать изображения разных размеров из https://appicon.co/#image-sets

Шаг 3 : Вы можете видеть, что файл LaunchScreen.storyboard показывает предоставленное изображение, здесь вы также можете изменить положение изображения, просто перетащив изображение. Для получения дополнительной информации см. Официальную документацию https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/launch-screen/

Платформа Android

В Android во время инициализации приложения Android отображается экран запуска. Давайте установим этот экран запуска в 3 шага: -

Шаг 1. Откройте файл android / app / src / main / res / drawable / launch_background.xml.

Шаг 2 : В строке номер 4 вы можете выбрать желаемый цвет: -

<item android:drawable="@android:color/white" />

Шаг 3 : В строке № 10 вы можете изменить изображение: -

android:src="@mipmap/launch_image"

Вот и все, готово! Удачного кодирования :)

Для
приложения Android -> src -> main -> res -> drawble-> launch_background.xml и раскомментируйте закомментированный блок, как это

<item>
  <bitmap
      android:gravity="center"
      android:src="@mipmap/launch_image" /></item>

есть ли какая-либо ошибка после такого кодирования?
Используйте синхронизацию с системой в студии Android или аннулируйте кеш и сбросьте. Это решило мою проблему. В режиме отладки флаттера потребуется некоторое время для экрана-заставки. После сборки он уменьшится, как собственный Android

Flutter.dev уже дает лучший ответ на это, это не ошибка и не проблема, просто конфиг. Просто найдите время, прочтите, и все будет решено. Всем хорошего дня.

https://flutter.dev/docs/development/ui/advanced/splash-screen

Вы можете создать это двумя способами

1. Перейдите в собственный пакет и начальную страницу. как в собственном пакете Android, создайте доступный для рисования
2. Создайте экран дротика, который будет отображаться на некоторое время

Я нашел полное объяснение удаления белого экрана и отображения заставки здесь

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),
    ),
  );