Comandos en Flutter

Comandos en Flutter

flutter clean Este comando elimina los archivos generados automáticamente, como los archivos de compilación y las dependencias instaladas en el directorio de caché de Flutter. Es útil para solucionar problemas de compilación o errores relacionados con la configuración del proyecto.

flutter packages get Este comando actualiza las dependencias del proyecto según las especificaciones del archivo pubspec.yaml. Descarga y actualiza cualquier paquete que falte en el proyecto y lo agrega a la lista de dependencias.

flutter downgrade Este comando permite al usuario bajar la versión de Flutter instalada en su sistema a una versión específica. Puede ser útil si se necesita trabajar en un proyecto específico que requiere una versión de Flutter anterior a la versión actual.

flutter run Este comando compila y ejecuta la aplicación de Flutter en un dispositivo o emulador conectado. Este comando se utiliza comúnmente para probar la aplicación en un dispositivo móvil o emulador durante el desarrollo.

Widgets en Flutter

Widgets de Layout

Container

Container

Este widget se utiliza para crear un contenedor rectangular en la pantalla. Aquí hay un ejemplo:

Container(
  width: 100,
  height: 100,
  color: Colors.blue,
)

Parámetros:

• alignment: la alineación del contenido dentro del contenedor.
• padding: el espacio entre el borde del contenedor y el contenido.
• color: el color del fondo del contenedor.
• decoration: la decoración del contenedor, como el borde, el gradiente y la sombra.
• width: la anchura del contenedor.
• height: la altura del contenedor.
• margin: el espacio entre el contenedor y otros widgets.

Row

Row

Este widget se utiliza para colocar varios widgets en una fila horizontal. Aquí hay un ejemplo:

Row(
  children: [
    Text('Hola'),
    Text('mundo'),
  ],
)

Parámetros:

• children: los widgets que se organizan en filas o columnas.
• mainAxisAlignment: la alineación principal de los widgets, como start, center y end.
• crossAxisAlignment: la alineación cruzada de los widgets, como start, center y end.
• mainAxisSize: el tamaño principal de la fila o columna, como min, max y average.

Column

Column

El widget Column se utiliza para colocar widgets en una columna vertical. Puedes agregar widgets utilizando la propiedad children.

Column(
  children: <Widget>[
    Text('Título'),
    Text('Descripción'),
  ],
)

Parámetros:

• children: los widgets que se organizan en filas o columnas.
• mainAxisAlignment: la alineación principal de los widgets, como start, center y end.
• crossAxisAlignment: la alineación cruzada de los widgets, como start, center y end.
• mainAxisSize: el tamaño principal de la fila o columna, como min, max y average.

Expanded

Expanded

El widget Expanded se utiliza dentro de una fila o columna para hacer que un widget ocupe todo el espacio disponible en esa dirección. Puedes envolver el widget que deseas expandir en un Expanded y configurar su flex para controlar la cantidad de espacio que ocupa.

Column(
  children: <Widget>[
    Expanded(
      flex: 1,
      child: Text('Título'),
    ),
    Expanded(
      flex: 2,
      child: Text('Descripción'),
    ),
  ],
)

Parámetros:

• flex: la cantidad de espacio que debe ocupar el widget en relación con otros Expanded en la misma columna o fila.
• child: el widget que se expande.

SizedBox

SizedBox

El widget SizedBox se utiliza para agregar un espacio en blanco entre widgets, tanto en horizontal como en vertical. Puedes configurar su ancho, alto o ambas dimensiones.

SizedBox(
  width: 200, // ancho del espacio en blanco
  height: 20, // alto del espacio en blanco
)

Parámetros:

• width: el ancho del espacio en blanco.
• height: el alto del espacio en blanco.
• child: un widget opcional para mostrar dentro del espacio en blanco. Si se proporciona un child, el SizedBox ignorará los valores de ancho y alto y se ajustará al tamaño del child.

Wrap

Wrap

