MDC-101 no Flutter: noções básicas dos componentes do Material Design

1. Introdução

O que são o Material Design e a biblioteca Flutter do Material Design?

O Material Design é um sistema para criar produtos digitais bonitos e arrojados. 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.

A biblioteca do Flutter do Material Design inclui widgets do Flutter que implementam os designs dos componentes do Material Design (MDC, na sigla em inglês) para criar uma experiência do usuário consistente em 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.

Neste codelab, você vai criar uma página de login usando vários componentes do Material Flutter.

O que você vai 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. Ele demonstrará como é possível personalizar componentes para refletir qualquer marca ou estilo usando o Material 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

Este codelab foi atualizado para o Material 3, exceto as capturas de tela. No entanto, eles transmitem as mesmas informações.

Este é o primeiro de quatro codelabs que ensinam você a criar um app para um produto chamado Shrine. Recomendamos que você siga todos os codelabs na ordem correta para realizar as tarefas etapa por etapa. Os codelabs relacionados podem ser encontrados em: MDC-102 no Flutter: estrutura e layout do Material Design MDC-103 Flutter: temas do Material Design com cores, formas, elevação e tipo MDC-104 Flutter: componentes avançados do Material Design

Componentes e subsistemas do Flutter do Material Design neste codelab

• Campo de texto
• Botão
• ondulação de tinta (uma forma visual de feedback para eventos de toque)

Neste codelab, você usará os componentes padrão fornecidos pelo Flutter do Material Design. Você irá aprender a personalizá-los em MDC-103: temas do Material Design usando cor, forma, elevação e tipo.

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

Iniciante Intermediário Proficiente

2. Configurar o ambiente de desenvolvimento do Flutter

Você precisa de dois softwares para concluir este laboratório: o SDK do Flutter e um editor.

É possível executar o codelab usando qualquer um destes dispositivos:

• Um dispositivo físico Android ou iOS conectado ao seu computador e configurado para o modo de desenvolvedor.
• O simulador para iOS, que exige a instalação de ferramentas do Xcode.
• O Android Emulator, que requer configuração no Android Studio.
• Um navegador (o Chrome é necessário para depuração).
• Como um aplicativo para computador Windows, Linux ou macOS. Você precisa desenvolver na plataforma em que planeja implantar. Portanto, se quiser desenvolver um app para um computador Windows, você terá que desenvolver no Windows para acessar a cadeia de builds adequada. Há requisitos específicos de cada sistema operacional que são abordados em detalhes em docs.flutter.dev/desktop.

3. Fazer o download do app inicial do codelab

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

Para receber mais ajuda, consulte Como clonar um repositório do GitHub (link em inglês).

A ramificação correta

Os codelabs de MDC-101 a 104 usam uns aos outros como base. O código concluído no codelab 101 será o código inicial para o 102. O código é dividido em várias ramificações e é possível listar todas elas com este comando:

git branch --list

Para verificar o código concluído, confira a ramificação 102-starter_and_101-complete.

Abrir o projeto e executar o app

1. Abrir o projeto no seu editor favorito.
2. Siga as instruções para "Executar o app" em Get Started: Test drive no editor escolhido.

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

Android	iOS

Vamos analisar o código.

Os TODOs do código incluem números (101, 102 etc.). Eles se referem ao número do codelab em que você implementará a mudança.

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 {
  const LoginPage({Key? key}) : super(key: key);

  @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: const EdgeInsets.symmetric(horizontal: 24.0),
          children: <Widget>[
            const SizedBox(height: 80.0),
            Column(
              children: <Widget>[
                Image.asset('assets/diamond.png'),
                const SizedBox(height: 16.0),
                const Text('SHRINE'),
              ],
            ),
            const SizedBox(height: 120.0),
            // TODO: Remove filled: true values (103)
            // TODO: Add TextField widgets (101)
            // TODO: Add button bar (101)
          ],
        ),
      ),
    );
  }
}

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

• A instrução import permite o uso da biblioteca do Material Design neste 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 ver mais conceitos básicos da IU do Flutter e o que são os widgets, faça um tour do framework dos widgets do Flutter (link em inglês) ou faça o codelab Criar seu primeiro app do Flutter, parte 1.

4. Adicionar widgets TextField

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.

