¿Cómo abordaría agregar una pantalla de bienvenida a las aplicaciones Flutter? Debe cargarse y mostrarse antes que cualquier otro contenido. Actualmente hay un breve destello de color antes de que se cargue el widget Scaffold (inicio: X).

Quiero aportar más luz sobre la forma real de hacer una pantalla de bienvenida en Flutter.

Seguí un poco el rastro aquí y vi que las cosas no se ven tan mal en la pantalla de bienvenida en Flutter.

Tal vez la mayoría de los desarrolladores (como yo) están pensando que no hay pantalla de bienvenida por defecto en Flutter y necesitan hacer algo al respecto. Hay una pantalla de bienvenida, pero tiene un fondo blanco y nadie puede entender que ya hay una pantalla de bienvenida para iOS y Android de forma predeterminada.

Lo único que debe hacer el desarrollador es colocar la imagen de marca en el lugar correcto y la pantalla de inicio comenzará a funcionar así.

Así es como puedes hacerlo paso a paso:

Primero en Android (porque es mi plataforma favorita :))

1. Encuentra la carpeta "android" en tu proyecto Flutter.

2. Vaya a la aplicación -> src -> main -> res folder y coloque todas las variantes de su imagen de marca en las carpetas correspondientes. Por ejemplo:

• la imagen con densidad 1 debe colocarse en mipmap-mdpi,
• la imagen con densidad 1.5 debe colocarse en mipmap-hdpi,
• la imagen con densidad 2 debe colocarse en mipmap-xdpi,
• la imagen con densidad 3 debe colocarse en mipmap-xxdpi,
• la imagen con densidad 4 debe colocarse en mipmap-xxxdpi,

Por defecto, en la carpeta de Android no hay drawable-mdpi, drawable-hdpi, etc., pero podemos crearlos si lo deseamos. Debido a ese hecho, las imágenes deben colocarse en las carpetas mipmap. Además, el código XML predeterminado sobre la pantalla de bienvenida (en Android) usará @mipmap, en lugar de @drawable resource (puede cambiarlo si lo desea).

3. El último paso en Android es descomentar parte del código XML en el archivo drawable / launch_background.xml. Vaya a la aplicación -> src -> main -> res-> drawable y abra launch_background.xml. Dentro de este archivo, verá por qué el fondo de la pantalla Slash es blanco. Para aplicar la imagen de marca que colocamos en el paso 2, tenemos que descomentar parte del código XML en su archivo launch_background.xml. Después del cambio, el código debería verse así:

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

Tenga en cuenta que comentamos el código XML para el fondo blanco y descomente el código sobre la imagen mipmap. Si alguien está interesado, el archivo launch_background.xml se usa en el archivo styles.xml.

Segundo en iOS:

1. Encuentra la carpeta "ios" en tu proyecto Flutter.

2. Vaya a Runner -> Assets.xcassets -> LaunchImage.imageset. Debería haber LaunchImage.png, [email protected], etc. Ahora debe reemplazar estas imágenes con sus variantes de imagen de marca. Por ejemplo:

• la imagen con densidad 1 debe anular LaunchImage.png,
• la imagen con densidad 2 debe anular [email protected],
• la imagen con densidad 3 debe anular [email protected],
• la imagen con densidad 4 debe anular [email protected],

Si no me equivoco, [email protected] no existe por defecto, pero puede crear uno fácilmente. Si [email protected] no existe, debe declararlo también en el archivo Contents.json, que se encuentra en el mismo directorio que las imágenes. Después del cambio, mi archivo Contents.json se ve así:

{
  "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"
  }
}

Eso debería ser todo lo que necesita, la próxima vez que ejecute su aplicación, en Android o iOS, debe tener la pantalla de bienvenida correcta con la imagen de marca que agregó.

Gracias

Si realizó flutter createsu proyecto, puede seguir los pasos en https://flutter.io/assets-and-images/#updating-the-launch-screen .

Flutter en realidad ofrece una forma más sencilla de agregar Splash Screen a nuestra aplicación. Primero necesitamos diseñar una página básica a medida que diseñamos otras pantallas de aplicaciones. Debe convertirlo en un widget StatefulWidget ya que el estado de esto cambiará en unos segundos.

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

Lógica Dentro del initState () , llame a un Timer () con la duración, como lo desee, lo hice 3 segundos, una vez hecho esto empuje el navegador a la pantalla de inicio de nuestra aplicación.

