Flutter: estilizando e reproduzindo layouts

Começando o projeto - Apresentação

Boas-vindas à mais um Curso da formação de Flutter! Meu nome é Matheus e vou te acompanhar durante todo o processo desse curso. Eu sou um homem branco com cabelos castanhos escuros curtos e sobrancelhas grossas.

Neste curso vamos aprender a implementar um projeto do Figma e a customizar widgets. Também revelarei as técnicas que utilizo para facilitar o processo de transformar um layout em código.

Qual projeto iremos desenvolver? Vamos basear nossa aplicação no projeto do Figma montado pela equipe de Design, disponível neste link. Ele consiste em uma interface de internet banking. O nosso cliente é uma empresa fictícia chamada Alubank que está renovando a sua interface de pessoa usuária. A nossa tarefa como pessoa desenvolvedora consiste em transformar todo esse layout em código. Para isso, aprenderemos a criar temas, customizar cores e widgets, trabalhar com fontes customizadas e técnicas de organização do código.

Para sermos capazes de acompanhar este curso, é importante que tenhamos toda a área de desenvolvimento montada:

• Flutter na versão 3.0.5 instalado;
• VS Code, Android Studio ou outra IDE de desenvolvimento mobile instalada. Caso tenha um Mac, utilize o XCode.

Atenção: procure utilizar a versão do Flutter indicada para que não haja conflitos e erros de código.

Tenho certeza de que esse curso vai te encantar. Nos vemos no próximo vídeo!

Começando o projeto - Planejando o layout

Logo após receber um arquivo do Figma, é interessante separar o seu conteúdo em seções grandes. Acessando o Figma do nosso projeto, veremos na barra lateral esquerda quatro seções pré-definidas representadas por um ícone de quadrado em linhas pontilhadas: de cima para baixo, temos "Pontos da conta", "Ações da conta", "Atividades recentes" e "Header" (cabeçalho, em português). Separaremos os widgets contidos em cada uma dessas seções.

Na seção "Header" existem três widgets que constituem a estrutura mínima para que o cabeçalho possa existir:

• na parte superior, levemente posicionado à esquerda, temos o widget com um campo de texto que contém o saldo disponível na conta;
• no canto direito do saldo, temos um widget de ícone.
• logo abaixo do saldo e do ícone, temos um widget com dois textos que contém o balanço da conta exibindo valores de saída, à esquerda, e de entrada, à direita;

Vamos codar esse cabeçalho. Primeiro, acessaremos o terminal da nossa máquina. Ele já deve estar configurado para acessar a pasta em que criaremos o aplicativo flutter. No meu caso, estou utilizando o caminho "~/Documents/work/flutter/curso". Dentro do terminal digitaremos o comando flutter create junto ao nome de nossa aplicação.

flutter create alubank

Após pressionarmos "Enter" os arquivos da nossa aplicação flutter serão gerados. Após esse processo, acessaremos o Vs Code, e em seu interior clicaremos em "Arquivo > Abrir pasta" (ou "File > Open folder", se a sua IDE estiver em inglês). Dentro da caixa aberta pela IDE abriremos a pasta em que o flutter foi instalado — no meu caso, o acesso será feito por meio do caminho "Documents > work > flutter > curso > alubank". Em seguida clicaremos em "Abrir" (ou "Open").

Com o projeto aberto, prepararemos a nossa área de desenvolvimento abrindo o emulador. No canto inferior direito do VS Code, clicaremos em uma caixa com o nome do nosso sistema operacional Neste momento um dropdown aparecerá no meio da tela com opções de emulador. Escolheremos a opção "Start Pixel5s (mobile emulator)".

Observação: o caminho para abrir o emulador pode variar em outras IDEs.

Enquanto o emulador carrega, vamos deslocá-lo para o canto direito, afim de organizar o ambiente de desenvolvimento mantendo o espaço para código no meio.

No explorador à esquerda, acessaremos o arquivo main.dart dentro da pasta "lib". Nele apagaremos todo o conteúdo a partir da seção class MyApp extends StatelessWidget, na linha 7. Criaremos a nossa aplicação do zero criando um novo StatelessWidget que gerará um class que copiará o nome do arquivo, ou seja, class Main. Trocaremos o "Main" pelo nome da nossa aplicação, "Alubank". Subindo para a seção void main() substituiremos o nome da constante MyApp também para Alubank.

