Flutter: Material Design - Lição I

Entendendo o conceito de Material Design

O que é o Material Design?

"Material Design" é uma "linguagem de design" desenvolvida pelo Google. "Widgets de Material Design" são elementos da interface do usuário que têm uma aparência distinta para eles. Eles podem ser usados em várias plataformas, para dispositivos móveis e na Web, mas normalmente são usados em aplicativos da Web do Google, bem como no sistema operacional Android.

Os widgets de Material Design podem ser usados no iOS, embora sejam menos comuns. Os engenheiros do iOS costumam usar os controles Cocoa Touch da Apple para obter aplicativos rapidamente. Esses controles são usados em todo o sistema operacional iOS.

Assim, quando alguém cria um aplicativo Flutter, é importante lembrar de ser "amigável" para os usuários do Android e do iOS, pois cada acampamento está acostumado a uma aparência comum. Normalmente, muitas empresas criam um design personalizado para seus aplicativos que podem ser usados em vários sistemas operacionais. Neste curso, vamos personalizar fortemente os widgets de Material Design oferecidos pela Flutter para conseguir isso.

Vamos começar a codificar!

MaterialApp

O MaterialApp é "um widget de conveniência que envolve vários widgets que normalmente são necessários para aplicativos de design de material".
"Widgets" no Flutter nada mais são do que algo que é renderizado na tela, como um botão, um pedaço de texto, uma imagem etc.
 
Usaremos a propriedade "home" de MaterialApp para especificar o ponto de entrada principal ou "route" no aplicativo. Uma "rota" no Flutter é simplesmente uma única tela.

Scaffold

O Scaffold é um widget de conveniência que “implementa a estrutura de layout visual do design básico do material.” Basicamente, uma tela em branco para o seu aplicativo. Usaremos a propriedade appBar.

AppBar

"Uma barra de aplicativos consiste em uma barra de ferramentas e potencialmente outros widgets".  Em sua forma mais simples, é uma barra de navegação que aparece na parte superior da tela. Podemos adicionar outros elementos, como um botão de voltar ou ações, mas neste caso vamos adicionar apenas um texto. Veja o diagrama abaixo para opções de personalização.

Text

Um widget que renderiza texto estilizado. O widget de texto exibe uma string de texto com estilo único. A string pode quebrar várias linhas ou todas podem ser exibidas na mesma linha, dependendo das restrições do layout.

import 'package:flutter/material.dart';

void main() {
return runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Hello, World!"),
),
),
));
}

Objetivos da lição

1. Adicione três caixas coloridas na tela.
2. Deixe cada caixa de cima para baixo, com cada item esticado.

Container

"Um widget de conveniência que combina widgets comuns de pintura, posicionamento e dimensionamento." É basicamente o “<div>” do Flutter.

Cada container tem um elemento "filho" children, o que nos permite aninhar elementos.

Vamos especificar uma "decoração" decoration, permitindo-nos "colorir atrás de children" para definir a cor do plano de fundo. Nós atribuímos um BoxDecoration. "A classe BoxDecoration fornece uma variedade de maneiras de desenhar uma caixa."

"Color" é uma classe que fornece cores predefinidas para nós. Cada membro é static e const. Os valores "estáticos" estão disponíveis na própria classe, em vez de em uma instância de classe. "Const" é um valor que é definido em tempo de compilação e não pode ser alterado quando o aplicativo está em execução.

Column

“Um widget que exibe seus filhos em uma matriz vertical.” Vamos adicionar três contêineres para mostrar como eles são pintados.

Nota: Em termos de layout, “o container tenta, em ordem: respeitar o alinhamento, dimensionar-se para o filho, honrar a largura, a altura e as restrições, expandir para caber no pai, ser o menor possível”. (fonte)

mainAxisAlignment e crossAxisAlignment

Essas propriedades da coluna são usadas para controlar como o conteúdo é alinhado ao longo do "eixo principal" da coluna, que é uma linha vertical.

Podemos mudá-lo para "end" ou "space evenly" e ver o que acontece.

crossAxisAlignment é usado para controlar como o conteúdo é alinhado ao longo do eixo oposto. Então, como estamos usando uma coluna, e seu eixo principal é vertical, o "eixo cruzado" será perpendicular ou horizontal.

Portanto, se definirmos crossAxisAlignment como "stretch", um valor comum, cada filho da coluna será esticado.

Vejamos o nosso código:

void main() {
return runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("Hello, World!")),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
decoration: BoxDecoration(
color: Colors.red,
),
child: Text("One"),
),
Container(
decoration: BoxDecoration(
color: Colors.green,
),
child: Text("Two"),
),
Container(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text("Three"),
),
],
)
)
));
}

É isso por enquanto!