Solución:
Quiero arrojar algo más de 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 con la pantalla de bienvenida en Flutter.
Quizás la mayoría de los desarrolladores (como yo) están pensando que no hay una pantalla de bienvenida por defecto en Flutter y necesitan hacer algo al respecto. Hay una pantalla de bienvenida, pero es con fondo blanco y nadie puede entender que ya hay una pantalla de bienvenida para iOS y Android por defecto.
Lo único que debe hacer el desarrollador es colocar la imagen de la marca en el lugar correcto y la pantalla de inicio comenzará a funcionar así.
Así es como puede hacerlo paso a paso:
Primero en Android (porque es mi plataforma favorita :))
-
Busca la carpeta “android” en tu proyecto Flutter.
-
Vaya a la aplicación -> src -> principal -> carpeta res 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-xhdpi,
- la imagen con densidad 3 debe colocarse en mipmap-xxhdpi,
- la imagen con densidad 4 debe colocarse en mipmap-xxxhdpi,
Por defecto en la carpeta de Android no hay drawable-mdpi, drawable-hdpi, etc., pero podemos crearlos si queremos. Por 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 del recurso @drawable (puede cambiarlo si lo desea).
-
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 -> principal -> res-> dibujable y abra launch_background.xml. Dentro de este archivo, verá por qué el fondo de la pantalla de barra 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="https://foroayuda.es/@mipmap/your_image_name" /> </item>
Preste atención a que comentemos el código XML para el fondo blanco y descomentemos el código sobre la imagen del mapa MIP. Si alguien está interesado, el archivo launch_background.xml se usa en el archivo styles.xml.
Segundo en iOS:
-
Busque la carpeta “ios” en su proyecto de Flutter.
-
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 anularse [email protected],
Si no estoy equivocado [email protected] no existe de forma predeterminada, pero puede crear uno fácilmente. Si [email protected] no existe, debe declararlo también en el archivo Contents.json, que está 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, debería tener la pantalla de bienvenida correcta con la imagen de marca que agregó.
Gracias
La forma más fácil de agregar una pantalla de presentación en Flutter es en mi humilde opinión 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 presentación
Agregue su configuración al archivo pubspec.yaml de su proyecto o cree un archivo en la 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.
También puede usar # en color. color: “# 42a5f5” También puede establecer android o ios en falso si no desea crear una pantalla de presentación para una plataforma específica.
flutter_native_splash:
image: assets/images/splash.png
color: "42a5f5"
android: false
En caso de que su imagen deba usar 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 presentación de iOS.
Si desea deshabilitar la pantalla de presentación 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 presentación estará lista.
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 mientras diseñamos otras pantallas de aplicaciones. Necesitas convertirlo en un StatefulWidget ya que el estado de este 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 de initState (), llame a un Temporizador() con la duración, como desees, lo hice 3 segundos, una vez hecho esto empuja el navegador a la pantalla de inicio de nuestra aplicación.
Nota: La aplicación debe mostrar la pantalla de presentación solo una vez, el usuario no debe volver a ella al presionar el botón Atrás. Para esto usamos 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