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'),
),
),
],
),
),
);
}
}
Top comments (0)