MDC-101 Flutter: Conceptos básicos sobre componentes de Material (MDC) (Flutter)

¿Qué son Material Design y los componentes de Material para Flutter?

Material Design es un sistema para crear productos digitales atractivos y llamativos. Mediante la unión de estilo, el desarrollo de la marca, la interacción y el movimiento en un conjunto coherente de principios y componentes, los equipos de productos pueden alcanzar su máximo potencial de diseño.

Los componentes de Material para Flutter (MDC-Flutter) agrupan el diseño y la ingeniería junto con una biblioteca de componentes que crean una experiencia del usuario coherente en todas las apps y plataformas. A medida que evoluciona el sistema de Material Design, se actualizan estos componentes para garantizar una implementación uniforme pixel perfect, conforme a los estándares de desarrollo del frontend de Google. MDC también está disponible para Android, iOS y la Web.

En este codelab, crearás una página de acceso usando varios de los componentes de Flutter de MDC.

Qué compilarás

Este codelab es el primero de cuatro que te guiarán para que crees una app llamada Shrine, una app de comercio electrónico en la que se vende ropa y artículos para el hogar. Demostrará cómo puedes personalizar los componentes para que reflejen cualquier marca o estilo con MDC-Flutter.

En este codelab, crearás una página de acceso para Shrine que contiene lo siguiente:

  • Una imagen del logotipo de Shrine
  • El nombre de la app (Shine)
  • Dos campos de texto: uno para ingresar un nombre de usuario y el otro para la contraseña
  • Dos botones

Android

iOS

Componentes de MDC en este codelab

  • Campo de texto
  • Botón
  • Onda (es una forma visual de respuesta para eventos táctiles)

¿Cómo calificarías tu nivel de experiencia con el desarrollo de Flutter?

Principiante Intermedio Avanzado

Antes de comenzar

A fin de comenzar a desarrollar apps para dispositivos móviles con Flutter, sigue estos pasos:

  1. Descarga e instala el SDK de Flutter.
  2. Actualiza tu PATH con el SDK de Flutter.
  3. Instala Android Studio con los complementos de Flutter y Dart, o tu editor favorito.
  4. Instala un emulador de Android o un simulador de iOS (requiere una Mac con Xcode), o usa un dispositivo físico.

Para obtener más información sobre la instalación de Flutter, consulta Cómo comenzar: instalación. Para configurar un editor, consulta Cómo comenzar: configurar un editor. Cuando instales un emulador de Android, podrás usar las opciones predeterminadas, como un teléfono Pixel 3 con la imagen del sistema más reciente. Se recomienda, pero no es necesario, habilitar la aceleración de VM. Una vez que hayas completado los 4 pasos anteriores, podrás volver al codelab. Para completar este codelab, solo debes instalar Flutter en una plataforma (Android o iOS).

Asegúrate de que el SDK de Flutter esté en el estado correcto

Antes de continuar con este codelab, asegúrate de que el SDK esté en el estado correcto. Si el SDK de Flutter se instaló anteriormente, usa flutter upgrade para asegurarte de que el SDK esté en el estado más reciente.

 flutter upgrade

Si ejecutas flutter upgrade, se ejecutará automáticamente flutter doctor.. Si es una instalación nueva de Flutter y no necesitas actualizar nada, ejecuta flutter doctor de forma manual. Informará si hay dependencias que necesitas instalar para completar la configuración. Puedes ignorar las marcas de verificación que no sean relevantes para ti (por ejemplo, Xcode si no deseas desarrollar para iOS).

 flutter doctor

Preguntas frecuentes

Descarga el proyecto inicial

El proyecto inicial se encuentra en el directorio material-components-flutter-codelabs-101-starter/mdc_100_series.

… o clónalo desde GitHub

Para clonar este codelab desde GitHub, ejecuta los siguientes comandos:

git clone https://github.com/material-components/material-components-flutter-codelabs.git
cd material-components-flutter-codelabs/mdc_100_series
git checkout 101-starter

Cómo configurar tu proyecto

En las siguientes instrucciones, se da por sentado que usas Android Studio (IntelliJ).

Cómo abrir el proyecto

1. Abre Android Studio.

2. Si ves la pantalla de bienvenida, haz clic en Open an existing Android Studio project.

3. Navega al directorio material-components-flutter-codelabs/mdc_100_series y haz clic en Open. Se debería abrir el proyecto. Puedes ignorar cualquier error que veas en Dart Analysis hasta que hayas compilado el proyecto una vez.

