Flutter: creación de pantallas de introducción de aplicaciones

Flutter es conocido por su facilidad para crear aplicaciones multiplataforma. O está creando pantallas de introducción para la aplicación o cualquier pantalla. Tenemos una manera fácil de crear Intros para la aplicación utilizando la biblioteca intro_slider de Flutter. En este artículo, lo implementaremos en la aplicación de muestra. 

En esta aplicación de muestra, estamos creando tres diapositivas, que consisten en texto, imagen de fondo, color de fondo, botones para saltar y listo, etc.

Implementación:

Paso 1: Instale el paquete en el archivo pubspec.yaml .

intro_slider: ^2.2.9

Ahora, ejecute pub get en la terminal de su IDE. O podemos agregar la dependencia usando el siguiente comando: 

flutter pub add intro_slider

Esto agregará dependencia en el archivo pubspec.yaml .

Paso 2: ahora es el momento de importar la biblioteca en el archivo de trabajo ( main.dart).

import 'package:intro_slider/intro_slider.dart';

Paso 3: Cree una carpeta de activos en el proyecto para agregar imágenes a la pantalla. Luego ejecute pub get para guardar los cambios en el archivo pubspec.yaml .

Paso 4: para crear objetos de diapositivas, pantallas de diapositivas y dar comportamiento a las diapositivas, necesitamos importar varios archivos como se indica a continuación:

import 'package:intro_slider/intro_slider.dart';
import 'package:intro_slider/slide_object.dart';
import 'package:intro_slider/scrollbar_behavior_enum.dart';

Ahora, vamos a crear una lista de objetos de diapositivas.

List<Slide> slides = [];
  
  @override
  void initState() {
    super.initState();
      
    // initializing slides at the runtime of app
    slides.add(
      new Slide(
        title: "GeeksForGeeks ",
        maxLineTitle: 2,
        styleTitle: TextStyle(
          color: Colors.green,
          fontSize: 30.0,
          fontWeight: FontWeight.bold,
        ),
        description:
            "GeeksForGeeks present you the intro_slider
            tutorial making your learning phase Easier.",
        styleDescription: TextStyle(
          color: Colors.green,
          fontSize: 20.0,
        ),
        marginDescription:
            EdgeInsets.only(left: 20.0,
                            right: 20.0,
                            top: 20.0,
                            bottom: 70.0),
        backgroundColor: Colors.yellow,
        directionColorBegin: Alignment.topLeft,
        directionColorEnd: Alignment.bottomRight,
        onCenterItemPress: () {},
      ),
    );
    slides.add(
      new Slide(
        title: "Second Slide",
        styleTitle: TextStyle(
          color: Colors.white,
          fontSize: 30.0,
          fontWeight: FontWeight.bold,
        ),
        description: "Do video call anywhere anytime with this app.",
        styleDescription: TextStyle(
          color: Colors.white,
          fontSize: 20.0,
        ),
        backgroundImage: "assets/image1.png",
        directionColorBegin: Alignment.topRight,
        directionColorEnd: Alignment.bottomLeft,
      ),
    );
    slides.add(
      new Slide(
        title: "Third Slide",
        styleTitle: TextStyle(
          color: Colors.white,
          fontSize: 30.0,
          fontWeight: FontWeight.bold,
        ),
        description: "Now track the location with this app easilly.",
        styleDescription: TextStyle(
          color: Colors.white,
          fontSize: 20.0,
        ),
        backgroundImage: "assets/image2.png",
        directionColorBegin: Alignment.topCenter,
        directionColorEnd: Alignment.bottomCenter,
        maxLineTextDescription: 3,
      ),
    );
  }

Paso 5: Llame al widget IntroSlider() y asigne valores a sus propiedades. Es fácil personalizar el widget IntroSlider() y agregar tantas diapositivas como queramos. Podemos definir los botones saltar, listo y siguiente, personalizar pestañas y puntos. A continuación se muestra una muestra de un widget simple.

