10 widgets de Flutter que son útiles

- Andrés Cruz

10 widgets de Flutter que son útiles

Tratar de aprender un nuevo idioma puede ser aterrador y tedioso. Muchas veces, desearíamos saber ciertas características que existían antes. En el artículo de hoy, les hablaré sobre los widgets de Flutter más prácticos que desearía haber conocido antes.

Spacer

Spacer crea un espacio vacío ajustable que ocupa cualquier espacio restante entre los widgets en un contenedor Flex, como una fila o una columna.

Row(
        children: const <Widget>[
          Text('Begin'),
          Spacer(), // Defaults to a flex of one.
          Text('Middle'),
          // Gives twice the space between Middle and End than Begin and Middle.
          Spacer(flex: 2),
          Text('End'),
        ],
      ),

TextButton.icon

Este widget reemplaza la necesidad de usar una fila al crear un botón con un icono. Debe proporcionar un icono y una etiqueta.

TextButton.icon(
              onPressed: () {}, 
              icon: Icon(Icons.home), 
              label: Text('Home')
              ),

Wrap

Muestra sus elementos secundarios horizontal o verticalmente según el valor de dirección proporcionado. Se puede usar en lugar de Gridview. Este widget responde y se adapta a diferentes tamaños de pantalla sin hacer mucho.

Wrap(
                direction: Axis.horizontal,
                alignment: WrapAlignment.start,
                spacing: 2.0,
                runSpacing: 3.0,
                children: [],
              )

AnimatedSwitcher

Este widget anima un nuevo widget en lugar de otro. Proporciona una buena transición que hace que la aplicación sea realmente fluida. Siempre agregue una clave a su widget secundario para asegurarse de que funcione correctamente.

AnimatedSwitcher(
            child: Text(
              '$_count',
              // This key causes the AnimatedSwitcher to interpret this as a "new"
              // child each time the count changes, so that it will begin its animation
              // when the count changes.
              key: ValueKey<int>(_count),
            ),
            duration: Duration(microseconds: 200),
            transitionBuilder: (Widget child, Animation<double> animation) {
              return ScaleTransition(scale: animation, child: child);
            },
          )

SafeArea

Este widget agrega relleno a sus widgets, lo que garantiza que su aplicación no entre en conflicto con el sistema operativo y las funciones de visualización del dispositivo, como la barra de estado.

SafeArea(child: Container())

RefreshIndicator

Toma widgets desplazables como un niño. Cuando el child se desplaza demasiado, un indicador de progreso circular animado se desvanece a la vista y llama a un Future para actualizar el contenido del scrollable.

RefreshIndicator(
child: ListView(), 
onRefresh: () async {}),

RichText

Esto nos permite mostrar texto con diferentes estilos en la misma oración o párrafo. Puede incluir enlaces en línea, texto subrayado, texto en color y mucho más.

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: const <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' world!'),
    ],
  ),
)

Transform

Este widget lleva tu juego de animación a un nivel completamente nuevo. Puede implementar animaciones simples como rotar y escalar a otras más complejas como animaciones 3D y sesgadas. Proporciona constructores con nombres útiles como rotación, escala y traducción para una implementación rápida.

Container(
  color: Colors.black,
  child: Transform(
    alignment: Alignment.topRight,
    transform: Matrix4.skewY(0.3)..rotateZ(-math.pi / 12.0),
    child: Container(
      padding: const EdgeInsets.all(8.0),
      color: const Color(0xFFE8581C),
      child: const Text('Hello there!'),
    ),
  ),
)

InteractiveViewer

La forma más fácil de introducir funciones de zoom, panorámica, arrastre y pellizcos en un widget. Es altamente personalizable según sus necesidades.

InteractiveViewer(
        boundaryMargin: const EdgeInsets.all(20.0),
        minScale: 0.1,
        maxScale: 1.6,
        child: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: <Color>[Colors.orange, Colors.red],
              stops: <double>[0.0, 1.0],
            ),
          ),
        ),
      ),

Flow

Este widget aprovecha el poder de las transformaciones para ofrecer animaciones geniales. Es uno de esos widgets que debes ver en acción para comprender su funcionamiento. Consulte la documentación oficial para obtener más información.

https://api.flutter.dev/flutter/widgets/Flow-class.html

Chip

Es un widget simple que muestra datos simples de manera organizada y hermosa. Tiene varias variantes, como InputChip, ChoiceChip, FilterChip y ActionChip.

Chip(   
avatar: CircleAvatar(     
backgroundColor: Colors.grey.shade800,     
child: const Text('AB'),   ),   
label: const Text('Aaron Burr'), 
)

Artículo original:

https://betterprogramming.pub/10-flutter-widgets-that-come-in-handy-decae69a0f26

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.