Nota: La aplicación debe mostrar la pantalla de inicio solo una vez, el usuario no debe volver a ella nuevamente al presionar el botón Atrás. Para esto, utilizamos Navigator.pushReplacement () , se moverá a una nueva pantalla y eliminará la pantalla anterior de la pila del historial de navegación.

Para una mejor comprensión, visite Flutter: diseñe su propia pantalla de bienvenida

Todavía no hay un buen ejemplo de esto, pero puede hacerlo usted mismo utilizando las herramientas nativas para cada plataforma:

iOS: https://docs.nativescript.org/publishing/creating-launch-screens-ios

Android: https://www.bignerdranch.com/blog/splash-screens-the-right-way/

Suscríbase al número 8147 para obtener actualizaciones sobre el código de ejemplo para pantallas de presentación. Si el parpadeo negro entre la pantalla de inicio y la aplicación en iOS te molesta, suscríbete al número 8127 para recibir actualizaciones.

Editar: a partir del 31 de agosto de 2017, el soporte mejorado para pantallas de bienvenida ahora está disponible en la nueva plantilla de proyecto. Ver # 11505 .

Para Android, vaya a android> app> src> main> res> drawable> launcher_background.xml

Ahora descomente esto y reemplace @ mipmap / launch_image , con su ubicación de imagen.

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

Puede cambiar el color de su pantalla aquí:

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

La forma más fácil de agregar una pantalla de inicio en flutter es en este paquete: https://pub.dev/packages/flutter_native_splash

Guía de instalación (por el autor del paquete):

1. Configuración de la pantalla de bienvenida

Agregue su configuración al archivo pubspec.yaml de su proyecto o cree un archivo en su carpeta raíz del proyecto llamado flutter_native_splash.yaml con su configuración.

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

La imagen debe ser un archivo PNG.

Puede usar # en color también. color: "# 42a5f5" También puede configurar Android o iOS en falso si no desea crear una pantalla de inicio para una plataforma específica.

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  android: false

En caso de que su imagen use toda la pantalla disponible (ancho y alto), puede usar la propiedad de relleno.

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

Nota: la propiedad de relleno aún no está implementada para las pantallas de bienvenida de iOS.

Si desea deshabilitar la pantalla de inicio de pantalla completa en Android, puede usar la propiedad android_disable_fullscreen.

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

2. Ejecute el paquete

Después de agregar su configuración, ejecute el paquete con

flutter pub pub run flutter_native_splash:create Cuando el paquete termine de ejecutarse, la pantalla de bienvenida estará lista.

Deberías probar el siguiente código, funcionó para mí

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

las personas que reciben el error como imagen no encontrada después de aplicar la respuesta verificada, asegúrese de agregar @ mipmap / ic_launcher en lugar de @ mipmap / ic_launcher.png

Tanto @Collin Jackson como @Sniper tienen razón. Puede seguir estos pasos para configurar imágenes de inicio en Android e iOS, respectivamente. Luego, en su MyApp (), en su initState (), puede usar Future.delayed para configurar un temporizador o llamar a cualquier API. Hasta que se devuelva la respuesta del futuro, se mostrarán los íconos de inicio y luego, a medida que llegue la respuesta, puede pasar a la pantalla a la que desea ir después de la pantalla de inicio. Puedes ver este enlace: Flutter Splash Screen

Agregar una página como la siguiente y el enrutamiento podría ayudar

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

Si desea seguir adelante, consulte: https://www.youtube.com/watch?v=FNBuo-7zg2Q

Múltiples formas de hacer esto, pero la más fácil que uso es:

Para los iconos de inicio, uso la biblioteca Flutter Flutter Launcher Icon

Para la pantalla de bienvenida personalizada, creo diferentes resoluciones de pantalla y luego agrego las imágenes de bienvenida en la carpeta mipmap según la resolución para Android.

La última parte es ajustar launch_background.xml en la carpeta dibujable en la carpeta res en Android.

Simplemente cambie su código para que se vea a continuación:

<?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>

Pocos desarrolladores que he visto agregan el splash como dibujable, probé esto, pero de alguna manera la compilación falla en Flutter 1.0.0 y Dart SDK 2.0+. Por lo tanto, prefiero agregar el splash en la sección de mapa de bits.

La creación de la pantalla de bienvenida de iOS es bastante más simple.

