Flutter Framework e Arquitetura
Olá pessoal! Em um passado recente, conduzi algumas apresentações na empresa em que trabalhava, introduzindo o Flutter e o Dart. Essas apresentações consistiram em resumos elaborados com base na documentação oficial e em artigos relevantes.
Se você já é um desenvolvedor experiente em Flutter, este artigo pode não ser direcionado ao seu perfil, pois cobre conceitos introdutórios.
No entanto, pode ser um recurso valioso para iniciar sua jornada de aprendizado e compreensão mais profunda.
Após a leitura do resumo, recomendo que explorem as referências e documentações fornecidas para uma melhor fixação e entendimento dos tópicos abordados. Estou à disposição para qualquer dúvida ou esclarecimento adicional.
Tópicos
- Widgets everywhere (em toda parte)
- No Flutter tudo é Widget
- Tipos Widgets
- Flutter diagrama Widget
- Widgets Stateless Widget
- O que é um no Futter Estado
- Widgets Stateful Widget
- Navegação
- Árvore de Widget
- Quantas árvores o flutter possui ?
- Arquitetura Árvores do Flutter
- O que são Widgets ?
- O que são Element ?
- Vídeo Renderização?! | Decoding Flutter
- Arquitetura Framework
- Anatomia de um aplicativo
Widgets everywhere (em toda parte)
Imagem 01
Sim, no Flutter, tudo é um widget! Os widgets são os blocos de construção fundamentais para a criação de interfaces de usuário em aplicativos Flutter. Desde elementos simples, como texto e imagens, até layouts complexos e interativos, como botões e listas roláveis, tudo é representado e manipulado como widgets.
Os widgets no Flutter são mais do que apenas elementos visuais; eles também controlam o comportamento e a interação do aplicativo. Cada widget é responsável por desenhar uma parte específica da interface do usuário e responder a eventos, como toques na tela ou atualizações de dados.
Os widgets podem ser combinados e aninhados de forma hierárquica para construir interfaces complexas e reutilizáveis. Essa abordagem baseada em widgets é uma das características mais poderosas do Flutter, pois permite a criação de interfaces consistentes e dinâmicas em diferentes plataformas, como Android, iOS, web e desktop.
Tipos de Widgets
Imagem 02
1. Widgets de Layout:
Container: permite personalizar a decoração, o preenchimento, a posição e outros aspectos de um widget filho.Row: organiza seus widgets filhos horizontalmente em uma linha.Column: organiza seus widgets filhos verticalmente em uma coluna.ListView: exibe uma lista de widgets de forma rolável.Stack: empilha seus widgets filhos de forma sobreposta.GridView: exibe seus widgets filhos em uma grade.
2. Widgets de Texto:
Text: exibe um texto na interface do usuário.TextField: permite que o usuário insira texto.RichText: exibe texto com estilos e formatação avançados.
3. Widgets de Interface do Usuário:
Button: representa um botão clicável.IconButton: representa um ícone clicável.Checkbox: representa uma caixa de seleção.Radio: representa um botão de opção.Switch: representa um interruptor que pode ser ligado ou desligado.
4. Widgets Especializados:
Image: exibe uma imagem.Icon: exibe um ícone.GestureDetector: detecta gestos do usuário, como toques e arrastar.
5. Widgets de Navegação:
Navigator: gerencia a navegação entre telas.PageRoute: Um widget que representa uma tela individual no aplicativo.
Diagrama Widget:
Imagem 03 Flutter diagrama Widget
Estes são apenas alguns dos principais tipos de widgets disponíveis no Flutter. Com esses widgets, você pode construir interfaces de usuário altamente personalizadas e responsivas para seus aplicativos móveis.
Widgets Stateless Widget
class AppWidget extends StatelessWidget {
const AppWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center();
}
}
Stateless Widget não possui controle de estado, na prática, é um um widget imutável.
Este tipo de widget não possibilita alterações dinâmicas, entenda-o como algo completamente estático .
Imagem 04 Diagrama Staless Widgets
Text, Button e Icon são exemplos de widgets Stateless, que são imutáveis. Isso significa que, uma vez criados, eles não podem ser alterados. Em vez disso, se desejar alterar a aparência ou o comportamento desses widgets, você precisará criar um novo widget com as propriedades desejadas.
Os widgets Stateless são ideais para elementos de interface de usuário que não precisam ser atualizados dinamicamente com base em alterações de estado. Eles podem ser mais eficientes em termos de desempenho, pois não precisam rastrear alterações internas. No entanto, se você precisar de um widget que possa ser atualizado dinamicamente, você usaria um widget Stateful em vez de um Stateless.
Widgets Stateful Widget
class MyPage extends StatefulWidget {
const WedoPage({Key? key}) : super(key: key);
@override
State<MyPage> createState() => _MyPageState();
}
class _MyPageState extends State<MyPage> {
@override
Widget build(BuildContext context) {
return Center();
}
}
Os widgets Stateful são essencialmente o oposto dos Stateless. Enquanto os widgets Stateless são imutáveis e não possuem estado interno, os widgets Stateful incorporam um estado interno, tornando-os mutáveis. Isso significa que eles são capazes de armazenar e atualizar informações ao longo do tempo, permitindo que respondam dinamicamente às interações do usuário e às mudanças nos dados do aplicativo.
Esses widgets desempenham um papel fundamental no desenvolvimento de aplicativos móveis com Flutter. Eles possibilitam a criação de interfaces interativas e dinâmicas, onde elementos podem ser atualizados em tempo real para refletir mudanças de estado. Isso é crucial para a construção de aplicativos modernos, que exigem uma resposta imediata às ações do usuário e uma experiência fluida e responsiva.
Além disso, os widgets Stateful são frequentemente utilizados para a implementação de componentes complexos, como formulários, listas expansíveis e aplicativos de chat, onde o estado dinâmico é essencial para fornecer uma experiência de usuário rica e envolvente.
Em resumo, os widgets Stateful são componentes cruciais para o desenvolvimento móvel no Flutter. Eles capacitam os desenvolvedores a criar aplicativos com a interatividade e responsividade necessárias para atender às demandas dos usuários e proporcionar uma experiência de usuário excepcional.
É importante ressaltar que a escolha entre Stateless ou Stateful não afeta significativamente o desempenho do Flutter, pois o framework é robusto o suficiente para renderizar qualquer tipo de widget. Portanto, não há motivo para temer o uso de Stateful ou widgets mutáveis. O mais importante é ter bom senso e seguir o design adequado para cada situação. O Flutter oferece flexibilidade e eficiência na renderização de interfaces de usuário, permitindo que os desenvolvedores escolham o tipo de widget mais adequado para suas necessidades sem comprometer o desempenho do aplicativo.
O que é um Estado no Futter
No Flutter, um estado refere-se à informação que pode ser alterada durante a execução do aplicativo. Quando dizemos que um widget tem estado, queremos dizer que ele pode ser alterado dinamicamente, seja por interação do usuário, atualização de dados ou outros eventos.
Existem dois tipos principais de widgets em Flutter em relação ao estado:
- StatelessWidgets mencinaodo a cima (Widgets sem estado): Esses widgets não possuem estado interno. Isso significa que a sua renderização e comportamento são totalmente determinados pelas propriedades fornecidas no momento da criação.
- StatefulWidgets tambem já mencionado (Widgets com estado): Esses widgets têm estado interno, o que significa que eles podem ser alterados ao longo do tempo. Quando o estado interno de um StatefulWidget muda, o Flutter reconstrói automaticamente o widget para refletir essas alterações.
Exemplo Imagem 04 e 05 Widgets switch o click no widget altera seu estado o
compotente e rederizado e seu estado alterado;
Widgets switch não acionado
Imagem 04
Widgets switch após click
Imagem 05
Uma possível representação em código pode ser vista abaixo.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Exemplo de Switch'),
),
body: SwitchScreen(),
),
);
}
}
class SwitchScreen extends StatefulWidget {
@override
_SwitchScreenState createState() => _SwitchScreenState();
}
class _SwitchScreenState extends State<SwitchScreen> {
bool _switchValue = false;
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
_switchValue ? 'Switch ligado' : 'Switch desligado',
style: TextStyle(fontSize: 20.0),
),
Switch(
value: _switchValue,
onChanged: (value) {
setState(() {
_switchValue = value;
});
},
),
],
),
);
}
}
O widget SwitchScreen extends de StatefulWidget nosso widget possui uma variável chamada _switchValue do tipo bool (booleano), que controla o estado do nosso widget.
Quando o usuário clica no botão switch, o estado da variável _switchValue é alternado entre false e true, refletindo se exibe ou não um texto.
Em seguida, o método setState é chamado, informando ao Flutter que o estado interno do widget foi atualizado.
Como resultado, o Flutter recria o widget com o novo valor de _switchValue e toda a interface do usuário é renderizada novamente, refletindo a alteração do estado do Switch.
Navegação
Navigator: A proposta do Navigator é simplificar e abstrair o roteamento padrão já implementado no Flutter, facilitando a declaração e reutilização das rotas, especialmente à medida que o aplicativo cresce.
Desenvolvido como uma iniciativa open source pela Nubank e disponibilizado no GitHub, o Navigator oferece uma API declarativa que permite definir rotas, parâmetros, deep links e outras configurações, enquanto o próprio Navigator gera o código necessário para tornar o uso das rotas mais conveniente.
Uma abordagem amplamente adotada é a nomeação das rotas. A documentação fornece excelentes exemplos de como implementar essa técnica.
É crucial entender em detalhes essa abordagem para discernir claramente as diferenças entre a organização de rotas por pilha e por rotas nomeadas, e também compreender os diferenciais do Navigator. Este resumo é apenas uma introdução, explorar mais informações na documentação oficial do Flutter para obter uma compreensão mais profunda documentação do Flutter.
Árvore de Widget
Imagem 05 Arvore do Flutter
Quantas árvores o flutter possui ?
O Flutter possui várias árvores abordaremos a três principais a seguir.
Arquitetura de Árvores Flutter
Imagem 06 Arvore do Flutter
1. Widget Tree (Árvore de Widgets):
- A árvore de widgets é a estrutura hierárquica de widgets que define a aparência e o layout da interface do usuário do aplicativo. Começa com um widget raiz, como MaterialApp ou WidgetsApp, e se ramifica em outros widgets, formando uma estrutura de árvore. Cada widget na árvore de widgets tem zero ou mais filhos, que são outros widgets. Essa árvore representa a estrutura visual do aplicativo e define como os widgets são organizados na tela.
2. Element Tree (Árvore de Elementos ):
- A árvore de elementos é uma representação interna dos widgets na hierarquia do Flutter. Cada widget na árvore de widgets tem um elemento correspondente na árvore de elementos. Os elementos são responsáveis por criar e manter os widgets, além de gerenciar seu estado e ciclo de vida. Eles são usados pelo framework Flutter para controlar a renderização eficiente e a atualização dos widgets na tela. Enquanto os widgets definem a estrutura visual do aplicativo, os elementos controlam sua implementação e interação com o framework.
3. Render Tree (Árvore de Renderização):
- A árvore de renderização é uma representação dos objetos de renderização (RenderObjects) que correspondem aos widgets na árvore de elementos. Cada widget na árvore de elementos tem um objeto de renderização associado que define como ele deve ser exibido na tela. Os objetos de renderização são responsáveis por calcular a posição e o tamanho dos widgets, aplicar transformações gráficas e manipular eventos de entrada. Eles formam a estrutura física da interface do usuário exibida na tela e são essenciais para o processo de renderização eficiente do Flutter.
Em resumo, as árvores de widgets, elementos e renderização são componentes essenciais da arquitetura do Flutter. Elas trabalham juntas para definir, construir e renderizar a interface do usuário de um aplicativo.
1. Widget Tree (Árvore de Widgets):
- A árvore de widgets é a estrutura hierárquica de widgets que define a aparência e o layout da interface do usuário do aplicativo. Começa com um widget raiz, como MaterialApp ou WidgetsApp, e se ramifica em outros widgets, formando uma estrutura de árvore. Cada widget na árvore de widgets tem zero ou mais filhos, que são outros widgets. Essa árvore representa a estrutura visual do aplicativo e define como os widgets são organizados na tela.
2. Element Tree (Árvore de Elementos ):
- A árvore de elementos é uma representação interna dos widgets na hierarquia do Flutter. Cada widget na árvore de widgets tem um elemento correspondente na árvore de elementos. Os elementos são responsáveis por criar e manter os widgets, além de gerenciar seu estado e ciclo de vida. Eles são usados pelo framework Flutter para controlar a renderização eficiente e a atualização dos widgets na tela. Enquanto os widgets definem a estrutura visual do aplicativo, os elementos controlam sua implementação e interação com o framework.
3. Render Tree (Árvore de Renderização):
- A árvore de renderização é uma representação dos objetos de renderização (RenderObjects) que correspondem aos widgets na árvore de elementos. Cada widget na árvore de elementos tem um objeto de renderização associado que define como ele deve ser exibido na tela. Os objetos de renderização são responsáveis por calcular a posição e o tamanho dos widgets, aplicar transformações gráficas e manipular eventos de entrada. Eles formam a estrutura física da interface do usuário exibida na tela e são essenciais para o processo de renderização eficiente do Flutter.
Em resumo, as árvores de widgets, elementos e renderização são componentes essenciais da arquitetura do Flutter. Elas trabalham juntas para definir, construir e renderizar a interface do usuário de um aplicativo.
O que são Widgets ?
- Instruções para gerar um element;
O que são Element ?
- Instruções para gerar Render;
Vídeo Renderização?! | Decoding
link https://www.youtube.com/watch?v=54yoCqkew6g
Arquitetura Framework
Ao observar a imagem 07 arquitetura do Flutter notamos que existe uma divisão de três camadas.
Imagem 07 Arquitetura do Framework
Embedder:
Plataforma específica, ou seja cada plataforma possui o seu exemplo se um fabricante de carro deseja embarcar o flutter em seus veículos terá seu Embedder.
O incorporador é escrito em uma linguagem apropriada para a plataforma: atualmente Java e C++ para Android, Objective-C/Objective-C++ para iOS e macOS e C++ para Windows e Linux.
Usando o incorporador, o código Flutter pode ser integrado a um aplicativo existente como um módulo, ou o código pode ser todo o conteúdo do aplicativo.
Engine C/C++:
No centro do Flutter está o Engine (mecanismo Flutter) , que é escrito principalmente em C++ e oferece suporte aos primitivos necessários para oferecer suporte a todos os aplicativos Flutter.
O mecanismo é responsável por rasterizar as cenas compostas sempre que um novo quadro precisa ser pintado.
Ele fornece a implementação de baixo nível da API principal do Flutter, incluindo gráficos.
Framework Dart:
Flutter foi projetado como um sistema extensível em camadas.
Ele existe como uma série de bibliotecas independentes, cada uma dependendo da camada subjacente.
Nenhuma camada tem acesso privilegiado à camada abaixo, e cada parte do nível da estrutura é projetada para ser opcional e substituível.
Normalmente, os desenvolvedores interagem com o Flutter por meio da Flutter framework.
Uma estrutura moderna e reativa escrita na linguagem Dart.
Inclui um rico conjunto de plataforma, layout e bibliotecas fundamentais, composto por uma série de camadas.
Analisarmos: O Framework Dart é aúltima camada se obsevarnos de baixo para cima, temos:
Classes básicas básicas e serviços de blocos de construção, como animação , pintura e gestos.
A camada de renderização fornece uma abstração para lidar com o layout. Com esta camada, você pode construir uma árvore de objetos renderizáveis.
A camada de widgets é uma abstração de composição. Cada objeto de renderização na camada de renderização possui uma classe correspondente na camada de widgets.
As bibliotecas Material e Cupertino oferecem conjuntos abrangentes de controles que usam as primitivas de composição da camada de widget para implementar as linguagens de design Material ou iOS.
Anatomia de um aplicativo
O diagrama a seguir na imagem 08 fornece uma visão geral das peças que compõem um aplicativo Flutter normal gerado pelo flutter create my_app
Ele mostra onde o Flutter Engine está nesta pilha, destaca os limites da API e identifica os repositórios onde as peças individuais residem.
A legenda abaixo esclarece algumas das terminologias comumente usadas para descrever as partes de um aplicativo Flutter.
Imagem 08 Anatomia de um aplicativo
Aplicativo dart
Compõe widgets na UI desejada.
Implementar lógica de negócios.
Framework
Fornece API de nível superior para criar aplicativos de alta qualidade (por exemplo, widgets, testes de ocorrências, detecção de gestos, acessibilidade, entrada de texto).
Engine
Responsável por rasterizar cenas compostas.
Fornece implementação de baixo nível das principais APIs do Flutter (por exemplo, gráficos, layout de texto, tempo de execução Dart).
Expõe sua funcionalidade ao framework usando a API dart:ui .
Integra-se com uma plataforma específica usando a API Embedder do Engine
Embedder
Coordena-se com o sistema operacional subjacente para acesso a serviços como superfícies de renderização, acessibilidade e entrada.
Gerencia o loop de eventos.
Expõe API específica da plataforma para integrar o Embedder aos aplicativos.
Runner
Compõe as partes expostas pela API específica da plataforma do Embedder em um pacote de aplicativo executável na plataforma de destino.
Parte do modelo de aplicativo gerado por flutter create, de propriedade do desenvolvedor do aplicativo.
Resumindo
Exploramos o Flutter, compreendendo sua arquitetura básica, que inclui três elementos essenciais: a árvore de widgets, a árvore de elementos e a árvore de renderização.
Estes desempenham papéis fundamentais na construção e na renderização da interface do usuário de um aplicativo Flutter.
Além disso, discutimos os conceitos de widgets, que são os blocos de construção da interface do usuário, e estados, que determinam a dinamicidade e interatividade dos aplicativos. Para mais informações, sugestões ou correções, sinta-se à vontade em comentar vlw!
Referências
https://docs.flutter.dev/resources/architectural-overview
https://medium.com/mega-senior/google-i-o-19-nosso-resum%C3%A3o-sobre-flutter-e-dart-402611573b23
https://www.youtube.com/watch?v=y65UWW-Ywus
https://www.youtube.com/watch?v=54yoCqkew6g&list=PLjxrf2q8roU1Vm2a9EySYgeMo2DIhXUeK&index=19
https://www.alura.com.br/artigos/flutter-diferenca-entre-stateless-e-statefull-widget#estados
Sobre o autor:
Marcos Rangel 45 anos apaixonado por tecnologias, natureza,astronomia, e família;
Flutter Developer com Pós Graduação em Desenvolvimento de aplicações para dispositivos móveis;
E Graduado em Gestão em Técnologia da Informação;
The only way to get to the impossible is to believe it’s possible.
