Agregar una pantalla de bienvenida a las aplicaciones Flutter


143

¿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).


No sé si es la forma correcta de agregar una pantalla de inicio configurando un temporizador personalizado, no me gusta mantener los procesadores inactivos, ¿por qué no hacer algunas tareas de mantenimiento como verificar los archivos o directorios necesarios o sincronizar algunos registros o hacer una copia de seguridad de algunos archivos en el fondo y hacer la marca en la parte delantera en el tiempo medio. Después de todos los 3-4 segundos es mucho tiempo para un procesador.
maheshmnj

1
Este enlace explica cómo hacerlo: flutter.dev/docs/development/ui/splash-screen/…
live-love

Respuestas:


250

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).

  1. 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, LaunchImage@2x.png, 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 LaunchImage@2x.png,
  • la imagen con densidad 3 debe anular LaunchImage@3x.png,
  • la imagen con densidad 4 debe anular LaunchImage@4x.png,

Si no me equivoco, LaunchImage@4x.png no existe por defecto, pero puede crear uno fácilmente. Si LaunchImage@4x.png 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" : "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"
  }
}

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


44
Recibí un error Cannot resolve symbol '@mipmap/ic_launcher'en Android Studio 3.1.1 (incluso después de la reconstrucción de la memoria caché), sin embargo, la aplicación se compiló y ejecutó sin error, y se mostró un gráfico de inicio.
IanB

1
Tengo el mismo problema, sin embargo, no puedo ejecutarlo ya que en tiempo de ejecución se bloquea y me dice que falta la imagen. pero no puede resolver mipmap por alguna razón. Alguien una idea de por qué es esto?
carlosx2

Hola chicos, no estoy seguro de por qué tienen este problema, pero para mí parece un problema de sincronización del proyecto (no hay otra razón para no encontrar el recurso si está allí). No sé cómo resolverlo porque nunca tuve este problema, pero intente sincronizar el proyecto, limpiar, reconstruir, etc. lo que sea posible en su IDEA. También intente utilizar el recurso en la carpeta dibujable y reemplace la anotación mipmap con la anotación dibujable. Solo estoy adivinando ahora :)
Stoycho Andreev

1
Curioso por qué está agregando la imagen 4x. XCode parece esperar solo 3x, ¿hay alguna razón para agregar el 4x?
sbilstein

3
La documentación oficial tiene esto cubierto.
rmalviya


21

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


77
La pantalla de bienvenida blanca predeterminada aún se mostrará durante 1+ segundos antes de que se muestre esta personalizada. Tiene que anular los proyectos xcode y android generados para eliminarlo.
d3vtoolsmith

Si. La pantalla spalsh predeterminada en iOS y Android siempre aparecerá, esta pantalla de bienvenida de flutter es una adición a eso.
Mahesh Peri

El caso es que este ejemplo no es confiable ... ¿Qué sucede si su aplicación se carga durante más de 3 segundos debido a razones como la conectividad de la red?
emanuel sanga

Para una personalización adicional, apoyo más esta respuesta. Primero quiero realizar una solicitud HTTP mientras visualizo una pantalla de bienvenida. Este enfoque fue mucho más fácil
Idris Stack

16

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 .


¿Hay un ejemplo de cómo agregar realmente una pantalla de bienvenida? Cuando comienzo la nueva plantilla, no veo una pantalla de presentación
Ride Sun, el

@RideSun por favor vea mi respuesta
Stoycho Andreev

1
¿Cómo puedo hacer que la pantalla de bienvenida dure más? ¿Debo cambiar algún código en la actividad?
zero.zero.seven

Pero necesito más, por ejemplo, cuando durante la presentación y luego creando / importando db local, solo termina la presentación
stuckedoverflow

14

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" />

esto funcionó para mí ... pero la parte de iOS ... no juega tan bien
IrishGringo


Lo descubrí ... aparentemente la imagen de iOS era mala. iOS y ANDROID funcionan perfectamente ahora. falsa alarma
IrishGringo

@SmrutiRanjanRana, ¿cuál es el tamaño ideal para esta imagen?
Mattias

1
Esta respuesta sería mucho más útil si hubiera un ejemplo de la ubicación de la imagen. De lo contrario, el usuario tiene que adivinar cómo agregar la ruta.
Robin Manoli

12

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

ingrese la descripción de la imagen aquí

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.


8

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

¿puede publicar el código completo (un código que podemos ejecutar independientemente sin la necesidad de definir nuestras variables) o un enlace github?
biniam

8

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


Su IDE le diría esto una vez que pase el cursor sobre el error
Ojonugwa Jude Ochalifu

7

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


1
Por favor, cuando enlace a otra página fuera de SO, publique aquí la parte de respuesta del contenido para evitar enlaces muertos.
rak007

4

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


4

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" : "LaunchImage@4x.png",
      "scale" : "4x"
    }

4

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

ingrese la descripción de la imagen aquí


Añadir dependencias => dynamic_theme: ^ 1.0.1
Champ 96k

No hay ninguna importación de SplashScreen
Tuss

sí exactamente correcto, hay varias formas de hacerlo, pero en la respuesta, le diré cómo puede agregar una pantalla de inicio
Champ 96k

4

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

3

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

2
¿Puedes agregar alguna explicación también? Un bloque de código simple por sí solo no es tan informativo
CertainPerformance

3

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

3

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. ingrese la descripción de la imagen aquí

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.

ingrese la descripción de la imagen aquí


3

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

ingrese la descripción de la imagen aquí

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/

ingrese la descripción de la imagen aquí

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"

ingrese la descripción de la imagen aquí

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


0

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.




-1
SplashScreen(
          seconds: 3,
          navigateAfterSeconds: new MyApp(),
          // title: new Text(
          //   'Welcome In SplashScreen',
          //   style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
          // ),
          image: new Image.network('https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Tesla_Motors.svg/1200px-Tesla_Motors.svg.png'),
          backgroundColor: Colors.white,
          styleTextUnderTheLoader: new TextStyle(),
          photoSize: 150.0,
          loaderColor: Colors.black),
    ),
  );
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.