3.12. Conceitos básicos de Dart: Widgets e layout

Página 30

Widgets e layout são conceitos fundamentais quando se trata de desenvolver aplicativos usando Flutter e Dart. Eles são os blocos de construção das interfaces de usuário e são responsáveis por como os elementos da interface do usuário são organizados e exibidos na tela. Vamos mergulhar mais profundamente nesses conceitos e entender como eles funcionam no Flutter e Dart.

Widgets

No Flutter, tudo é um widget. Os widgets descrevem o que sua interface do usuário deve parecer. Cada widget é uma classe Dart imutável que descreve parte do layout ou interface do usuário. Existem dois tipos principais de widgets no Flutter: widgets Stateless e widgets Stateful.

Widgets Stateless são aqueles que descrevem parte da interface do usuário que pode ser determinada com base em configurações e construção. Eles são imutáveis, o que significa que uma vez que eles são construídos, eles não podem ser alterados. Qualquer alteração na interface do usuário requer a construção de um novo widget.

Por outro lado, os widgets Stateful são dinâmicos. Eles podem mudar ao longo do tempo, por exemplo, em resposta à interação do usuário ou quando um serviço de dados é atualizado. Os widgets Stateful são mutáveis, o que significa que eles podem ser alterados após a construção.

Layout

O layout é o processo de organizar os widgets na tela. No Flutter, você usa widgets de layout para organizar outros widgets. Existem vários widgets de layout disponíveis no Flutter, como Row, Column, Stack, Container, etc.

Row e Column são os widgets de layout mais comuns. Eles permitem que você organize seus widgets em uma linha horizontal (Row) ou vertical (Column). Cada Row ou Column suporta até três filhos: um widget principal, e dois widgets secundários que são colocados antes e depois do widget principal.

Stack permite que você sobreponha vários widgets uns sobre os outros. Por exemplo, você pode usar um Stack para colocar um texto sobre uma imagem. O primeiro filho de um Stack é colocado na parte inferior, com os filhos subsequentes sobrepostos na ordem em que são adicionados.

Container é outro widget de layout comum. Ele permite que você crie um retângulo visual que pode conter um único filho. Além disso, o Container pode ter uma decoração, como um fundo, uma borda ou uma sombra. Ele também pode ter margens, preenchimento e restrições dimensionais.

Construindo uma interface do usuário com widgets e layout

Para construir uma interface do usuário no Flutter, você combina widgets e layout. Você começa com um widget de layout e adiciona outros widgets a ele. Por exemplo, você pode começar com um Container e adicionar um Row a ele. Em seguida, você pode adicionar outros widgets ao Row, como Text, Icon e RaisedButton.

Os widgets são aninhados para criar a interface do usuário. O widget de layout externo (por exemplo, Container) é o pai dos widgets internos (por exemplo, Row, Text, Icon, RaisedButton). O widget pai controla o posicionamento de seus widgets filhos, enquanto os widgets filhos definem sua própria aparência.

No Flutter, você constrói a interface do usuário declarativamente. Isso significa que você descreve a interface do usuário em termos de seu estado final, e o Flutter se encarrega de atualizar a interface do usuário para corresponder a esse estado. Isso contrasta com a abordagem imperativa, onde você precisa especificar as etapas para atualizar a interface do usuário.

Em resumo, os widgets e o layout são os pilares da construção de interfaces de usuário no Flutter. Com um entendimento sólido desses conceitos, você pode criar aplicativos complexos e atraentes com Flutter e Dart.

Próxima página do Ebook Gratuito:

313.13. Conceitos básicos de Dart: Gerenciamento de estado