¿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).
¿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).
Respuestas:
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 :))
Encuentra la carpeta "android" en tu proyecto Flutter.
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:
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).
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:
Encuentra la carpeta "ios" en tu proyecto Flutter.
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:
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
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.
Si realizó flutter create
su 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
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
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" : "LaunchImage@4x.png",
"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
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),
),
);