Curso Flutter y Laravel Tienda Delivery

Implementación de la Pantalla Inicio

El diseño de la pantalla inicio tendrá una imagen, texto y un botón para acceder a la siguiente pantalla.

Lección 39 del Curso Flutter y Laravel Tienda Delivery

Implementación de la Pantalla Inicio

POR LA COMPRA DEL CURSO COMPLETO

  • MIRA TODOS LOS VIDEOS SIN RESTRICCIÓN
  • TEN ACCESO AL CURSO DE POR VIDA
  • DESCARGA TODO CÓDIGO FUENTE DEL PROYECTO
  • ACCESO A CURSOS Y RECURSOS GRATIS

Flutter y Laravel Tienda Delivery

¿Cómo realizar la Implementación de la pantalla Inicio en Flutter?

DESCRIPCIÓN DE LA LECCIÓN

Bien, llegamos al punto donde vamos a empezar a visualizar las pantallas que necesitamos en nuestra aplicación móvil.

Normalmente una pantalla de inicio cuenta con tres elementos frecuentes como:

  1. El Logo
  2. El nombre
  3. Y finalmente un boton para acceder a las funciones del aplicativo.

Si bien tenemos un archivo principal llamado main.dart este solo inicializa la app, para mostrar una pantalla gráfica creamos un archivo en el directorio pantalla/PantallaInicio.dart accedemos y digitamos el siguiente código:

import 'package:arequipalocal/pantalla/PantallaCategoria.dart';
import 'package:arequipalocal/pantalla/PantallaLogin.dart';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

class PantallaInicio extends StatefulWidget {
  @override
  _PantallaInicioState createState() => _PantallaInicioState();
}

class _PantallaInicioState extends State<PantallaInicio> {
  bool _islogin =false;
  void _verificarLogin() async{
    SharedPreferences login = await SharedPreferences.getInstance();
    var token = login.getString("token");
    ...
  }

  @override
  void initState() {
    // TODO: implement initState
   ....
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.orangeAccent,
      body: Container(
        width: MediaQuery.of(context).size.width,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("AREQUIPALOCAL",style: TextStyle(color: Colors.white,fontSize: 40),textAlign: TextAlign.center,),
            SizedBox(
              height: 100,
            ),
            Text("Delivery al toque",style: TextStyle(color: Colors.white,fontSize: 25),),
            SizedBox(
              height: 100,
            ),
            RaisedButton(
              elevation: 0,
              shape: CircleBorder(),
              padding: EdgeInsets.all(15),
              onPressed: () async {
                ...
              },
              child: Icon(
                Icons.chevron_right,
                color: Colors.red,
              ),
            )

          ],
        ),
      ),
    );
  }
}

Donde evaluamos si existe un usuariuo autenticado o no, de acuerdo a esta evaluación el botón redirige al usuario a realizar un pedido o a loguearse.

Para ello tenemos una variable _islogin, además de una función que evalua una variable de almacenamiento local con SharedPreferences. Dicha evaluación de debe realizar al cargar la pantalla en el método initState.


POR LA COMPRA DEL CURSO COMPLETO

  • MIRA TODOS LOS VIDEOS SIN RESTRICCIÓN
  • TEN ACCESO AL CURSO DE POR VIDA
  • DESCARGA TODO CÓDIGO FUENTE DEL PROYECTO
  • ACCESO A CURSOS Y RECURSOS GRATIS

Flutter y Laravel Tienda Delivery

183 visitas

Lecciones del curso

VER MÁS CURSOS
Logo Codea App

Develop your code

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021