Os campos de texto do Material Design foram atualizados significativamente para melhorar a flexibilidade da marca, com melhorias que contam com uma extensa pesquisa sobre a experiência do usuário (UX) para melhorar a usabilidade e o design visual.

Saiba mais sobre os novos campos de texto no artigo sobre as diretrizes do Material Design.

Esta página é estruturada principalmente com uma ListView, que organiza os filhos em uma coluna deslizante. Vamos inserir os campos de texto abaixo.

Adicionar os widgets TextField

Adicione dois novos campos de texto e um espaço após const SizedBox(height: 120.0).

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  decoration: const InputDecoration(
    filled: true,
    labelText: 'Username',
  ),
),
// spacer
const SizedBox(height: 12.0),
// [Password]
TextField(
  decoration: const 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 (com o pressionamento de tecla: command + s) para realizar uma Recarga dinâmica.

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

Android	iOS

Os recursos do TextField incluem:

• Você pode mudar a aparência do widget TextField facilmente. No campo de decoração, especifique um valor InputDecoration.
• O campo de texto exibe o feedback de toque (ondulação ou "tinta") por padrão.
• O FormField é um widget semelhante que oferece recursos especiais para incorporar campos de formulários.
• Documentação da classe TextField (em inglês).

5. Adicionar botões

Em seguida, adicionaremos dois botões à página de login: "Cancel" e "Next". Usaremos dois tipos de widget de botão: o TextButton e o ElevatedButton.

Escolher entre texto e botões elevados

Por que não exibir apenas dois botões elevados? Cada tipo de botão indica quais ações são mais importantes do que outras.

Um layout precisa conter um único botão em destaque. Isso deixa claro que os outros botões têm menos importância. Esse botão representa a ação que mais desejamos que nossos usuários realizem no app.

Acreditamos que o ideal é não cancelar o login. Como um botão elevado chama a atenção com sua aparência elevada, ele deve ser usado para a ação mais importante. Por comparação, o botão de texto simples à esquerda parece menos chamativo.

Saiba mais sobre a hierarquia de botões no artigo Botões (link em inglês) das Diretrizes do Material Design.

Adicionar a OverflowBar

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

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

A OverflowBar organiza os filhos em uma linha.

Adicionar os botões

Em seguida, adicione dois botões à lista de children do OverflowBar:

    // TODO: Add buttons (101)
    TextButton(
      child: const 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)
    ElevatedButton(
      child: const Text('NEXT'),
      onPressed: () {
    // TODO: Show the next page (101)
      },
    ),

Por que temos blocos vazios para os campos onPressed:?

Se transmitirmos um valor nulo ou não incluirmos o campo (que será nulo, por padrão), os botões serão desativados. Eventos de toque não ofereceriam feedback e não seria possível ter uma boa ideia do comportamento ativado do bloco. O uso de blocos vazios impede que eles sejam desativados.

Para mais informações sobre botões e interações, consulte Como adicionar interatividade no app (link em inglês).

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

Android	iOS

O OverflowBar processa o trabalho de layout para você. Ele posiciona os botões horizontalmente, para que apareçam lado a lado.

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:

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  controller: _usernameController,

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

// TODO: Add TextField widgets (101)
// [Password]
TextField(
  controller: _passwordController,

Editar onPressed

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

    // 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.

O Navigator mantém uma pilha de rotas, semelhante ao UINavigationController no iOS. Ao enviar uma rota, ela é colocada no topo da pilha. Destacar a pilha removerá a rota adicionada mais recentemente. Em app.dart do app, chamar initialRoute: '/login', adiciona a tela de login ao navegador.

Saiba mais sobre trajetos e navegação em Navegação básica.

Na função onPressed: do ElevatedButton, destaque o trajeto 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.

Sobre os botões:

• Além de TextButton e ElevatedButton, há OutlinedButton, FloatingActionButton IconButton e muito mais.

6. Parabéns!

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.

O app MDC-101 concluído está disponível na ramificação 102-starter_and_101-complete.

É possível testar sua versão do app em relação ao app dessa ramificaçã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 no Catálogo de widgets de componentes do Material Design (em inglês).

Como alternativa, acesse MDC-102: estrutura e layout do Material Design para saber mais sobre os componentes abordados no MDC-102 para o 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