¿Cómo agregar una pantalla de bienvenida en la aplicación Flutter?

Todos hemos oído hablar de Flutter, es una herramienta de desarrollo de aplicaciones multiplataforma. Flutter se puede usar para crear aplicaciones Android, IOS y web con solo una base de código (lenguaje de programación Dart). En este artículo, veamos cómo podemos agregar una pantalla de bienvenida a nuestras aplicaciones.

¿Qué es la pantalla de bienvenida?

Cuando abrimos una aplicación en nuestros teléfonos, lo primero que vemos es una pantalla con el logotipo de la aplicación en el centro. Esa pantalla se conoce como pantalla de inicio. Ahora, esta pantalla de inicio se puede usar para hacer que nuestras aplicaciones se vean elegantes, pero hay más a eso.

Cuando abrimos una aplicación en nuestro dispositivo, algunas aplicaciones deben autenticar al usuario (que está abriendo la aplicación) antes de permitirnos usar la aplicación. Esta autenticación a veces requiere una fracción de segundo durante la cual se le presenta al usuario una pantalla de inicio para que la aplicación no parezca estar atascada.

¿Cómo implementarlo?

Flutter tiene que ver con los paquetes, siempre hay un paquete disponible para nuestro uso. En este problema nuestro, usaremos un paquete llamado animation_splash_screen .

Para instalar este paquete, agregue el siguiente código al archivo pubspec.yaml y ejecute pub get :

dependencies:
  animated_splash_screen: ^1.1.0

Nota: Observe la sangría, si la sangra mal obtendrá un error y definitivamente no nos gustan los errores.

Cuando creamos una aplicación flutter desde cero, veremos un código repetitivo como el que se muestra a continuación, en el archivo main.dart .

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        
      // Application name
      title: 'Flutter Hello World',
        
      // Application theme data, you can set
      // the colors for the application as
      // you want
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
        
      // A widget which will be started on application startup
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
  
class MyHomePage extends StatelessWidget {
  final String title;
  
  const MyHomePage({@required this.title});
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          
        // The title text which will
        // be shown on the action bar
        title: Text(title),
      ),
      body: Center(
        child: Text(
          'Hello, World!',
        ),
      ),
    );
  }
}

En el código anterior, en lugar de devolver MyHomePage, devolveremos una AnimatedSplashScreen que también ha requerido una nextScreen , donde devolveremos nuestra MyHomePage. Como esto:

import 'package:flutter/material.dart';
import 'package:animated_splash_screen/animated_splash_screen.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        
      // Application name
      title: 'GFG tutotial',
        
      // Application theme data, you can set the
      // colors for the application as
      // you want
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
        
      // A widget which will be started on application startup
      home: AnimatedSplashScreen(
        splash: 'images/gfg.png',
        nextScreen: MyHomePage(title: 'GeeksForGeeks'),
        splashTransition: SplashTransition.fadeTransition,
      ),
    );
  }
}
  
class MyHomePage extends StatelessWidget {
  final String title;
  
  const MyHomePage({@required this.title});
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          
        // The title text which will be shown on the action bar
        title: Text(title),
      ),
      body: Center(
        child: Text(
          'GeeksForGeeks!',
        ),
      ),
    );
  }
}

Para usar nuestra propia imagen para la pantalla de inicio, debemos incluir las imágenes en la sección de activos en el archivo pubspec.yaml :

Producción :