Dica: No VS Code podemos utilizar a extensão IntelliSense disponível neste link para facilitar a criação dos nossos widgets e a digitação de códigos no geral, especialmente daqueles que são muito longos. Caso você utilize outra IDE, busque por outros plugins de autocomplete compatíveis.

import 'package:flutter/material.dart';

void main() {
    runApp(const Alubank());
}

class Alubank extends StatelessWidget {
const Alubank({ Key? key }) : super(key: key);

    @override
    Widget build(BuildContext context){
        return Container();
    }
}

Dentro do return existe um Container que vamos transformar em MaterialApp que receberá os seguintes parâmetros,title e home.

• O title possuirá o título "Alubank" que aparecerá principalmente nas buscas pelo navegador;
• O home será a tela inicial da nossa aplicação. Não a temos ainda por isso vamos declará-la em branco.

import 'package:flutter/material.dart';

void main() {
    runApp(const Alubank());
}

class Alubank extends StatelessWidget {
const Alubank({ Key? key }) : super(key: key);

    @override
    Widget build(BuildContext context){
        return MaterialApp(
            title: 'Alubank',
            home: ,
        );
    }
}

Observação: é muito importante separarmos os arquivos do nosso projeto para facilitar a sua busca.

Criaremos a home acessando o navegador e posicionando o cursor em cima da pasta "lib". Ali daremos um clique e selecionaremos "Nova Pasta" (ou "New Folder"). Daremos à essa nova pasta o nome "screens" — nela ficarão todas as telas (ou conjunto de widgets) que serão exibidas para a pessoa usuária.

O Figma possui somente uma tela, por isso criaremos apenas uma "screen". Dentro dela haverão vários modelos, widgets e outras ferramentas a serem utilizadas.

Ainda no navegador, clicando na pasta "screens" recém-criada, selecionaremos "Novo Arquivo" e daremos a ele o nome home.dart. Assim como fizemos com a classe Alubank, criaremos um flutter StatelessWidgtet no interior de main.dart.

Dica: se você estiver utilizando a extensão IntelliSense do VS Code, basta digitar o comando fstless e, ao dar "Enter", a extensão escreverá todo o código de configuração do StatelessWidget.

class Home extends StatelessWidget {
const Home({ Key? key }) : super(key: key);

    @override
    Widget build(BuildContext context){
        return Container();'
    }
}

O sistema dará um erro enquanto aguarda a importação do StatelessWidget. Faremos essa importação clicando no comando StatelessWidget e dando "Enter". Na caixa aberta pelo sistema selecionaremos a opção "import library 'package:flutter/material.dart'" e dessa forma o comando de importação aparecerá automaticamente.

import 'package:flutter/material.dart';

O próximo passo é retornar na seção Widget build um Scaffold ao invés de um Container.

class Home extends StatelessWidget {
const Home({ Key? key }) : super(key: key);

    @override
    Widget build(BuildContext context){
        return Scaffold();'
    }
}

Salvaremos o código de home, retornaremos o arquivo main e importaremos a home dentro da propriedade home do MaterialApp.

// Trecho de código omitido

    @override
    Widget build(BuildContext context){
        return MaterialApp(
            title: 'Alubank',
            home: Home(),
        );
    }
}

Salvaremos o código de main e, mantendo este arquivo aberto, rodaremos a aplicação dentro do emulador. Para isso clicaremos no ícone "Play" no canto superior direito da IDE.

Observação: o carregamento do emulador pode demorar um pouco dependendo das configurações de cada máquina, portanto vamos deixá-lo rodando até carregar por completo.

Após o carregamento do emulador, fecharemos os painéis abertos pelo VS Code e voltaremos ao arquivo home.dart. Vamos entender o motivo de usarmos o Scaffold: se o trocarmos de volta para Container, salvarmos e reiniciarmos a aplicação, a tela fica preta. Isso ocorre pois o Container não possui algumas informações de estilização do próprio Material Design que o Scaffold possui. O Scaffold permite que adicionemos outros widgets e que alguns deles — como por exemplo o widget de texto — herdem essas estilizações.

