Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/magnoefren/flutter-notebook


https://github.com/magnoefren/flutter-notebook

dart flutter resume widgets

Last synced: 7 months ago
JSON representation

Awesome Lists containing this project

README 

          
# 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:



```dart

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:

```dart

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.

```dart

Column(

  children: [

    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.



```dart

Column(

  children: [

    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.



```dart

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.



```dart

Wrap(

  children: [

    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.



```dart

Flex(

  direction: Axis.horizontal,

  mainAxisAlignment: MainAxisAlignment.center,

  crossAxisAlignment: CrossAxisAlignment.center,

  children: [

    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.



```dart

ListView(

  children: [

    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.



```dart

GridView.count(

  crossAxisCount: 2,

  children: [

    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.



```dart

Stack(

  children: [

    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



```dart



```



 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.



```dart

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.



```dart

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