Widgets essenciais do flutter

O flutter funciona combinando widgets como se fossem legos para conseguir um determinado layout. Neste artigo, irei apresentar alguns widgets que permitem construir uma variedade de telas quando combinados.

Widgets essenciais

Text

Text renderiza um texto na tela, onde o texto pode ser dinâmico ou estático. É possível customizar o estilo, mudando várias propriedades como fonte, peso, além de definir como o texto será tratado em caso de overflow, se irá dar wrap entre outros.

Exemplo com texto estático

Text('olá mundo');

Exemplo com dado dinâmico

const greeting = (name) => 'Olá, $name';

Text(greeting('Maria'));

Container

O Container é um widget que possui apenas um filho e pode ter diferentes propriedades, como color que pode ser usada para pintar o fundo e decoration que nos permite criar bordas, é possível usar color ou decoration, um de cada vez.

Exemplo usando cor de fundo:

Container(
    color: Colors.red,
  child: Text('Container'),
);

Exemplo usando decoration para definir a cor de fundo:

Container(
        decoration: BoxDecoration(
          color: Colors.red,
        ),
        child: const Text('Container'),
);

SizedBox

SizedBox é um widget que nos permite criar um widget com altura, largura ou ambos fixos. É um widget que tem apenas uma criança que é opcional.

SizedBox(height: 6);

Padding

O Padding é um widget que cria espaço dentro de um widget, similar ao padding do CSS.

Padding(
    padding: EdgeInsets.all(16),
    child: Text('Widget A'),
);

Column

Column é um widget que empilha os widgets verticalmente. É um widget do tipo flex, então toma todo o espaço que tiver sobrando.

Exemplo de uso:

Column(
  children: [
        Container(color: Colors.red),
        Container(color: Colors.blue),
    ],
);

Exemplo mais completo:

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 620,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Container(
            height: 150,
            alignment: Alignment.center,
            child: const Text('Widget A'),
          ),
          const Divider(
            height: 1,
            color: Colors.black,
          ),
          Container(
            height: 150,
            alignment: Alignment.center,
            child: const Text('Widget B'),
          ),
          const Divider(
            height: 1,
            color: Colors.black,
          ),
          Container(
            height: 150,
            alignment: Alignment.center,
            child: const Text('Widget C'),
          ),
          const Divider(
            height: 1,
            color: Colors.black,
          ),
          Container(
            height: 150,
            alignment: Alignment.center,
            child: const Text('Widget D'),
          ),
          const Divider(
            height: 1,
            color: Colors.black,
          ),
        ],
      ),
    );
  }
}

Row

Similar ao Column, o Row empilha os itens horizontalmente.

Row(
  children: [
        Container(color: Colors.red),
        Container(color: Colors.blue),
    ],
);

Exemplo mais completo:

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      width: 600,
      decoration: BoxDecoration(border: Border.all()),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Container(
            width: 150,
            alignment: Alignment.center,
            child: const Text('Widget A'),
          ),
          Container(
            width: 1,
            color: Colors.black,
          ),
          Container(
            width: 150,
            alignment: Alignment.center,
            child: const Text('Widget B'),
          ),
          Container(
            width: 1,
            color: Colors.black,
          ),
          Container(
            width: 150,
            alignment: Alignment.center,
            child: const Text('Widget C'),
          ),
          Container(
            width: 1,
            color: Colors.black,
          ),
        ],
      ),
    );
  }
}

SingleChildScrolView

SingleChildScrollView cria um widget rolável com apenas um filho, útil quando o tamanho do filho é dinâmico.

Exemplo de uso

SingleChildScrollView(
    child: Text('long text here')
);

Exemplo mais completo

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: SizedBox(
        height: MediaQuery.of(context).size.height * 2,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisSize: MainAxisSize.min,
          children: [
            Flexible(
              child: Container(
                color: Colors.blue,
                alignment: Alignment.center,
                child: const Text('Widget A'),
              ),
            ),
            Flexible(
              child: Container(
                color: Colors.green,
                alignment: Alignment.center,
                child: const Text('Widget B'),
              ),
            ),
            Flexible(
              child: Container(
                color: Colors.yellow,
                alignment: Alignment.center,
                child: const Text('Widget C'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Referência

Documentação do Flutter