El widget Wrap se utiliza para colocar widgets en una fila o columna y envolverlos automáticamente si no hay suficiente espacio disponible en la dirección dada. Puedes agregar widgets utilizando la propiedad children.

Wrap(
  children: <Widget>[
    Text('Etiqueta 1'),
    Text('Etiqueta 2'),
    Text('Etiqueta 3'),
    Text('Etiqueta 4'),
    Text('Etiqueta 5'),
  ],
)

Parámetros:

• children: los widgets que se organizan en filas o columnas.
• alignment: la alineación de los widgets, como start, end y center.
• direction: la dirección de la fila o columna, como horizontal o vertical.
• spacing: el espacio entre los widgets en la dirección de la fila o columna. Si no se proporciona, utiliza un valor predeterminado.
• runSpacing: el espacio entre las líneas de widgets cuando hay varias líneas. Si no se proporciona, utiliza un valor predeterminado.
• crossAxisAlignment: la alineación cruzada de los widgets, como start, center y end.

Flex

Flex

El widget Flex se utiliza para colocar widgets en una fila o columna con un tamaño flexible. Puedes agregar widgets utilizando la propiedad children.

Flex(
  direction: Axis.horizontal,
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Expanded(
      flex: 1,
      child: Text('Widget 1'),
    ),
    Expanded(
      flex: 2,
      child: Text('Widget 2'),
    ),
    Expanded(
      flex: 1,
      child: Text('Widget 3'),
    ),
  ],
)

Parámetros:

• children: los widgets que se organizan en filas o columnas.
• direction: la dirección de la fila o columna, como horizontal o vertical.
• mainAxisAlignment: la alineación principal de los widgets, como start, center y end.
• crossAxisAlignment: la alineación cruzada de los widgets, como start, center y end.
• mainAxisSize: el tamaño principal de la fila o columna, como min, max y average.
• verticalDirection: la dirección de los widgets en la columna, como hacia abajo o hacia arriba.
• textBaseline: la línea de base de los widgets de texto. Solo se aplica si hay al menos un widget de texto en la columna.

ListView

ListView

El widget ListView se utiliza para crear una lista de widgets desplazable en una dirección. Puedes agregar widgets utilizando la propiedad children o mediante el constructor ListView.builder para crear widgets bajo demanda.

ListView(
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Mapa'),
      subtitle: Text('Muestra un mapa'),
    ),
    ListTile(
      leading: Icon(Icons.photo_album),
      title: Text('Álbum de fotos'),
      subtitle: Text('Muestra fotos'),
    ),
    ListTile(
      leading: Icon(Icons.phone),
      title: Text('Teléfono'),
      subtitle: Text('Hacer llamadas'),
    ),
  ],
)

Parámetros:

• children: los widgets que se muestran en la lista.
• scrollDirection: la dirección del desplazamiento, como horizontal o vertical.
• reverse: si se debe invertir la dirección del desplazamiento.
• controller: el controlador de desplazamiento personalizado.
• primary: si el ListView debe ser el widget primario de la aplicación. Si se establece en falso, el ListView se puede desplazar dentro de un widget contenedor.
• physics: la física de desplazamiento, como el desplazamiento suave o el desplazamiento elástico.
• shrinkWrap: si el ListView debe adaptarse al tamaño del contenido o tener un tamaño fijo. Si se establece en verdadero, el ListView se ajustará automáticamente al tamaño de los widgets que contiene. Si se establece en falso, el ListView tendrá un tamaño fijo y se puede desplazar dentro de un widget contenedor. itemBuilder: una función que devuelve un widget para cada ítem en la lista. Se utiliza con el constructor ListView.builder.

GridView

GridView

El widget GridView se utiliza para crear una cuadrícula de widgets en una dirección. Puedes agregar widgets utilizando la propiedad children o mediante el constructor GridView.builder para crear widgets bajo demanda.