4. Si se te solicita, haz lo siguiente:

  • Instala cualquier actualización de plataforma y complemento o FlutterRunConfigurationType.
  • Si el SDK de Dart o Flutter no está configurado, establece la ruta del SDK de Flutter para el complemento de Flutter.
  • Configura los frameworks de Android.
  • Haz clic en "Get dependencies" o "Run 'flutter packages get'".

Luego, reinicia Android Studio.

Cómo ejecutar la app de inicio

En las siguientes instrucciones, se da por sentado que realizas la prueba en un dispositivo o emulador de Android, pero también puedes realizar pruebas en un dispositivo o simulador de iOS si tienes instalado Xcode.

1. Selecciona el dispositivo o emulador. Si el emulador de Android aún no se está ejecutando, selecciona Tools -> Android -> AVD Manager para crear un dispositivo virtual e iniciar el emulador. Si ya existe un AVD, puedes iniciar el emulador directamente desde el selector de dispositivos de Android Studio, como se muestra en el siguiente paso. (Para el simulador de iOS, si aún no se está ejecutando, selecciona Flutter Device Selection -> Open iOS Simulator para iniciarlo en la máquina de desarrollo).

2. Inicia tu app de Flutter:

  • Busca el menú desplegable "Device Selection" de Flutter en la parte superior de la pantalla del editor y selecciona el dispositivo (por ejemplo, iPhone SE o Android SDK built for <versión>).
  • Presiona el ícono de Play ().

Listo. El código de inicio para la página de acceso de Shrine debería ejecutarse en tu simulador. Deberías ver el logotipo de Shrine y el nombre "Shrine" debajo de él.

Android

iOS

Veamos el código.

Widgets en login.dart

Abre login.dart. Debe contener lo siguiente:

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  // TODO: Add text editing controllers (101)
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          padding: EdgeInsets.symmetric(horizontal: 24.0),
          children: <Widget>[
            SizedBox(height: 80.0),
            Column(
              children: <Widget>[
                Image.asset('assets/diamond.png'),
                SizedBox(height: 16.0),
                Text('SHRINE'),
              ],
            ),
            SizedBox(height: 120.0),
            // TODO: Wrap Username with AccentColorOverride (103)
            // TODO: Remove filled: true values (103)
            // TODO: Wrap Password with AccentColorOverride (103)
            // TODO: Add TextField widgets (101)
            // TODO: Add button bar (101)
          ],
        ),
      ),
    );
  }
}

// TODO: Add AccentColorOverride (103)

Ten en cuenta que contiene una sentencia import y dos clases nuevas:

  • La sentencia import incorpora los componentes de Material en este archivo.
  • La clase LoginPage representa toda la página que se muestra en el simulador.
  • La función build() de la clase _LoginPageState controla cómo se crean todos los widgets de nuestra IU.

Para comenzar, agregaremos dos campos de texto a nuestra página de acceso, donde los usuarios ingresan su nombre de usuario y contraseña. Usaremos el widget TextField, que muestra una etiqueta flotante y activa un efecto de onda táctil.

Esta página se estructura principalmente con una ListView, que organiza sus elementos secundarios en una columna desplazable. Coloquemos campos de texto en la parte inferior.

Cómo agregar los widgets de TextField

Agrega dos campos de texto nuevos y un espaciador después de SizedBox(height: 120.0).

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  decoration: InputDecoration(
    filled: true,
    labelText: 'Username',
  ),
),
// spacer
SizedBox(height: 12.0),
// [Password]
TextField(
  decoration: InputDecoration(
    filled: true,
    labelText: 'Password',
  ),
  obscureText: true,
),

Cada campo de texto tiene un campo decoration: que toma un widget InputDecoration. El campo filled: significa que el fondo del campo de texto está levemente rellenado para ayudar a los usuarios a reconocer el área de presión o de objetivo táctil del campo de texto. El valor obscureText: true del segundo campo de texto reemplaza automáticamente la entrada que el usuario escribe con viñetas, y es apropiada para contraseñas.

Guarda tu proyecto (con la combinación de teclas: comando + s), lo que realiza una recarga en caliente.

Ahora debería ver una página con dos campos de texto para el nombre de usuario y la contraseña. Observa la animación de etiquetas flotantes:

Android

iOS

A continuación, agregaremos dos botones a nuestra página de acceso: "Cancel" y "Next". Utilizaremos dos tipos de widgets de botones de MDC: FlatButton (llamado "Text Button" en los lineamientos de Material) y GrainedButton (denominado "Contained Button").

