Flutter sssssssssssssssssssssssssss
sssssssssssssssssssssssssss
ssssssssss
ssssssssss
Guia de atajos ssssssssss
ssssssssss
Widgets Transform
Permite realizar transformaciones, rotaciones
Posicionamiento y agrupadores y demás mutaciones visuales a su child.
Transform.scale(
Center scale: 1.2,
Centra su hijo en relación al widget padre. child: Text('Woohoo!'),
);
Center( child: Text(‘Widget') );
SizedBox
Align Una caja con un tamaño especifico,
Alinea su hijo dentro de si mismo, que también fuerza a su child a que
respete su tamaño impuesto.
SizedBox(
Align( width: 200.0,
alignment: Alignment.topRight, height: 300.0,
child: FlutterLogo() child: Container(),
); );
ConstrainedBox
Impone reglas adicionales de tamaño, Widget con Múltiples hijos (Children)
no ser más grande de ciertas
dimensiones, o más pequeño de ciertas Column
dimensiones o que tome cierto espacio. Ordena sus hijos de forma vertical, a la vez
ConstrainedBox( permite alinearlos internamente en su eje
constraints: const BoxConstraints.expand(), principal o secundario.
child: const Card(
child: Text('Hello World!’)
),
);
Column(
children: const <Widget>[
Text('Deliver features faster'),
Container Text('Craft beautiful UIs'),
Expanded(
Un widget común que combina pintado child: FittedBox(
personalizado, posicionamiento, child: FlutterLogo(),
padding y tamaño en uno sólo. ),
),
Center( ],
child: Container( );
margin: const EdgeInsets.all(10.0),
color: Colors.amber[600],
width: 48.0,
height: 48.0, Row
), Similar al column, pero de forma
); horizontal, también permite alinear sus
hijos en el eje principal y secundario.
Row(
Padding children: const <Widget>[
Este widget añade un relleno (padding), FlutterLogo(),
Text("Hot reload!!"),
que permite al hijo acomodarse a ese Icon(Icons.sentiment_very_satisfied),
nuevo espacio. ],
);
Padding(
padding: EdgeInsets.all(16.0),
child: Text('Hello World!'),
);
Flutter ssssssssss
ssssssssss
Guia de atajos ssssssssss
ssssssssss
Stack Wrap(
Permite colocar sus hijos (Widgets) children: <Widget>[
unos sobre otros y montarse Container(),
básicamente y a la vez, se pueden Container(),
alinear y posicionarse en relación al Container(),
espacio que les da el padre. ],
Stack( );
children: <Widget>[
Container(
width: 100,
height: 100, Table
color: Colors.red, Permite ordenar sus hijos en un formato
),
Container( de tabla, filas y columnas de forma
width: 90, estricta.
height: 90,
color: Colors.green, Table(
),
children: <TableRow>[
],
); TableRow(
children: <Widget>[
Container(
height: 32,
GridView color: Colors.green,
Un listado de widgets que siguen un ),
patrón repetitivo de celdas de forma TableCell(
child: Container(
vertical. height: 32,
GridView.count( width: 32,
crossAxisCount: 2, color: Colors.red,
children: <Widget>[ ),
Container( ),
padding: const EdgeInsets.all(8), Container(
color: Colors.teal[100], height: 64,
child: const Text(“Hi there!”), color: Colors.blue,
),
),
Container(
padding: const EdgeInsets.all(8), ],
color: Colors.teal[600], )
child: const Text('Revolution, they...'), ]
), );
],
);
SingleChildScrollView
A diferencia de los anteriores, acepta un
ListView único hijo cuyo tamaño puede ser superior
Es una lista que permite scroll de Widgets que al tamaño de la pantalla del cliente, si ese es
estarán alineados de forma lineal. Es un el caso, permite realizar el scroll de su
widget muy común para mostrar listados de contenido.
widgets.
SingleChildScrollView(
child: SizedBox(
ListView( height: 4500,
padding: const EdgeInsets.all(8), child: Container(),
children: <Widget>[
Container(),
),
Container(), );
Container(),
],
); CustomScrollView
Similar al widget anterior, pero este está especializado
a trabajar con Widgets que tienen el nombre de
Wrap Slivers, los cuales están estrechamente relacionados a
Similar al Column y Row, pero permite la posición del scroll para realizar su comportamiento
ajustar sus hijos de forma vertical y visual requerido.
horizontal acorde al número de hijos.
Flutter
ssssssssss
ssssssssss
ssssssssss
Guia de atajos ssssssssss
Widgets Comunes Image(
AppBar image: NetworkImage(
'https://flutter.github.io/assets-for-api-
Este widget sigue el diseño de Material docs/assets/widgets/owl.jpg'),
Design para crear una barra superior de );
herramientas.
AppBar(
Scaffold
title: const Text('AppBar Demo'), Implementa un diseño básico de
actions: <Widget>[] material, y da las bases para colocar un
); menú lateral, snack-bars, appbars,
bottom sheets y más elementos.
Scaffold(
Buttons appBar: AppBar(
title: const Text('Sample Code'),
Flutter tiene muchos widgets que generan ),
botones de diferentes tipos y formas. body: const Center(child: Text('5 clicks!')),
floatingActionButton: FloatingActionButton(
onPressed: (){},
Estos son los botones comunes: child: const Icon(Icons.add),
),
ElevatedButton( );
onPressed: null,
child: const Text('Elevated')),
FilledButton(
Text
onPressed: null, Diseñado para mostrar una sola línea de
child: const Text('Filled')), texto con un estilo específico.
Text(
FilledButton.tonal(
'Hello, $_name! How are you?',
onPressed: null,
textAlign: TextAlign.center,
child: const Text('Filled Tonal')),
overflow: TextOverflow.ellipsis,
style: const TextStyle(fontWeight: FontWeight.bold),
OutlinedButton(
);
onPressed: null,
child: const Text('Outlined')),
TextButton( Form y FormField
onPressed: null, Un tipo de contenedor que da el
child: const Text('Text Button’)),
seguimiento a FormFields y permite
// Y sus variaciones con íconos manejar las validaciones.
ElevatedButton.icon(
onPressed: () {},
icon: const Icon(Icons.add_a_photo_outlined),
Pueden ver el ejemplo en la documentación aquí.
label: const Text('Photo')),
Theme
Permite aplicar un tema de estilos a todos
Icon
los widgets hijos y sus descendientes.
Permite mostrar un ícono de material, se
pueden usar otros iconos con paquetes
externos. Aquí está el listado con buscador.
Flutter cuenta con cientos de Widgets, es difícil
Icon(
Icons.audiotrack,
agruparlos todos en una hoja pero les recomiendo esta
color: Colors.green, playlist para conocerlos con ejemplos visuales.
size: 30.0,
);
Image Flutter Widget of the Week
Diseñado para desplegar y mostrar Widget de la semana - Fernando Herrera
imágenes, puedes obtenerla desde los Catálogo de Widgets agrupados
assets, urls, bitarrays y archivos del
dispositivo.
Flutter
ssssssssss
ssssssssss
ssssssssss
Guia de atajos ssssssssss
BuildContext flutter format
NO USAR - Formatea el
código.
Se puede ver como el objeto que tiene la referencia a
format
<DIRECTORY|DART_FILE> Usar este en su lugar dart
format.
cada widget en el árbol de Widgets.
flutter gen-l10n Genera las localizations del
gen-l10n
<DIRECTORY> proyecto de Flutter.
flutter install -d Instala la aplicación en un
install
<DEVICE_ID> dispositivo conectado.
Muestra los logs de una
logs flutter logs
aplicación corriendo.
run flutter run <DART_FILE> Ejecuta la aplicación.
Toma una fotografía del
screenshot flutter screenshot
dispositivo corriendo.
Corre las pruebas de este
flutter test paquete.
test
[<DIRECTORY|DART_FILE>] Usar este en su lugar dart
test.
Actualiza a la siguiente versión
Flutter CLI
upgrade flutter upgrade
de Flutter
Esta es la lista de algunos comandos útiles del CLI
CMD Ejemplo Descripción
Navegar a otra pantalla
flutter build
Hay muchas formas de navegar a diferentes pantallas
build
<DIRECTORY>
Construye la aplicación
en Flutter, pero en general esta es la nativa:
onPressed: () {
flutter channel
Navigator.push(
channel
<CHANNEL_NAME>
Enumera o cambia los canales. context,
MaterialPageRoute(
builder: (context) => const SecondRoute()),
Borra );
clean flutter clean los build/ y .dart_tool/ di }
rectorios
create
flutter create
<DIRECTORY>
Crea un nuevo proyecto Gestores de estado
Manejar el estado de la aplicación es algo de nivel
custom- flutter custom-devices Añade, elimina, lista y resetea
intermedio, hay muchas formas de manejarlo, desde
devices list los dispositivos. third-party y first-party.
Esta es la lista oficial de opciones según Flutter.dev.
flutter devices -d Lista los dispositivos
devices
<DEVICE_ID> conectados
A continuación una breve descripción sobre los más
populares. (En base a experiencia personal)
Herramienta de auto-consulta y
doctor flutter doctor
diagnostico.
Provider: Es el recomendado por Flutter, en lo
personal lo recomiendo para empezar, es robusto, fácil
downgrade flutter downgrade
Hace un downgrade de Flutter
a la versión anterior de aprender y usar. (Flutter Favorite)
Riverpod: Es otro muy bueno y recomendado,
Ejecuta pruebas de Flutter
drive flutter drive
Driver para el proyecto actual. fácilmente testeable.
emulators flutter emulators Lista, lanza y crea emuladores. InheritedWidget & InheritedModel: Esta es la opción
nativa de Flutter, no dependencias de terceros, algo
tediosa a mi parecer, pero es la solución oficial.
Flutter sssssssss
sssssssss
sssssssss
Guia de atajos
BLoC / RX y Flutter BLoC + Cubits: Es un gestor de Dash:
estado basado en Streams y Observables, no es el Es el nombre de la mascota de Flutter, es niña y
más fácil para empezar, pero da mucho control. A originalmente era para Dart. Historia aquí
muchas personas no les gusta por que se escribe
mucho código. (Flutter Farorite)
Stateless Widget
Get_it: Técnicamente no es un gestor de estado, pero Es una pieza de lego que se construye muy rápido y
es muy útil para ir puntualmente a un servicio u objeto no mantiene el estado por si mismo. Flutter sabe
sin necesidad del BuildContext. cuando se de be de volver a dibujar, es recomendado
que en lugar de crear funciones y métodos que
MobX: Es popular y basado en observables y retornan Widget, es mejor crear Clases que extiendan
reacciones. (Flutter Favorite) de estos StatelesWidgets.
GetX: Actualmente el paquete y gestor de estado más Stateful Widget
popular, hace muchas cosas aparte de manejar Es similar al stateless en cuanto a que es un Widget,
estados, tiene navegación, snackbars, pero este permite mantener un estado interno y ciclo
internacionalización, temas, validaciones. Es de vida como su inicialización y destrucción. Muchos
considerado un Framework dentro de Flutter. lo tachan de que jamás se deben de usar pero eso no
Yo en lo personal NO lo recomiendo para aprender es cierto, los stateful básicamente son el corazón de
primero ya que oculta conceptos que son necesarios cualquier animación que suceda.
aprender (Como el BuildContext), pero es muy
poderoso.
HotReload
Pro Tip: Quizá lo más impresionante de Flutter es la capacidad
p
Prueben varios gestores de estado, miren cuál es el que tiene para mantener el estado en pantalla mientras
cambia la apariencia y estructura de los nuevos
c
que más les gusta, sirve y resuelve su necesidad.
Creen su propia opinion sobre ellos y escuchen a la widgets en caliente. Es decir, no hay que bajar la
comunidad, pero al final del día, ustedes tienen la aplicación y volverla a subir para ver los cambios
última palabra, NADIE de la comunidad le dará reflejados en pantalla.
mantenimiento a tu código, por eso deben de saber
cuál es mejor para ti.
Hot Restart - Full-restart
Glosario de palabras clave
p
Es el término que se usa para decir que hay que bajar
la aplicación y volverla a subir, puede ser de dos
formas, reiniciar toda la aplicación levemente o bajarla
completamente y volverla a montar. Este proceso toma
Widget
p
más tiempo que el HotReload.
Inspirado de los componentes de React, los widgets
son como piezas de lego que son usadas para
construir aplicaciones. Main
Child Widget
Toda aplicación de Dart, tiene una función main que
puede ser asíncrona, todo inicia en este punto y desde
h
c
ahí se desprende toda la aplicación de Flutter.
Un child widget no es más que cualquier otro Widget
de Flutter, la mayoría de Widgets en Flutter aceptan un
Método Build de los Widgets
u
child widget, y así se va creando el árbol de Widgets
Todo widget tiene un método build, el cual es lo que se
ejecuta para construirlo, aquí se pueden definir
Context - BuildContext
t El context es un enlace a la ubicación de widgets en el
árbol de Widgets. El “context” es el nombre corto de
BuildContext, el cual es pasado de Widget en Widget
variables, leer el contexto y definir las condiciones de
construcción.
En caso de Stateful widgets, el build context está
disponible de forma global (heredada) dentro de la
dejando su marca y posición. subclase State.
Estado - Gestor de Estado
r c
CheatSheet - Última versión
Son los valores actuales de las variables, clases y Si esta guía te sirve o sirvió, por favor compártela
objetos modificados por la aplicación y el usuario.
con todo el mundo, eso nos ayudaría mucho!
