Widgets Material Components

Visuales, funcionales, y motion-rich widgets implementando las Material Design guidelines.

Ver mas widgets en el catálogo de widgets de Flutter.

Estructura de la app y navegación

  • Scaffold

    Implementa la estructura de diseño visual básica de Material Design. Esta clase proporciona API para mostrar drawers, snack bars, y bottom sheets.

    Documentación , Muestras

  • Appbar

    Una barra de aplicaciones (Appbar) de Material Design. Una barra de aplicaciones consiste en una barra de herramientas y potencialmente otros widgets, como TabBar y FlexibleSpaceBar.

    Documentación , Muestras

  • BottomNavigationBar

    Las barras de navegación inferiores facilitan explorar y cambiar entre las vistas de nivel superior en un solo toque. El widget BottomNavigationBar implementa este componente.

    Documentación

  • TabBar

    Un widget de Material Design que muestra una fila horizontal de pestañas.

    Documentación , Muestras

  • TabBarView

    Una vista de página que muestra el widget que corresponde a la pestaña seleccionada actualmente. Normalmente se usa junto con un TabBar.

    Documentación , Muestras

  • MaterialApp

    Un widget de conveniencia que envuelve una cantidad de widgets que comúnmente se requieren para las aplicaciones que implementan Material Design.

    Documentación

  • WidgetsApp

    Una clase de conveniencia que envuelve una serie de widgets que comúnmente se requieren para una aplicación.

    Documentación

  • Drawer

    Un panel de Material Design que se desliza horizontalmente desde el borde de un Scaffold para mostrar enlaces de navegación en una aplicación.

    Documentación

Botones

  • RaisedButton

    Un botón elevado (RaisedButton) de Material Design. Un botón elevado consiste en una pieza rectangular que flota sobre la interfaz

    Documentación

  • FloatingActionButton

    Un botón de acción flotante (FloatingActionButton) es un botón de icono circular que flota sobre el contenido para promover una acción principal en la aplicación. Los botones de acción flotante se usan más comúnmente en el campo Scaffold.floatingActionButton.

    Documentación

  • FlatButton

    Un botón plano (FlatButton) es una sección dibujada en un widget de Componentes de Material que reacciona a los toques rellenándose de color.

    Documentación

  • IconButton

    Un botón de icono es una imagen dibujada en un widget Material que reacciona a los toques rellenando con color (tinta).

    Documentación , Muestras

  • PopupMenuButton

    Muestra un menú cuando se presiona y llama onSelected cuando se descarta el menú porque se seleccionó un elemento.

    Documentación , Muestras

  • ButtonBar

    Un conjunto de botones dispuestos horizontalmente.

    Documentación

Entradas y selecciones

  • TextField

    Tocar un campo de texto (TextField) coloca el cursor y muestra el teclado. El widget TextField implementa este componente.

    Documentación

  • Checkbox

    Las casillas de verificación (Checkbox) permiten al usuario seleccionar múltiples opciones de un conjunto. El widget Checkbox implementa este componente.

    Documentación

  • Radio

    Utilizar los Radio Botones permiten al usuario seleccionar una opción de un conjunto. Utilice los botones de opción para selección exclusiva si cree que el usuario necesita ver todas las opciones disponibles una al lado de la otra.

    Documentación

  • Switch

    Los interruptores de encendido/apagado alternan el estado de una opción de configuración única. El widget Switch implementa este componente.

    Documentación

  • Slider

    Sliders permiten que los usuarios seleccionen entre un rango de valores moviendo el control deslizante.

    Documentación

  • Date & Time Pickers

    Los Date pickers usan una ventana de diálogo para seleccionar una sola fecha en el móvil. Los Time pickers de tiempo usan un diálogo para seleccionar un tiempo individual (en formato horas:minutos) en el móvil.

    Documentación

Dialogs, alerts, y panels

  • SimpleDialog

    Los diálogos simples pueden proporcionar detalles o acciones adicionales sobre un elemento de la lista. Por ejemplo, pueden mostrar iconos de avatares que clarifican el subtexto u otras acciones ortogonales (como agregar una cuenta).

    Documentación

  • AlertDialog

    Las alertas son interrupciones urgentes que requieren reconocimiento e informan al usuario sobre una situación. El widget AlertDialog implementa este componente.

    Documentación

  • BottomSheet

    Bottom sheets se deslizan hacia arriba desde la parte inferior de la pantalla para revelar más contenido. Puede llamar a showBottomSheet () para implementar una hoja inferior persistente o showModalBottomSheet() para implementar una hoja inferior modal.

    Documentación

  • ExpansionPanel

    Los paneles de expansión contienen flujos de creación y permiten una edición ligera de un elemento. El widget ExpansionPanel implementa este componente.

    Documentación

  • SnackBar

    Un mensaje ligero con una acción opcional que se muestra brevemente en la parte inferior de la pantalla.

    Documentación

Mostrando información

  • Image

    Un widget que muestra una imagen.

    Documentación

  • Icon

    Un ícono de Material Design.

    Documentación

  • Chip

    Un ficha (Chip) de Material Design. Las fichas representan entidades complejas en bloques pequeños, como un contacto.

    Documentación

  • Tooltip

    La información sobre herramientas proporciona etiquetas de texto que ayudan a explicar la función de un botón u otra acción de la interfaz del usuario. Ajuste el botón en un widget Tooltip para mostrar una etiqueta cuando el widget se presiona por largo tiempo (o cuando el usuario realiza alguna otra acción apropiada).

    Documentación

  • DataTable

    Las tablas de datos muestran conjuntos de datos sin formato. Suelen aparecer en productos empresariales de escritorio. El widget DataTable implementa este componente.

    Documentación

  • Card

    Una tarjeta de Material Design. Una Card tiene esquinas ligeramente redondeadas y una sombra.

    Documentación

  • LinearProgressIndicator

    Los indicadores de progreso y actividad son indicaciones visuales de la carga de contenido en la aplicación. El widget LinearProgressIndicator implementa este componente. Además, también puede usar el widget CircularProgressIndicator.

    Documentación

  • GridView

    Una lista de cuadrículas consiste en un patrón repetido de celdas dispuestas en un layout vertical y horizontal. El widget GridView implementa este componente.

    Documentación

Layout

  • ListTile

    Una única fila de altura fija que generalmente contiene algo de texto y un ícono inicial o final.

    Documentación

  • Stepper

    Un widget paso a paso de Material Design que muestra el progreso a través de una secuencia de pasos.

    Documentación

  • Divider

    Una línea horizontal con un grosor de un pixel lógico y padding a cada lado.

    Documentación

Ver mas widgets en el catálogo de widgets de Flutter.