6.2. Widgets em Flutter: Estrutura básica de um aplicativo Flutter

Página 74

Widgets são os blocos fundamentais para a construção da interface do usuário em Flutter. Eles descrevem como sua interface deve aparecer, dadas as configurações atuais e o estado. Cada widget é uma parte imutável da interface do usuário que é inflada (isto é, desenhada) na tela. Quando você faz alterações no código do widget, o widget é reinflado e desenhado novamente. Portanto, os widgets são muito importantes no Flutter e são a base de tudo o que você cria.

Em Flutter, quase tudo é um widget. Desde o aplicativo em si até botões, cards, barras de navegação, etc. Os widgets são aninhados dentro de outros widgets para formar sua interface do usuário. Por exemplo, você pode ter um widget de barra de navegação que contém widgets de botão.

Para entender melhor a estrutura de um aplicativo Flutter, vamos começar com a estrutura básica de um aplicativo Flutter. Um aplicativo Flutter básico consiste em uma árvore de widgets, que é criada a partir de um único widget raiz. Este widget raiz é normalmente um widget MaterialApp ou CupertinoApp, que fornece muitas funcionalidades básicas de aplicativo, como navegação, temas, etc.

MaterialApp e CupertinoApp

MaterialApp é um widget que encapsula vários widgets que são comumente necessários para aplicações que implementam o Material Design, como Scaffold, AppBar, etc. Ele também configura um Navigator, que pode gerenciar uma pilha de widgets Route que você pode "empurrar" e "pop".

CupertinoApp é semelhante ao MaterialApp, mas implementa um design específico da Apple. Ele também encapsula vários widgets que são comumente necessários para aplicações que implementam o design da Apple.

Dependendo do tipo de aplicativo que você está construindo, você pode escolher usar MaterialApp ou CupertinoApp como seu widget raiz.

Scaffold

Depois de escolher seu widget raiz, o próximo widget na árvore é normalmente um Scaffold. Scaffold é um widget conveniente que implementa a estrutura visual básica do Material Design. Ele fornece uma estrutura para exibir AppBar, Drawer, BottomNavigationBar, FloatingActionButton, e o conteúdo do corpo.

AppBar

AppBar é um widget que fornece uma barra de aplicativo. Ele pode conter um título, ícones de ação, um ícone de menu e muito mais. Você pode personalizar a AppBar de várias maneiras para atender às suas necessidades.

Body

O corpo do Scaffold é onde você coloca o conteúdo principal do seu aplicativo. Você pode preencher o corpo com qualquer widget que desejar. Normalmente, você usará widgets como ListView, GridView, Stack, etc., para organizar seus widgets de conteúdo.

Drawer e BottomNavigationBar

Drawer e BottomNavigationBar são widgets que fornecem navegação para o seu aplicativo. Drawer fornece um painel deslizante que pode conter uma lista de opções de menu, enquanto BottomNavigationBar fornece uma barra de navegação na parte inferior da tela com itens que podem ser tocados.

FloatingActionButton

FloatingActionButton é um botão circular que flutua acima do conteúdo do corpo. Ele é normalmente usado para uma ação principal no aplicativo, como adicionar um novo item.

Essa é a estrutura básica de um aplicativo Flutter. Claro, a estrutura do seu aplicativo pode ser muito mais complexa, dependendo das suas necessidades. O importante é entender que tudo em Flutter é um widget e que você constrói sua interface do usuário aninhando widgets dentro de outros widgets.

Widgets Stateless e Stateful

Os widgets em Flutter são de dois tipos: Stateless e Stateful. Widgets Stateless são aqueles cujo estado não pode mudar ao longo do tempo, enquanto os widgets Stateful são aqueles cujo estado pode mudar ao longo do tempo.

Um widget Stateless é descrito por uma classe que herda de StatelessWidget. Ele descreve parte da interface do usuário que pode depender de configurações definidas durante a construção e não pode mudar ao longo do tempo.

Um widget Stateful, por outro lado, é descrito por duas classes: uma classe que herda de StatefulWidget e outra que herda de State. O objeto StatefulWidget é, em si, imutável, mas o objeto State persiste ao longo da vida do widget.

Em resumo, a estrutura básica de um aplicativo Flutter é construída a partir de uma árvore de widgets, começando com um widget raiz MaterialApp ou CupertinoApp, seguido por um Scaffold que fornece a estrutura visual básica, e então preenchendo o Scaffold com vários widgets como AppBar, Drawer, BottomNavigationBar, FloatingActionButton, e o conteúdo do corpo. Cada widget é imutável e é inflado na tela. Quando você faz alterações no código do widget, o widget é reinflado e desenhado novamente. Portanto, os widgets em Flutter são muito importantes e são a base de tudo o que você cria.

Próxima página do Ebook Gratuito:

756.3. Widgets em Flutter: Widgets básicos em Flutter