Flutter es el conjunto de herramientas de interfaz de usuario de Google para crear hermosas aplicaciones de iOS y Android compiladas de forma nativa a partir de una única base de código. Para crear cualquier aplicación, comenzamos con widgets: el componente básico de las aplicaciones flutter. Los widgets describen cómo debería verse su vista dada su configuración y estado actuales. Incluye un widget de texto, un widget de fila, un widget de columna, un widget de contenedor y muchos más.
Widgets: cada elemento en una pantalla de la aplicación Flutter es un widget. La vista de la pantalla depende completamente de la elección y la secuencia de los widgets utilizados para crear la aplicación. Y la estructura del código de una aplicación es un árbol de widgets.
Categoría de Widgets:
Hay principalmente 14 categorías en las que se dividen los widgets flutter. Se segregan principalmente en función de la funcionalidad que brindan en una aplicación flutter.
- Accesibilidad: estos son el conjunto de widgets que hacen que una aplicación flutter sea más accesible.
- Animación y movimiento: estos widgets agregan animación a otros widgets.
- Activos, imágenes e íconos: estos widgets se encargan de activos como mostrar imágenes y mostrar íconos.
- Asíncrono: proporcionan funcionalidad asíncrona en la aplicación flutter.
- Conceptos básicos: estos son el paquete de widgets que son absolutamente necesarios para el desarrollo de cualquier aplicación flutter.
- Cupertino: Estos son los widgets diseñados por ios.
- Entrada: este conjunto de widgets proporciona funcionalidad de entrada en una aplicación flutter.
- Modelos de interacción: estos widgets están aquí para administrar eventos táctiles y enrutar a los usuarios a diferentes vistas en la aplicación.
- Diseño: este paquete de widgets ayuda a colocar los otros widgets en la pantalla según sea necesario.
- Componentes materiales: este es un conjunto de widgets que siguen principalmente el diseño material de Google.
- Pintura y efectos: este es el conjunto de widgets que aplican cambios visuales a sus widgets secundarios sin cambiar su diseño o forma.
- Desplazamiento: Esto proporciona capacidad de desplazamiento a un conjunto de otros widgets que no se pueden desplazar de forma predeterminada.
- Estilo: se trata del tema, la capacidad de respuesta y el tamaño de la aplicación.
- Texto: Esto muestra texto.
Tipos de widgets:
En términos generales, hay dos tipos de widgets en el aleteo:
- Widget sin estado
- Widget con estado
Ejemplo: el árbol de diseño de la pantalla de la aplicación básica usando widgets sin estado:
Dart
import 'package:flutter/material.dart'; // function to trigger build pricess void main() => runApp(const GeeksforGeeks()); class GeeksforGeeks extends StatelessWidget { const GeeksforGeeks({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Colors.lightGreen, appBar: AppBar( backgroundColor: Colors.green, title: const Text("GeeksforGeeks"), ), // AppBar body: Container( child: const Center( child: Text("Hello Geeks!!"), ), // Center ), // Container ), // Scaffold ); // MaterialApp } }
Ejemplo: el árbol de diseño de la pantalla de la aplicación básica usando widgets con estado. Esto también produce los mismos resultados que el código anterior.
Dart
import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatefulWidget { const MyApp({Key? key}) : super(key: key); @override // ignore: library_private_types_in_public_api _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Colors.lightGreen, appBar: AppBar( backgroundColor: Colors.green, title: const Text("GeeksforGeeks"), ), // AppBar body: const Center( child: Text("Hello Geeks!!"), ), // Container ), // Scaffold );// MaterialApp } }
La descripción de los widgets utilizados es la siguiente:
- Andamio: implementa la estructura de diseño visual del diseño de materiales básicos.
- AppBar: para crear una barra en la parte superior de la pantalla.
- Texto Para escribir cualquier cosa en la pantalla.
- Contenedor: para contener cualquier widget.
- Centro: para proporcionar alineación central a otros widgets.
Producción: