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
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter