6.2. Widgets en Flutter: estructura básica de una aplicación Flutter

Los widgets son los componentes fundamentales de la interfaz de usuario en Flutter. Describen cómo debería aparecer su interfaz, dada la configuración y el estado actuales. Cada widget es una pieza inmutable de la interfaz de usuario que se infla (es decir, se dibuja) en la pantalla. Cuando realiza cambios en el código del widget, el widget se vuelve a inflar y dibujar. Por lo tanto, los widgets son muy importantes en Flutter y son la base de todo lo que creas.

En Flutter, casi todo es un widget. Desde la propia aplicación hasta botones, tarjetas, barras de navegación, etc. Los widgets están anidados dentro de otros widgets para formar su interfaz de usuario. Por ejemplo, es posible que tengas un widget de barra de navegación que contenga widgets de botones.

Para comprender mejor la estructura de una aplicación Flutter, comencemos con la estructura básica de una aplicación Flutter. Una aplicación Flutter básica consta de un árbol de widgets, que se construye a partir de un único widget raíz. Este widget raíz suele ser un widget de MaterialApp o CupertinoApp, que proporciona muchas funciones básicas de la aplicación, como navegación, temas, etc.

MaterialApp y CupertinoApp

MaterialApp es un widget que encapsula varios widgets que comúnmente necesitan las aplicaciones que implementan Material Design, como Scaffold, AppBar, etc. También configura un Navegador, que puede administrar una pila de widgets de Ruta que puedes "empujar" y "hacer estallar".

CupertinoApp es similar a MaterialApp, pero implementa un diseño específico de Apple. También encapsula varios widgets que suelen necesitar las aplicaciones que implementan el diseño de Apple.

Dependiendo del tipo de aplicación que estés creando, puedes optar por utilizar MaterialApp o CupertinoApp como widget raíz.

Andamio

Después de elegir su widget raíz, el siguiente widget en el árbol suele ser un andamio. Scaffold es un widget conveniente que implementa la estructura visual básica de Material Design. Proporciona un marco para mostrar la barra de aplicaciones, el cajón, la barra de navegación inferior, el botón de acción flotante y el contenido del cuerpo.

Barra de aplicaciones

AppBar es un widget que proporciona una barra de aplicaciones. Puede contener un título, íconos de acción, un ícono de menú y más. Puedes personalizar la AppBar de muchas maneras para adaptarla a tus necesidades.

Cuerpo

El cuerpo de Scaffold es donde coloca el contenido principal de su aplicación. Puedes llenar el cuerpo con cualquier widget que quieras. Normalmente, utilizará widgets como ListView, GridView, Stack, etc. para organizar sus widgets de contenido.

Cajón y barra de navegación inferior

Drawer y BottomNavigationBar son widgets que proporcionan navegación para su aplicación. Drawer proporciona un panel deslizante que puede contener una lista de opciones de menú, mientras que BottomNavigationBar proporciona una barra de navegación en la parte inferior de la pantalla con elementos que se pueden tocar.

Botón de acción flotante

FloatingActionButton es un botón circular que flota sobre el contenido del cuerpo. Normalmente se utiliza para una acción principal en la aplicación, como agregar un nuevo elemento.

Esta es la estructura básica de una aplicación Flutter. Por supuesto, la estructura de su aplicación puede ser mucho más compleja, dependiendo de sus necesidades. Lo importante es comprender que todo en Flutter es un widget y que tu interfaz de usuario se construye anidando widgets dentro de otros widgets.

Widgets sin estado y con estado

Los widgets en Flutter son de dos tipos: sin estado y con estado. Los widgets sin estado son aquellos cuyo estado no puede cambiar con el tiempo, mientras que los widgets con estado son aquellos cuyo estado puede cambiar con el tiempo.

Un widget sin estado se describe mediante una clase que hereda de StatelessWidget. Describe parte de la interfaz de usuario que puede depender de la configuración definida durante la construcción y puede no cambiar con el tiempo.

Un widget Stateful, por otro lado, se describe mediante dos clases: una clase que hereda de StatefulWidget y otra clase que hereda de State. El objeto StatefulWidget es en sí mismo inmutable, pero el objeto State persiste durante la vida útil del widget.

En resumen, la estructura básica de una aplicación Flutter se construye a partir de un árbol de widgets, comenzando con un widget raíz de MaterialApp o CupertinoApp, seguido de un Scaffold que proporciona la estructura visual básica y luego completando el Scaffold con varios widgets como como AppBar, Drawer, BottomNavigationBar, FloatingActionButton y contenido del cuerpo. Cada widget es inmutable y se infla en la pantalla. Cuando realiza cambios en el código del widget, el widget se vuelve a inflar y dibujar. Por lo tanto, los widgets en Flutter son muy importantes y son la base de todo lo que creas.

Siguiente página del libro electrónico gratuito:

75Widgets en Flutter: Widgets básicos en Flutter

3 minutos