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
¿Cómo realizar la Implementación de la pantalla Inicio en Flutter?
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:
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.
85 visitas
© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021