GridView.count(
  crossAxisCount: 2,
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Mapa'),
      subtitle: Text('Muestra un mapa'),
    ),
    ListTile(
      leading: Icon(Icons.photo_album),
      title: Text('Álbum de fotos'),
      subtitle: Text('Muestra fotos'),
    ),
    ListTile(
      leading: Icon(Icons.phone),
      title: Text('Teléfono'),
      subtitle: Text('Hacer llamadas'),
    ),
    ListTile(
      leading: Icon(Icons.settings),
      title: Text('Configuración'),
      subtitle: Text('Cambiar ajustes'),
    ),
  ],
)

Parámetros:

• children: los widgets que se muestran en la cuadrícula.
• crossAxisCount: el número de columnas en la cuadrícula.
• scrollDirection: la dirección del desplazamiento, como horizontal o vertical.
• reverse: si se debe invertir la dirección del desplazamiento.
• controller: el controlador de desplazamiento personalizado.
• primary: si el GridView debe ser el widget primario de la aplicación. Si se establece en falso, el GridView se puede desplazar dentro de un widget contenedor.
• physics: la física de desplazamiento, como el desplazamiento suave o el desplazamiento elástico.
• shrinkWrap: si el GridView debe adaptarse al tamaño del contenido o tener un tamaño fijo. Si se establece en verdadero, el GridView se ajustará automáticamente al tamaño de los widgets que contiene. Si se establece en falso, el GridView tendrá un tamaño fijo y se puede desplazar dentro de un widget contenedor. itemBuilder: una función que devuelve un widget para cada ítem en la cuadrícula. Se utiliza con el constructor GridView.builder.

Stack

Stack

El widget Stack se utiliza para apilar widgets uno encima del otro en un orden determinado utilizando la propiedad children.

Stack(
  children: <Widget>[
    Positioned(
      top: 0,
      left: 0,
      child: Text('Arriba a la izquierda'),
    ),
    Positioned(
      bottom: 0,
      right: 0,
      child: Text('Abajo a la derecha'),
    ),
    Positioned.fill(
      child: Image.network('https://www.example.com/image.jpg', fit: BoxFit.cover),
    ),
  ],
)

Parámetros:

• children: los widgets que se apilan en el Stack.
• alignment: la alineación de los widgets en el Stack, como center, topLeft y bottomRight.
• fit: el ajuste del widget si es más pequeño o más grande que el Stack, como none, fitWidth y fitHeight.
• overflow: la acción a tomar si los widgets en el Stack se desbordan, como clip y visible.
• textDirection: la dirección del texto dentro del Stack.
• clipBehavior: la forma en que se deben recortar los widgets que se desbordan, como clip y antiAlias.

________________________________________________________

MaterialApp

## MaterialApp

CupertinoApp

* CupertinoApp

Scaffold

## Scaffold El widget Scaffold es utilizado para crear una pantalla básica de material design que puede contener otros widgets como el appbar, el drawer y el body.

Scaffold(
  appBar: AppBar(
    title: Text('Mi aplicación'),
  ),
  body: Text('Este es el cuerpo de la pantalla'),
)

Parámetros:

• appBar: una barra de aplicación que se muestra en la parte superior de la pantalla.
• body: el contenido principal de la pantalla, que se muestra debajo de la appBar.
• floatingActionButton: un botón de acción flotante que se muestra en la esquina inferior derecha de la pantalla.
• drawer: un menú lateral que se muestra en la parte izquierda de la pantalla.
• bottomNavigationBar: una barra de navegación que se muestra en la parte inferior de la pantalla.
• backgroundColor: el color de fondo de la pantalla.
• resizeToAvoidBottomInset: un booleano que indica si la pantalla debe ajustar su tamaño cuando aparece el teclado en pantalla.
• extendBody: un booleano que indica si el cuerpo de la pantalla debe extenderse debajo de la appBar y la bottomNavigationBar.
• extendBodyBehindAppBar: un booleano que indica si el cuerpo de la pantalla debe extenderse detrás de la appBar.

