101 – Aprenda FLUTTER – LAYOUT em App via WIDGET

Playlist: Curso Grátis de FLUTTER e DART Completo

Coloque um widget

Como você layout um único widget no Flutter? Esta seção mostra como criar e exibir um widget simples. Ele também mostra o código inteiro para um aplicativo Hello World simples.

Em Flutter, são necessários apenas alguns passos para colocar texto, um ícone ou uma imagem na tela.

1. Selecione um widget de layout
Escolha entre uma variedade de widgets de layout com base em como você deseja alinhar ou restringir o widget visível, pois essas características geralmente são passadas para o widget contido.

Este exemplo usa o Center, que centraliza seu conteúdo horizontal e verticalmente.

2. Crie um widget visível
Por exemplo, crie um widget de texto:

content_copy
Texto (‘Hello World’),
Crie um widget de imagem:

content_copy
Image.asset (
  ‘images / lake.jpg’,
  ajuste: BoxFit.cover,
)
Crie um widget de ícone:

content_copy
Ícone(
  Icons.star,
  cor: Colors.red [500],
)
3. Adicione o widget visível ao widget de layout
Todos os widgets de layout possuem um dos seguintes itens:

Uma propriedade-filho se eles pegarem um único filho – por exemplo, Centro ou Contêiner
Uma propriedade filhos se eles pegarem uma lista de widgets – por exemplo, Linha, Coluna, ListView ou Pilha.
Adicione o widget de texto ao widget Center:

content_copy
Centro(
  criança: Texto (‘Hello World’),
)
4. Adicione o widget de layout à página
Um aplicativo Flutter é um widget, e a maioria dos widgets tem um método build (). Instanciar e retornar um widget no método build () do aplicativo exibe o widget.

Aplicativos de material
Para um aplicativo Material, você pode usar um widget Scaffold; Ele fornece um banner padrão, cor de plano de fundo e possui API para adicionar gavetas, lanchonetes e folhas inferiores. Em seguida, você pode adicionar o widget Center diretamente à propriedade body da home page.

lib / main.dart (MyApp)
content_copy
class MyApp estende o StatelessWidget
  @sobrepor
  Construção de Widget (contexto BuildContext)
    retornar MaterialApp (
      título: ‘Flutter layout demo’,
      home: Andaime (
        appBar: AppBar (
          title: Text (‘Flutter layout demo’),
        )
        corpo: Centro (
          criança: Texto (‘Hello World’),
        )
      )
    );
  

 Nota: A biblioteca de materiais implementa widgets que seguem os princípios de design de materiais. Ao projetar sua interface do usuário, você pode usar exclusivamente widgets da biblioteca de widgets padrão ou pode usar widgets da biblioteca de materiais. Você pode misturar widgets de ambas as bibliotecas, customizar widgets existentes ou construir seu próprio conjunto de widgets customizados.