En la carpeta Runner en iOS, simplemente actualice los archivos LaunchImage.png con sus imágenes de pantalla Splash personalizadas con los mismos nombres que LaunchImage.png @ 2x, @ 3x, @ 4x.

Solo una adición, creo que es bueno tener una imagen 4x también en LaunchImage.imageset. Simplemente actualice su código en Content.json con las siguientes líneas, debajo de la escala 3x para agregar una opción de escala 4x:

{
      "idiom" : "universal",
      "filename" : "[email protected]",
      "scale" : "4x"
    }

haz que tu aplicación de material sea así

=> Agregar dependencia

=> import import 'paquete: 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,
    );
  }
}

La salida de pantalla final como esta puede cambiar en segundo lugar de acuerdo con sus requisitos, el círculo será redondo circular

Esta es la mejor forma y sin errores de agregar una pantalla de presentación dinámica en Flutter.

DÍA PRINCIPAL

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

CONSTANTES DARDO

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

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

El código de Jaldhi Bhatt no funciona para mí.

Flutter lanza una operación ' Navigator solicitada con un contexto que no incluye un Navigator ".

Arreglé el código que envolvía el componente de consumidor de Navigator dentro de otro componente que inicializa el contexto de Navigator usando rutas, como se menciona en este artículo.

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

En caso de que desee una pantalla de bienvenida secundaria (después de la nativa), aquí hay un ejemplo simple que funciona:

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 le brinda la capacidad de tener una pantalla de inicio por defecto, pero hay muchos complementos que pueden hacer el trabajo. Si no desea usar un complemento para la tarea y le preocupa que agregar un nuevo complemento pueda afectar el tamaño de su aplicación. Entonces puedes hacerlo así.

Para Android

Abra launch_background.xml, luego puede colocar la imagen de la pantalla de bienvenida o el color de degradado que desee. Esto es lo primero que ve su usuario cuando abre su aplicación.

Para iOS

Abra su aplicación usando Xcode, haga clic en Runner> Assest.xcassets> LaunchImage, puede agregar la imagen aquí. Si desea editar qué posición debe tomar o verse la imagen de la pantalla de inicio, puede editarla en LaunchScreen.storyboard.

Estos son los pasos para configurar la pantalla de inicio en las plataformas IOS y Android para su aplicación Flutter.

Plataforma IOS

Todas las aplicaciones enviadas a Apple App Store deben usar un guión gráfico Xcode para proporcionar la pantalla de inicio de la aplicación. Hagamos esto en 3 pasos: -

Paso 1 : Abra ios / Runner.xcworkspace desde la raíz del directorio de su aplicación.

Paso 2 : Seleccione Runner / Assets.xcassets desde el Navegador de proyectos y arrastre sus imágenes de lanzamiento de todos los tamaños (2x, 3x, etc.). También puede generar diferentes tamaños de imágenes desde https://appicon.co/#image-sets

Paso 3 : Puede ver que el archivo LaunchScreen.storyboard muestra la imagen proporcionada, aquí también puede cambiar la posición de la imagen simplemente arrastrando la imagen. Para obtener más información, consulte la documentación oficial https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/launch-screen/

Plataforma Android

En Android, se muestra una pantalla de inicio mientras se inicializa su aplicación de Android. Configuremos esta pantalla de inicio en 3 pasos: -

Paso 1 : Abra el archivo android / app / src / main / res / drawable / launch_background.xml.

Paso 2 : en la línea número 4 puede seleccionar el color deseado: -

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

Paso 3 : en la línea número 10 puede cambiar la imagen: -

android:src="@mipmap/launch_image"

Eso es todo, ya está! Happy Coding :)

Para la
aplicación de Android -> src -> main -> res -> drawble-> launch_background.xml y descomenta el bloque comentado de esta manera

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

¿
Alguien se enfrenta a algún error después de codificar de esta manera? Use la sincronización con el sistema en el estudio de Android o invalide la memoria caché y reinicie. Esto resolvió mi problema.

Flutter.dev ya da la mejor respuesta, no es un error ni un problema, solo config. Solo toma tiempo para leer y todo estará resuelto. Que tengan un buen día todos.

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

Puedes crearlo de dos maneras

1. Vaya al paquete nativo y a una página inicial. como en el paquete nativo de Android, crea un dibujable
2. Crea una pantalla de dardos para mostrar por algún tiempo

Encontré una explicación completa para eliminar la pantalla blanca y mostrar la pantalla de bienvenida aquí

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