MDC-101 no Flutter: noções básicas dos componentes do Material Design (MDC, na sigla em inglês) (Flutter)

O que são o Material Design e os componentes dele para Flutter?

O Material Design é um sistema para criar produtos digitais bonitos e ousados. Ao combinar estilo, branding, interação e movimento em um conjunto consistente de princípios e componentes, as equipes de produto podem atingir o maior potencial de design.

Os componentes do Material Design para Flutter (MDC-Flutter) combinam design e engenharia com uma biblioteca de componentes que cria uma experiência do usuário consistente em vários apps e plataformas. Conforme o sistema do Material Design evolui, esses componentes são atualizados para garantir uma implementação consistente com perfeição de pixels, respeitando os padrões de desenvolvimento de front-end do Google. Os MDC também estão disponíveis para Android, iOS e para a Web.

Neste codelab, você criará uma página de login usando vários componentes MDC para Flutter.

O que você criará

Este é o primeiro de quatro codelabs que ajudarão você a criar o app Shrine, um app de comércio eletrônico que vende roupas e artigos domésticos. Você verá como personalizar componentes para refletir qualquer marca ou estilo usando o MDC-Flutter.

Neste codelab, você criará uma página de login para o Shrine que contém:

  • A imagem do logotipo do Shrine.
  • O nome do app (Shrine).
  • Dois campos de texto: um para inserir um nome de usuário e outro para uma senha.
  • Dois botões.

Android

iOS

Componentes MDC neste codelab

  • Campo de texto.
  • Botão.
  • Ondulação (que é uma forma visual de feedback para eventos de toque).

Como você classificaria seu nível de experiência em desenvolvimento com o Flutter?

Iniciante Intermediário Proficiente

Antes de começar

Para começar a desenvolver apps para dispositivos móveis com o Flutter:

  1. Faça o download e instale o SDK do Flutter.
  2. Atualize seu PATH usando o SDK do Flutter.
  3. Instale o Android Studio com os plug-ins do Flutter e do Dart ou o editor que preferir.
  4. Instale um emulador Android, um simulador de iOS (exige um Mac com Xcode) ou use um dispositivo físico.

Para ver mais informações sobre a instalação do Flutter, consulte Primeiros passos: instalação (link em inglês). Para configurar um editor, consulte Primeiros passos: configurar um editor (link em inglês). Você pode usar as opções padrão para instalar um emulador Android, como um smartphone Pixel 3 com a imagem do sistema mais recente. Recomendamos ativar a aceleração de VM, embora não seja obrigatório. Após concluir as quatro etapas acima, você poderá retornar ao codelab. Para concluir este codelab, você só precisa instalar o Flutter em uma plataforma (Android ou iOS).

Verificar se o SDK do Flutter está no estado correto

Antes de seguir este codelab, verifique se o SDK está no estado correto. Se o SDK do Flutter já tiver sido instalado anteriormente, use o comando flutter upgrade para garantir que o SDK esteja no estado mais recente.

 flutter upgrade

Executar flutter upgrade executará automaticamente flutter doctor. Se esta for uma nova instalação do Flutter e nenhuma atualização for necessária, execute flutter doctor manualmente. Você receberá uma notificação caso seja necessário instalar alguma dependência para concluir a configuração. Ignore as marcas de seleção que não forem relevantes para você (por exemplo, as do Xcode se você não pretende desenvolver para iOS).

 flutter doctor

Perguntas frequentes

Fazer o download do projeto inicial

O projeto inicial está localizado no diretório material-components-flutter-codelabs-101-starter/mdc_100_series.

... ou clone-o do GitHub

Para clonar este codelab do GitHub, execute estes 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

Configurar seu projeto

As instruções a seguir presumem que você esteja usando o Android Studio (IntelliJ).

Abrir o projeto

1. Abra o Android Studio.

2. Se a tela de boas-vindas for exibida, clique em Open an existing Android Studio project.

3. Navegue até o diretório material-components-flutter-codelabs/mdc_100_series e clique em "Open". O projeto será aberto. Você pode ignorar qualquer erro exibido no Dart Analysis antes de criar o projeto pela primeira vez.

4. Se solicitado:

  • Instale todas as atualizações de plataforma e de plug-ins ou do FlutterRunConfigurationType.
  • Se o SDK do Dart ou do Flutter não estiver configurado, defina o caminho do SDK do Flutter para o plug-in do Flutter (link em inglês).
  • Configure os frameworks do Android.
  • Clique em "Get dependencies" ou em "Run ‘flutter packages get'".

Em seguida, reinicie o Android Studio.

Executar o app inicial

As instruções a seguir presumem que você está testando em um dispositivo ou emulador Android, mas também é possível testar em um simulador ou dispositivo iOS com o Xcode instalado.

1. Selecione o dispositivo ou emulador. Caso o emulador Android ainda não esteja em execução, selecione Tools -> Android -> AVD Manager para criar um dispositivo virtual e iniciar o emulador. Se você já tiver um AVD, é possível iniciar o emulador diretamente do seletor de dispositivos no Android Studio, como mostrado na próxima etapa. Para o iOS Simulator, se ele ainda não estiver em execução, inicie o simulador na máquina de desenvolvimento selecionando Flutter Device Selection -> Open iOS Simulator.