Se voltarmos o código para Container, digitarmos e salvarmos o texto child: Text('Olá mundo'), veremos no emulador uma tela preta com esse texto exibido em fonte e cores totalmente desconfiguradas. Se voltarmos a digitar Scaffold e informarmos em seu interior um body: Text('Olá mundo') salvando esse código em seguida, veremos no emulador uma tela branca com o nosso texto exibido na fonte padrão do Material Design para Android, portanto já possui uma estilização.

Esta será a nossa estrutura básica. A seguir montaremos a estrutura básica do cabeçalho. Vamos lá!

Começando o projeto - Estruturando o esqueleto da aplicação

Criaremos a seguir a nossa seção de cabeçalho, o header. Para isso, acessaremos o explorador e, posicionando o cursor em cima da pasta "lib", criaremos outra pasta chamada "components" através de um clique do mouse. Nela serão armazenados todos os widgets que serão utilizados em nossa aplicação. Daremos um clique na nova pasta "components" para assim criar uma pasta em seu interior, de nome "sections". Dentro dessa última criaremos um arquivo chamado header.dart.

No interior de header.dart adicionaremos o StatelessWidget e faremos a sua importação, clicando em cima desse código e posteriormente selecionando na caixa aberta pelo sistema a opção "import library 'package:flutter/material.dart'".

import 'package:flutter/material.dart'

class Header extends StatelessWidget {
cont Header({ Key? Key }) : super(key: key);

    @override
    Widget build(BuildContext context){
        return Container();
    }
}

Na seção do Container vamos inserir os widgets principais: dois textos e um ícone. Para isso acrescentaremos um child que poderá receber somente um widget.

Temos três widgets para inserir, assim sendo devemos realizar a estruturação pensando nos aspectos visuais. Primeiro pensaremos na linha: ela conterá, no canto esquerdo, os dois widgets de texto um abaixo do outro, e no canto direito o ícone. Portanto nesse child adicionaremos um Row que por sua vez possuirá um children com o tipo de lista <Widget>. Dentro da lista adicionaremos um Column e um Icon que receberá o Icon de account_circle. Adicionaremos vírgulas para melhor indentar o código.

class Header extends StatelessWidget {
cont Header({ Key? Key }) : super(key: key);

    @override
    Widget build(BuildContext context){
        return Container(
            child: Row(
                children: <Widget>[Column(), 
                Icon(Icons.account_circle)],
            ),
        );
    }
}

Adicionaremos também no Column as duas colunas de texto, criando um children que possuirá uma nova lista de tipo <Widget>, e esta por sua vez receberá dois Texts: um que possui o valor monetário de "$1000.00" e outro que possui o texto "Balanço disponível".

Importante: se adicionarmos o sinal de$ dentro de um texto o sistema entende que criamos uma interpolação, ou seja, entende que vamos inserir nele uma variável. Para o sistema não se confundir, adicionaremos uma barra invertida, transformando o comando em \$1000.00.

    // Trecho de código omitido
    Widget build(BuildContext context){
        return Container(
            child: Row(
                children: <Widget>[
                    Column(children: <Widget>[
                        Text('\$1000.00'),
                        Text('Balanço disponível'),
                        ],), 
                    Icon(Icons.account_circle)
                ],
            ),
        );
    }
}

Salvaremos o código e importaremos esse Header em nosso arquivo Home. Acessaremos este último através do navegador pelo caminho "lib > screens > home.dart". Na seção return Scaffold substituiremos o conteúdo do body de Text('Olá mundo') para Header(). Em seguida salvaremos o nosso código.

class Home extends StatelessWidget {
cont Home({ Key? Key }) : super(key: key);

    @override
    Widget build(BuildContext context){
        return Scaffold(body: Header(),);
        }
    }

Configuramos os três widgets principais: dois de texto e um de ícone. Nosso próximo passo será a estilização desse cabeçalho.

Sobre o curso Flutter: estilizando e reproduzindo layouts

O curso Flutter: estilizando e reproduzindo layouts possui 165 minutos de vídeos, em um total de 55 atividades. Gostou? Conheça nossos outros cursos de Flutter em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Começando o projeto
• Estilizando Widgets
• Criando novos componentes
• Implementando temas
• Implementando a nova seção
• Estilizações finais: ações e tipografia