Як би ви підходили додавати екран заставки до програм Flutter? Він повинен завантажуватися та відображатися перед будь-яким іншим вмістом. Наразі короткий спалах кольору перед завантаженням віджету Scaffold (home: X).

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

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

Можливо, більшість дияволів (як я) думають, що у Flutter за замовчуванням не існує екрана Splash, і їм потрібно щось з цим зробити. Існує екран Splash, але він з білим тлом, і ніхто не може зрозуміти, що за замовчуванням вже є екран заставки для iOS та Android.

Єдине, що потрібно зробити розробнику, - це розмістити зображення Branding на потрібне місце, і екран бризки почне працювати просто так.

Ось як це можна зробити покроково:

Спочатку на Android (адже це моя улюблена платформа :))

1. Знайдіть папку "android" у вашому проекті Flutter.

2. Перейдіть до програми -> src -> main -> res Res і помістіть усі варіанти вашого іміджу у відповідному папці. Наприклад:

• зображення з щільністю 1 потрібно розмістити в mipmap-mdpi,
• зображення з щільністю 1,5 потрібно розмістити в mipmap-hdpi,
• зображення з щільністю 2 потрібно розмістити в mipmap-xdpi,
• зображення з щільністю 3 потрібно розмістити в mipmap-xxdpi,
• зображення з щільністю 4 потрібно розмістити в mipmap-xxxdpi,

За замовчуванням у папці android немає dravable-mdpi, dravable-hdpi тощо, але ми можемо їх створити, якщо хочемо. Через це зображення потрібно розміщувати в папках mipmap. Також XML-код за замовчуванням на екрані Splash (в Android) буде використовувати @mipmap замість @drawable ресурс (ви можете змінити його, якщо хочете).

3. Останній крок на Android - це коментувати частину XML-коду у файлі dravable / launch_background.xml. Перейдіть до програми -> src -> main -> res-> dravable and open launch_background.xml. Всередині цього файлу ви побачите, чому фон екрана Slash білий. Щоб застосувати зображення брендингу, яке ми розмістили на кроці 2, нам слід відмітити частину XML-коду у вашому файлі start_background.xml. Після зміни код повинен виглядати так:

    <!--<item android:drawable="@android:color/white" />-->
   
    <item>
   
        <bitmap
            android:gravity="center"
            android:src="@mipmap/your_image_name" />
   
    </item>
   

Зверніть увагу, що ми коментуємо XML-код для білого тла та відміняємо код про зображення mipmap. Якщо когось цікавить, файл start_background.xml використовується у файлі styles.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 у вас повинен бути потрібний екран Splash Screen із доданим іміджем брендингу.

Дякую

Якщо ви flutter createвирішите проект, ви можете виконати кроки на веб-сторінці https://flutter.io/assets-and-images/#updating-the-launch-screen .

Flutter насправді дає простіший спосіб додати екран Splash до нашого додатку. Спочатку нам потрібно розробити основну сторінку, коли ми розробляємо інші екрани додатків. Вам потрібно зробити це 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 () , зателефонуйте до Таймера () тривалістю, як ви хочете, я зробив це 3 секунди, після того як натисніть навігатор на головний екран нашої програми.

Примітка . Додаток повинен показувати екран сплеску лише один раз, користувач не повинен повертатися до нього знову при натисканні кнопки "Назад". Для цього ми використовуємо Navigator.pushReplacement () , він перейде на новий екран і видалить попередній екран із стека історії навігації.

Для кращого розуміння відвідайте Flutter: Створіть власний екран Splash

Ще не є хорошим прикладом цього, але ви можете зробити це самостійно, використовуючи нативні інструменти для кожної платформи:

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> dravable> launcher_background.xml

Тепер скаментуйте це та замініть @ mipmap / start_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

Якщо ваше зображення має використовувати весь доступний екран (ширина та висота), ви можете використовувати властивість заповнення.

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  fill: true

Примітка: властивість fill ще не реалізована для екранів iOS splash.

Якщо ви хочете відключити повний екран заставки на 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

І Коколін Джексон, і @Sniper мають рацію. Ви можете виконати ці кроки для налаштування запуску зображень відповідно для android та iOS. Потім у своєму MyApp (), у вашому initState () ви можете використовувати Future.delayed для налаштування таймера або виклику будь-якого api. Поки відповідь не буде повернута з майбутнього, будуть показані ваші піктограми запуску, а потім, коли відповідь надійде, ви можете перейти на екран, на який потрібно перейти, після екрана заставки. Ви можете побачити це посилання: 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 Launcher»

Для користувацького екрана заставки я створюю різні роздільні здатності екрана, а потім додаю зображення сплеску в папку mipmap відповідно до роздільної здатності для Android.

Остання частина - це коригування start_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 за допомогою власних зображень на екрані Splash із тими ж назвами, що і LaunchImage.png @ 2x, @ 3x, @ 4x.

Лише доповнення, мені здається, що у форматі LaunchImage.imageset є 4-кратне зображення. Просто оновіть свій код у Content.json наступними рядками, нижче 3-кратної шкали, щоб додати параметр масштабу в 4 рази:

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

зробіть свій додаток матеріалу таким

=> Додати залежність

=> імпортувати імпорт 'пакет: 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.

ГОЛОВНА.ДАРТ

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

КОНСТАНТИ.ДАРТ

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

Код від Jaldhi Bhatt не працює для мене.

Flutter передає " Запрошену операцію Навігатора з контекстом, який не включає Навігатор ."

Я зафіксував код, що обертає споживчий компонент Навігатора всередині іншого компонента, який ініціалізує контекст Навігатора за допомогою маршрутів, як зазначено в цій статті.

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

Відкрийте запуск_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 / dravable / start_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>

Чи є якась особа будь-яка помилка після кодування, як це
Використовуйте синхронізацію з системою в андроїд-студії або недійсний кеш і скидання. Це вирішило мою проблему У режимі налагодження трепетному часу знадобиться певний час для екрана сплеску. Після побудови це зменшиться як рідний андроїд

Flutter.dev вже дає найкращу відповідь на це, це не помилка і не проблема, просто налаштувати. Просто знайдіть час, прочитаний, і все вирішиться. Приємного дня всім.

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

Створити його можна двома способами

1. Перейдіть до рідного пакету та початкової сторінки. як у пакеті Native 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),
    ),
  );