2. Inicie o app do Flutter:

  • Localize o menu suspenso "Flutter Device Selection" na parte superior da tela do editor e selecione o dispositivo (por exemplo, iPhone SE ou o SDK do Android criado para <versão>).
  • Pressione o ícone Play ().

Pronto! O código inicial da página de login do Shrine será executado no simulador. Você verá o logotipo do app com o nome "Shrine" abaixo.

Android

iOS

Vamos analisar o código.

Widgets em login.dart

Abra o arquivo login.dart. Ele conterá o código a seguir:

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)

Observe que ele tem uma instrução import e duas novas classes:

  • A instrução import importa os componentes do Material Design para este arquivo.
  • A classe LoginPage representa a página inteira exibida no simulador.
  • A função build() da classe _LoginPageState controla como todos os widgets da IU são criados.

Para começar, adicione dois campos de texto à página de login para os usuários digitarem o nome de usuário e a senha. Use o widget TextField, que exibe uma etiqueta flutuante e ativa uma ondulação de toque.

Esta página é estruturada principalmente com uma ListView, que organiza os filhos em uma coluna deslizante. Vamos colocar os campos de texto na parte inferior.

Adicionar os widgets TextField

Adicione dois novos campos de texto e um espaço após 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 um dos campos de texto tem um campo decoration: que recebe um widget InputDecoration. O campo filled: significa que o segundo plano do campo de texto será preenchido levemente para facilitar o reconhecimento da área de toque do campo de texto. O valor obscureText: true do segundo campo de texto substituirá automaticamente a entrada que o usuário digitar por marcadores, o que é o padrão adequado para senhas.

Salve seu projeto (pressionando "Command" + S) para fazer uma atualização dinâmica.

Você verá uma página com dois campos de texto "Username" e "Password". Veja a animação de etiquetas flutuantes:

Android

iOS

Em seguida, adicionaremos dois botões à página de login: "Cancel" e "Next". Usaremos dois tipos de widget de botão dos MDC: o FlatButton (conhecido como "Text Button" nas Diretrizes do Material Design para botões de texto) e o RaisedButton (conhecido como "Contained Button" para botões contidos).

Adicionar a ButtonBar

Depois dos campos de texto, adicione uma ButtonBar aos filhos da ListView:

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

A ButtonBar organiza os filhos em uma linha.

Adicionar os botões

Em seguida, adicione dois botões à lista de children da 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)
      },
    ),

Salve o projeto. No último campo de texto, você verá dois botões:

Android

iOS

A ButtonBar faz a disposição do layout por você. Ela posiciona os botões horizontalmente para que sejam exibidos lado a lado, de acordo com o preenchimento do ButtonTheme atual. Você aprenderá mais sobre isso no codelab MDC-103.

Tocar em um botão exibe uma animação de ondulação com tinta, sem que haja qualquer outra ação. Vamos adicionar funcionalidades às funções anônimas onPressed: para que o botão "Cancel" limpe os campos de texto e o botão "Next" passe para outra tela:

Adicionar TextEditingControllers

Adicionaremos TextEditingControllers para controlar o texto dos campos e facilitar a limpeza deles.

Abaixo da declaração da classe _LoginPageState, adicione os controladores como variáveis final.

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

No campo controller: do primeiro campo de texto, defina o _usernameController:

// [Name]
TextField(
  controller: _usernameController,

No campo controller: do segundo campo de texto, defina o _passwordController:

// [Password]
TextField(
  controller: _passwordController,

Editar onPressed

Adicione um comando para limpar cada controlador na função onPressed: do FlatButton:

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

Salve o projeto. Agora, quando você digitar algo nos campos de texto e pressionar "Cancel", os campos serão limpos novamente.

O formulário de login está ficando bom! Vamos levar os usuários para o restante do app Shrine.

Destacar

Para dispensar essa visualização, queremos destacar (ou remover) esta página (conhecido como uma rota no Flutter) da pilha de navegação.

Na função onPressed: do IncrementedButton, destaque a rota mais recente do Navigator:

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

Para finalizar, abra o arquivo home.dart e defina resizeToAvoidBottomInset como false no 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,
    );

Isso garantirá que exibir o teclado não mudará o tamanho da página inicial nem dos widgets.

Pronto! Salve o projeto. Experimente clicar em "Next".

Parabéns!

Android

iOS

Essa tela é o ponto de partida e será abordada no nosso próximo codelab, o MDC-102.

Adicionamos campos de texto e botões, sem precisarmos nos preocupar com o código do layout. Os componentes do Material Design para Flutter têm muito estilo e podem ser exibidos na tela sem muito esforço.

Próximas etapas

Os campos de texto e os botões são dois componentes principais do sistema do Material Design, mas há muito mais! Você também pode explorar o restante dos widgets na biblioteca de componentes do Material Design do Flutter (link em inglês).

Como alternativa, consulte MDC-102: estrutura e layout do Material Design para saber mais sobre os componentes abordados no MDC-102 do Flutter.

Próximo codelab

Este codelab exigiu esforço e tempo normais para ser concluído

Concordo totalmente Concordo Não concordo nem discordo Discordo Discordo totalmente

Quero continuar usando os componentes do Material Design no futuro

Concordo totalmente Concordo Não concordo nem discordo Discordo Discordo totalmente