Configurar tema
O primeiro passo é configurar o tema (tema: é um conjunto de regras de estilização para o nosso projeto que definem as cores, tamanho de elementos, fontes, tamanho de tipografia, etc. - definimos o tema a partir da linguagem visual criada pela equipe de design.)
- Cores
- Assets = imagens, fontes usadas
- Fonts/TextStyles
Links uteis
Componentizar os widgets da primeira tela
Antes de fazer a tela, é importante ler o mockup e identificar e criar os widgets
- Veja o mockup (um protótipo feito antes do desenvolvimento do trabalho)
- Analise
Ao pensar se vale a pena criar o widget, responda essas perguntas
- Se repete?
- Seria bom estar em uma classe diferente?
Depois de analisar
- Construa os widgets
Montar a primeira tela
Agora com os widgets já feitos, monte a primeira tela. Deve ser utilizado Slivers.
Atente-se a:
- Cores
- Espaçamento
- Estilo de texto
Links úteis:
ThemeData class - material library - Dart API API docs for the ThemeData class from the material library, for the Dart programming language. Use themes to share colors and font styles How to share colors and font styles throughout an app using Themes. Use themes to share colors and font styles
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
Componentizar os widgets da segunda tela
Antes de fazer a tela, é importante ler o mockup e identificar e criar os widgets
- Veja o mockup
- Analise
Ao pensar se vale a pena criar o widget, responda essas perguntas
- Se repete?
- Seria bom estar em uma classe diferente?
Depois de analisar
- Construa os widgets
Montar a segunda tela
Agora com os widgets já feitos, monte a segunda tela.
Atente-se a:
- Cores
- Espaçamento
- Estilo de texto
Links úteis:
Ajeitar responsividade
Links uteis:
Stack class - widgets library - Dart API API docs for the Stack class from the widgets library, for the Dart programming language. LinearGradient class - painting library - Dart API API docs for the LinearGradient class from the painting library, for the Dart programming language.
Creating responsive and adaptive apps It's important to create apps, whether for mobile or web, so that they are responsive to size and orientation changes.
O desafio é reproduzir o mockup abaixo, respeitando o espaçamento, curvas, fontes, etc. Não é necessário usar as mesmas imagens e textos, mas devem estar na mesma proporção.
Deve ser colocado esse linter
| Tela 1 | Tela 2 |
|---|---|
 |
 |
- Componentização
- Fidelidade ao mockup
- Responsividade
- Boas práticas
- Git/GitHub
https://dribbble.com/shots/11779683-PET-ADOPTION-APP/attachments/3403695?mode=media Dart packages flutterando_analysis | Dart Package Lint rules for Flutter and Dart, created for the open source projects of the Flutterando Community.