CupertinoTabScaffold

* CupertinoTabScaffold

NavigationBar

* NavigationBar

Drawer

* Drawer

BottomNavigationBar

* BottomNavigationBar

TabBar

* TabBar

AppBar

* AppBar

TabController

* TabController

PageView

* PageView

Widgets de Texto

Text

Text

El widget Text es utilizado para mostrar texto en una pantalla. Puedes personalizar el estilo del texto utilizando propiedades como fontFamily, fontWeight, fontSize y color.

Text(
  'Hola mundo',
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
)

Parámetros :

• data: el texto a mostrar
• style: estilo del texto, como el tamaño de fuente (fontSize), el peso de fuente (fontWeight), la altura de línea (height), la familia de fuente (fontFamily) y el color del texto (color)
• textAlign: alineación del texto, como left, center, right y justify
• textDirection: la dirección del texto, como ltr (izquierda a derecha) y rtl (derecha a izquierda)
• textScaleFactor: factor de escala del texto
• maxLines: número máximo de líneas que debe tener el texto
• overflow: lo que se debe hacer si el texto es demasiado grande para caber en el espacio disponible, como ellipsis (mostrar puntos suspensivos al final) o clip (cortar el texto)

RichText

Contenido del widget RichText

DefaultTextStyle

Contenido del widget DefaultTextStyle

Widgets de Entrada de Datos

TextField

Contenido del widget TextField

TextFormField

Contenido del widget TextFormField

Checkbox

Contenido del widget Checkbox

Radio

Contenido del widget Radio

Switch

Contenido del widget Switch

Slider

Contenido del widget Slider

DropdownButton

Contenido del widget DropdownButton

CupertinoPicker

Contenido del widget CupertinoPicker

Widgets de Botones

ElevatedButton

Contenido del widget ElevatedButton

TextButton

Contenido del widget TextButton

OutlinedButton

Contenido del widget OutlinedButton

FloatingActionButton

Contenido del widget FloatingActionButton

IconButton

Contenido del widget IconButton

DropdownButton

Contenido del widget DropdownButton

Widgets de Imágenes

Image

Contenido del widget Image

Placeholder

Contenido del widget Placeholder

CircleAvatar

Contenido del widget CircleAvatar

Widgets de Animación

AnimatedContainer

Contenido del widget AnimatedContainer

AnimatedOpacity

Contenido del widget AnimatedOpacity

AnimatedPadding

Contenido del widget AnimatedPadding

AnimatedPositioned

Contenido del widget AnimatedPositioned

Hero

• Hero

AnimatedBuilder

• AnimatedBuilder

Widgets de Iconos

Icon

Contenido del widget Icon

ImageIcon

Contenido del widget ImageIcon

Widgets de Fecha y Hora

DatePicker

Contenido del widget DatePicker

TimePicker

Contenido del widget TimePicker

Widgets de Progreso

CircularProgressIndicator

Contenido del widget CircularProgressIndicator

LinearProgressIndicator

Contenido del widget LinearProgressIndicator

Widgets de Modalidad

AlertDialog

Contenido del widget CircularProgressIndicator

BottomSheet

Contenido del widget BottomSheet

ModalBarrier

Contenido del widget ModalBarrier

PopupMenuButton

Contenido del widget PopupMenuButton

SimpleDialog

Contenido del widget SimpleDialog

Widgets de Decoración

DecoratedBox

Contenido del widget DecoratedBox

BoxDecoration

Contenido del widget BoxDecoration

ClipRect

Contenido del widget ClipRect

ClipOval

Contenido del widget ClipOval

ClipPath

Contenido del widget ClipPath

Widgets de Reproducción de Audio y Video

VideoPlayer

Contenido del widget VideoPlayer

AudioPlayer

Contenido del widget AudioPlayer

Widgets de Mapas

GoogleMaps

Contenido del widget GoogleMaps

MapBox

Contenido del widget MapBox