IntroSlider(
      slides: this.slides,
      renderSkipBtn: TextButton(
          onPressed: () {},
          child: Text(
            "Skip",
            style: TextStyle(fontSize: 20),
          )),
      renderNextBtn: Icon(
        Icons.navigate_next,
        color: Colors.green,
        size: 40.0,
      ),
      renderDoneBtn: TextButton(
          onPressed: () {},
          child: Text("Done", style: TextStyle(fontSize: 20))),
      colorDot: Colors.green,
      colorActiveDot: Colors.green,
      sizeDot: 13.0,
      hideStatusBar: true,
      backgroundColorAllSlides: Colors.black,
    );

Producción:

Código fuente completo:

import 'package:flutter/material.dart';
import 'package:intro_slider/intro_slider.dart';
import 'package:intro_slider/slide_object.dart';
import 'package:intro_slider/scrollbar_behavior_enum.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: IntroScreen(),
    );
  }
}
  
class IntroScreen extends StatefulWidget {
  @override
  _IntroScreenState createState() => _IntroScreenState();
}
  
class _IntroScreenState extends State<IntroScreen> {
    
  // creating List of Slide objects 
  // to store data of all intro slides
  List<Slide> slides = [];
  
  @override
  void initState() {
    super.initState();
      
    // initializing slides at 
    // the runtime of app
    slides.add(
      new Slide(
        title: "GeeksForGeeks ",
        maxLineTitle: 2,
        styleTitle: TextStyle(
          color: Colors.green,
          fontSize: 30.0,
          fontWeight: FontWeight.bold,
        ),
        description:
            "GeeksForGeeks present you the intro_slider
            tutorial making your learning phase Easier.",
        styleDescription: TextStyle(
          color: Colors.green,
          fontSize: 20.0,
        ),
        marginDescription:
            EdgeInsets.only(left: 20.0,
                            right: 20.0,
                            top: 20.0,
                            bottom: 70.0),
        backgroundColor: Colors.yellow,
        directionColorBegin: Alignment.topLeft,
        directionColorEnd: Alignment.bottomRight,
        onCenterItemPress: () {},
      ),
    );
    slides.add(
      new Slide(
        title: "Second Slide",
        styleTitle: TextStyle(
          color: Colors.white,
          fontSize: 30.0,
          fontWeight: FontWeight.bold,
        ),
        description: "Do video call anywhere anytime with this app.",
        styleDescription: TextStyle(
          color: Colors.white,
          fontSize: 20.0,
        ),
        backgroundImage: "assets/image1.png",
        directionColorBegin: Alignment.topRight,
        directionColorEnd: Alignment.bottomLeft,
      ),
    );
    slides.add(
      new Slide(
        title: "Third Slide",
        styleTitle: TextStyle(
          color: Colors.white,
          fontSize: 30.0,
          fontWeight: FontWeight.bold,
        ),
        description: "Now track the location with this app easilly.",
        styleDescription: TextStyle(
          color: Colors.white,
          fontSize: 20.0,
        ),
        backgroundImage: "assets/image2.png",
        directionColorBegin: Alignment.topCenter,
        directionColorEnd: Alignment.bottomCenter,
        maxLineTextDescription: 3,
      ),
    );
  }
  
  @override
  Widget build(BuildContext context) {
    return new IntroSlider(
        
      // List slides
      slides: this.slides,
  
      // Skip button
      renderSkipBtn: TextButton(
          onPressed: () {},
          child: Text(
            "Skip",
            style: TextStyle(fontSize: 20),
          )),
  
      // Next button
      renderNextBtn: Icon(
        Icons.navigate_next,
        color: Colors.green,
        size: 40.0,
      ),
      // Done button
      renderDoneBtn: TextButton(
          onPressed: () {},
          child: Text("Done",
                      style: TextStyle(fontSize: 20))),
  
      // Dot indicator
      colorDot: Colors.green,
      colorActiveDot: Colors.green,
      sizeDot: 13.0,
  
      // Show or hide status bar
      hideStatusBar: true,
      backgroundColorAllSlides: Colors.black,
  
      // Scrollbar
      verticalScrollbarBehavior: scrollbarBehavior.SHOW_ALWAYS,
    );
  }
}

Producción:

Ahora podemos crear hermosas pantallas de introducción para nuestras aplicaciones fácilmente.