Cómo agregar ButtonBar

Después de los campos de texto, agrega ButtonBar a los elementos secundarios de ListView:

// TODO: Add button bar (101)
ButtonBar(
  // TODO: Add a beveled rectangular border to CANCEL (103)
  children: <Widget>[
    // TODO: Add buttons (101)
  ],
),

ButtonBar organiza sus elementos secundarios en una fila.

Cómo agregar los botones

Luego, agrega dos botones a la lista de children de ButtonBar:

    // TODO: Add buttons (101)
    FlatButton(
      child: Text('CANCEL'),
      onPressed: () {
        // TODO: Clear the text fields (101)
      },
    ),
    // TODO: Add an elevation to NEXT (103)
    // TODO: Add a beveled rectangular border to NEXT (103)
    RaisedButton(
      child: Text('NEXT'),
      onPressed: () {
    // TODO: Show the next page (101)
      },
    ),

Guarda el proyecto. Debajo del último campo de texto, deberías ver dos botones:

Android

iOS

ButtonBar controla el trabajo de diseño por ti. Coloca los botones horizontalmente, para que aparezcan uno al lado del otro, según el relleno del ButtonTheme actual. (Aprenderás más al respecto en el codelab MDC-103).

Cuando se toca un botón, se inicia una animación de ondas de tinta, sin causar ningún otro resultado. Agreguemos funcionalidad a las funciones onPressed: anónimas para que el botón Cancel borre los campos de texto y el botón Next descarte la pantalla:

Cómo agregar TextEditingControllers

A fin de que sea posible borrar los valores de los campos de texto, agregaremos TextEditingControllers para controlar su texto.

Debajo de la declaración de la clase _LoginPageState, agrega los controladores como variables final.

  // TODO: Add text editing controllers (101)
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();

En el campo controller: del primer campo de texto, configura _usernameController:

// [Name]
TextField(
  controller: _usernameController,

En el campo controller: del segundo campo de texto, configura _passwordController:

// [Password]
TextField(
  controller: _passwordController,

Cómo editar onPressed

Agrega un comando para borrar cada controlador en la función onPressed: de FlatButton:

    // TODO: Clear the text fields (101)
    _usernameController.clear();
    _passwordController.clear();

Guarda el proyecto. Ahora, cuando escribas algo en los campos de texto, si presionas Cancel, se borrará cada campo nuevamente.

Este formulario de acceso se ve muy bien. Hagamos que nuestros usuarios avancen al resto de la app.

Quitar

Para descartar esta vista, queremos quitar esta página (lo que Flutter llama una ruta) fuera de la pila de navegación.

En la función onPressed: de RaisedButton, quita la ruta más reciente de Navigator:

        // TODO: Show the next page (101)
        Navigator.pop(context);

Por último, abre home.dart y configura resizeToAvoidBottomInset como false en Scaffold:

    return Scaffold(
      // TODO: Add app bar (102)
      // TODO: Add a grid view (102)
      body: Center(
        child: Text('You did it!'),
      ),
      // TODO: Set resizeToAvoidBottomInset (101)
      resizeToAvoidBottomInset: false,
    );

Esto garantiza que la apariencia del teclado no altere el tamaño de la página principal o sus widgets.

Eso es todo. Guarda el proyecto. Haz clic en "Next".

¡Excelente!

Android

iOS

Esta pantalla es el punto de partida para nuestro próximo codelab, que abordarás en MDC-102.

Agregamos campos y botones de texto, y casi no tuvimos que considerar el código de diseño. Los componentes de Material para Flutter vienen con mucho estilo y se pueden colocar en la pantalla casi sin esfuerzo.

Próximos pasos

Los campos de texto y los botones son dos componentes principales del sistema de Material, pero hay muchos más. También puedes explorar el resto de los widgets de la biblioteca de componentes de Material de Flutter.

Como alternativa, consulta MDC-102: Estructura y diseño de Material Design para obtener información sobre los componentes mencionados en MDC-102 para Flutter.

Siguiente codelab

Pude completar este codelab con una cantidad de tiempo y esfuerzo razonables

Totalmente de acuerdo De acuerdo Neutral En desacuerdo Totalmente en desacuerdo

Me gustaría seguir usando los componentes de Material en el futuro

Totalmente de acuerdo De acuerdo Neutral En desacuerdo Totalmente en desacuerdo