Pular para o conteúdo principal

Página de perfil da Nalla

Boas práticas​

Para facilitar a leitura e manutenção do código, sempre crie os widgets em uma classe própria, isso deixa a widget tree (árvore de widgets) da página muito mais organizada, exemplo:

SingleChildScrollView
└── Column
    ├── PicturesPager    // PageView com as fotos e indicator
    ├── Details          // Bloco com textos dos detalhes
    ├── Food             // Bloco com label e card da ração
    ├── Medication       // Bloco com label e card do antipulgas
    └── Toys             // Bloco com label e avatares dos produtos

Você tem apenas prints disponíveis, então não se apegue tanto aos detalhes, utilize margens, tamanhos, cores e estilos de texto que se aproximem do resultado final, mas não se preocupe em ficar idêntico, o objetivo é praticar e se divertir 😉

Etapa 1​

Crie a estrutura inicial da página, usando Scaffold e um AppBar para o header, centralizando o título.

Resultado esperado:

Etapa 2​

Crie um PageView para servir como galeria das fotos, e mapeie todas as 10 fotos disponíveis para download.

Resultado esperado:

dica

Como fazer as "bolinhas":

Essas bolinhas são conhecidas como "page indicator" (indicador de página), na documentação oficial do PageView você encontra um exemplo utilizando isso, mas se preferir fazer com ajuda do Cursor, utilize o termo "page indicator".

* Lembre que isso muda o estado nesse widget, ou seja, a cada troca de página você precisa atualizar o estado para que as cores das bolinhas reflitam a posição da página selecionada.

Etapa 3​

Adicione o bloco de detalhes.

Resultado esperado:

Etapa 4​

Adicione o bloco de vacinas, que deve ser uma lista horizontal com scroll.

* Repare que o conteúdo deve "sair da tela", sem margens ou bordas brancas, ou seja, você precisa ter uma atenção especial ao uso de padding/margin desse widget.

Resultado esperado:

Etapa 5​

Adicione o bloco de ração, que contém um título e um card personalizado.

* O conteúdo da tela está ficando cada vez maior, então vale a pena utilizar SingleChildScrollView.

Lembre-se de utilizar o atalho para refatorar a árvore de widgets com control + shift + R

Download da imagem:

Resultado esperado:

Etapa 6​

Adicione o bloco de antipulgas.

Download da imagem:

Resultado esperado:

dica

Reaproveitamento de widgets:

O card personalizado é idêntico ao utilizado no bloco de ração, então você pode isolar esse card em um widget próprio, parametrizando os campos dinâmicos (imagem e texto).

Etapa 7​

Adicione o bloco com os brinquedos.

* O conteúdo deve ocupar a largura toda da tela, com os 3 elementos ocupando o mesmo espaço, ótima oportunidade para usar Expanded.

Download das imagens:

Resultado esperado:

Etapa 8​

Coloque ação de clique nos cards e avatares de produtos.

Para abrir links em apps flutter, utilizamos a biblioteca url_launcher.

Essa biblioteca se tornou a alternativa oficial para abertura de links, pois possibilita a configuração de "onde abrir", ou seja, podemos escolher entre abrir no browser, em uma webview, ou usar a configuração padrão, que é o "default da plataforma" -> se tiver algum app que saiba abrir o link, o sistema operacional vai abrir no app, se não tiver, vai abrir no browser.

Adicione a biblioteca no projeto (doc para adicionar libs), e utilize para abrir os links, exemplo:

import 'package:url_launcher/url_launcher.dart';

// adicionar os callbacks de click
onPressed: () {
    // os links em String devem ser convertidos para o objeto Uri
    final Uri uri = Uri.parse(link);
    
    // chama função da biblioteca com a configuração padrão
    launchUrl(uri);
}

Esses são os links dos produtos:

dica

Callbacks de click personalizados:

Alguns componentes oferecem tratamento de cliques através de parâmetros, como o onPressed de um botão, mas outros componentes, como o Card, não tratam cliques. Nesses casos utilizamos o widget GestureDetector como pai do widget que queremos que seja clicável.

Exemplo:

/// um `Text` não tem tratamento de clique, por isso usamos 
/// o GestureDetector como widget pai
GestureDetector(
  child: Text("Me clica!"),
  onTap: () {
    // ação do clique
  },
),