Pantalla de bienvenida en Flutter

Splash Screen es la primera pantalla que vemos cuando ejecutamos nuestra aplicación. También se conoce como Pantalla de inicio . Implementaremos tres métodos básicos para agregar una pantalla de inicio en nuestra aplicación.

Método 1 : 

En este método, crearemos una pantalla de inicio con la ayuda de la función Timer() .

Pasos :

1. Cree una nueva aplicación Flutter usando el símbolo del sistema.

2. Elimine el código del archivo main.dart y copie el siguiente código.

dardo principal

import 'dart:async';
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Splash Screen',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    Timer(Duration(seconds: 3),
          ()=>Navigator.pushReplacement(context,
                                        MaterialPageRoute(builder:
                                                          (context) => 
                                                          SecondScreen()
                                                         )
                                       )
         );
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child:FlutterLogo(size:MediaQuery.of(context).size.height)
    );
  }
}
class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:Text("GeeksForGeeks")),
      body: Center(
        child:Text("Home page",textScaleFactor: 2,)
      ),
    );
  }
}

Explicación del código anterior :

• Tenemos una función main() que llama a runApp() tomando cualquier widget como argumento para crear el diseño.
• Luego tenemos el hogar como MyHomePage() que es una clase con estado (clase mutable).
• MyHomePage() devuelve un contenedor que tiene un elemento secundario como FlutterLogo (que se mostrará inicialmente cuando se inicie la aplicación).
• Ahora, tenemos un método más importante que es initState() .
• El método initState() se llama una vez cuando el widget con estado se inserta en el árbol de widgets.
• initState() primero llama a super.initState() y luego al temporizador de duración de 4 segundos ( la función del temporizador tiene 2 argumentos, primero es la duración y el segundo es la acción a realizar). Después de 4 segundos, la pantalla actual será reemplazada por una nueva pantalla, es decir , SecondScreen() .
• También podemos usar Imagen de recurso/Imagen de red en lugar de FlutterLogo.

Producción:

Método 2:

En este método, crearemos una pantalla de bienvenida usando el paquete splashscreen .

El constructor de la clase SplashScreen:

SplashScreen({Color loaderColor,
int seconds, 
double photoSize, 
dynamic onClick, 
dynamic navigateAfterSeconds, 
Text title, 
Color backgroundColor, 
TextStyle styleTextUnderTheLoader, 
Image image, 
Text loadingText, 
ImageProvider<dynamic> imageBackground, 
Gradient gradientBackground})

Pasos :

• Cree una nueva aplicación Flutter.
• Elimine todo el código del archivo main.dart por ahora.
• Agregue la dependencia a su archivo pubspec.yaml :

pubspec.yaml

• Copie el siguiente código:

dardo principal

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:splashscreen/splashscreen.dart';
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Splash Screen',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Splash2(),
      debugShowCheckedModeBanner: false,
    );
  }
}
class Splash2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SplashScreen(
      seconds: 6,
      navigateAfterSeconds: new SecondScreen(),
      title: new Text('GeeksForGeeks',textScaleFactor: 2,),
      image: new Image.network('https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200.png'),
      loadingText: Text("Loading"),
      photoSize: 100.0,
      loaderColor: Colors.blue,
    );
  }
}
class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:Text("GeeksForGeeks")),
      body: Center(
        child:Text("Home page",textScaleFactor: 2,)
      ),
    );
  }
}

Explicación del código anterior:

• Tenemos el hogar como Splash2(), que es la clase StatelessWidget (clase inmutable ).
• Devuelve la clase SplashScreen que tiene tantas propiedades como título, imagen, fondo degradado, etc.
• Después de completar 6 segundos, navegará a una nueva pantalla, es decir, SecondScreen().

Producción:

Método 3:

En este método, agregaremos una pantalla de inicio desde la carpeta de Android .

Pasos:

1. Cree una nueva aplicación de aleteo.

2. Elimine todo el código del archivo main.dart y escriba su propio código. Por ejemplo, usaremos el siguiente código:

dardo principal

import 'dart:async';
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Splash Screen',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Splash3(),
      debugShowCheckedModeBanner: false,
    );
  }
}
class Splash3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:Text("GeeksForGeeks")),
      body: Center(
        child:Text("Home page",textScaleFactor: 2,)
      ),
    );
  }
}

3. Actualmente, no tenemos una pantalla de inicio.

4. Ahora, para agregar una pantalla de inicio, vaya a Android -> aplicación -> src -> principal -> res

5. Pegue su imagen de activos en una carpeta dibujable para la pantalla de inicio.

6. Abra la carpeta dibujable y abra el archivo launch_background.xml. 

7. Descomente la etiqueta del elemento y agregue su imagen de recurso (android:src=”@drawable/ YOUR_ASSET_IMAGE ”) o puede copiar el siguiente código:

fondo_lanzamiento.xml

<?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="@color/green" />

    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/bg" />
    <!-- bg is asset image for splash screen -->
    </item>
</layer-list>

Ahora, vaya a la carpeta de valores y modifique el archivo styles.xml . Elimine la etiqueta de estilo con name=» NormalTheme «.Después de eso, el archivo styles.xml se ve así:

estilos.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Theme applied to the Android Window while the process is starting -->
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
</resources>

8. Cree un nuevo archivo en la carpeta de valores con el nombre “color.xml” .

9. Pegue el siguiente código:

color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name = "green">#808080</color>
</resources>

10. Ahora, el último paso es modificar el contenido en el archivo AndroidManifest.xml porque hemos realizado muchos cambios.

El nombre de mi aplicación es splash_screen, por lo que el nombre de mi paquete es «com.example.splash_screen» y android:label=»splash_screen». Así que asegúrese de tener el nombre de paquete correcto y android:label en AndroidManifest.xml .

AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.splash_screen">
    <application
        android:name="io.flutter.app.FlutterApplication"
        android:label="splash_screen"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <meta-data
                android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
                android:value="true" />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>
</manifest>

11. Hemos realizado todos los cambios necesarios. Ahora, ejecute la aplicación para ver el resultado:

Producción:

Para ver el código completo, puede consultar https://github.com/singhteekam/splash_screen