Flutter Challenge #1

Este es el primero de una serie de desafíos en los que reproducimos conceptos de Dribbble con Flutter. Esta vez trabajamos con un diseño de Sarah-D — una interfaz móvil bancaria de temática oscura que pone a prueba las capacidades de layout y animación de Flutter.

Primeros Pasos

Prepara el archivo main.dart eliminando todo y dejando solo la clase MyApp. Elimina el banner de debug y configura HomePage como tu widget home.

En el archivo home_page.dart, crea un StatefulWidget. Desde el método initState(), llama a SystemChrome.setSystemUIOverlayStyle() para hacer la barra de estado transparente. Retorna un CupertinoPageScaffold en el método build con el backgroundColor configurado en #2B292A.

Diseñando el Layout de la App

1. Barra de Navegación

El hijo de nuestro scaffold contendrá un Stack. El primer hijo será un CupertinoNavigationBar con el mismo color de fondo que el scaffold y el ícono de menú a la izquierda. Envuélvelo dentro de un widget Positioned para ubicarlo en la parte superior de la pantalla.

2. Texto de Bienvenida

A continuación, agrega un Container al Stack. Dentro del contenedor tenemos una Column cuyo primer hijo es el texto de bienvenida, implementado con un widget RichText.

3. Botones

Coloca cuatro botones en un widget Row. Crea un nuevo StatelessWidget llamado SquareButton — una Column con un Placeholder para el botón y otro para el texto. Usa MainAxisAlignment.spaceBetween para alinearlos uniformemente.

4. Solicitud de Servicio

Esta es una Row simple. El pequeño punto al inicio es un Container con un BoxDecoration.

5. Secciones Central e Inferior

Agrega contenedores para las otras dos secciones. El contenido del contenedor inferior utiliza una Row para ubicar los elementos.

Creando el Widget SquareButton

Usa el paquete font_awesome_flutter. Añade dos parámetros: el String de la etiqueta y el Icon. Reemplaza el primer Placeholder con un SizedBox que envuelva un CupertinoButton.

El PageView

Crea un widget PageViewCardListTile que reciba un title y content. Agrega un bool biggerContent con valor predeterminado false. Instancia un PageController con viewportFraction configurado en 0.92. Pobla con widgets PageViewCard dentro de un Stack.

Crea un widget TrackingLines que reciba un length y un currentIndex. Agrega un listener al PageController en initState() que se actualice cuando el currentIndex coincida con el índice de la línea.

El Drawer

El CupertinoPageScaffold no tiene una propiedad drawer, por lo que agregamos un Container al final del Stack principal.

Creando el Layout del Drawer

Agrega un Container con altura de pantalla completa y dos tercios del ancho de la pantalla, con fondo blanco. Divídelo utilizando las mismas proporciones que el contenedor inferior y el PageView.

Animando el Drawer

Reemplaza el widget Positioned con un AnimatedPositioned con una Duration de 300 ms. Declara una variable _isDrawerOpen y usa un operador ternario para la propiedad left. Usa GestureDetector sobre el ícono de menú para alternar el drawer. Añade una curva para una animación más suave.

Generando la Sombra

Agrega un BoxDecoration con BoxShadow al Container blanco del drawer.

La Lista de Elementos del Menú

Crea un widget MenuItem — un ícono y texto en una Row. Coloca las opciones del menú en un Container debajo de la sección del encabezado.

Información del Usuario

Crea un StatelessWidget llamado UserInfo. Coloca los elementos dentro de una Column, comenzando con un Card que muestre la foto de perfil envuelta en ClipRRect para esquinas redondeadas. Usa FadeInImage.network para una carga de imagen fluida.

Conclusión

Estamos satisfechos con el resultado. Esperamos que este desafío ayude a algunos de ustedes a conocer mejor este increíble toolkit de UI llamado Flutter. ¡Estén atentos a más desafíos en esta serie!