Flutter - Aplicativo de Arquitetura

Neste capítulo, vamos discutir a arquitetura da estrutura Flutter.

Widgets

O conceito central da estrutura Flutter é In Flutter, Everything is a widget. Widgets são basicamente componentes da interface do usuário usados ​​para criar a interface do usuário do aplicativo.

No Flutter , o próprio aplicativo é um widget. O aplicativo é o widget de nível superior e sua IU é construída usando um ou mais filhos (widgets), que novamente são construídos usando seus widgets filhos. estecomposability recurso nos ajuda a criar uma interface de usuário de qualquer complexidade.

Por exemplo, a hierarquia de widget do aplicativo hello world (criado no capítulo anterior) é conforme especificado no diagrama a seguir -

Aqui, os seguintes pontos são dignos de nota -

  • MyApp é o widget criado pelo usuário e é construído usando o widget nativo do Flutter, MaterialApp .

  • MaterialApp tem uma propriedade home para especificar a interface do usuário da página inicial, que é novamente um widget criado pelo usuário, MyHomePage .

  • MyHomePage é construído usando outro widget nativo de vibração, Scaffold

  • Scaffold tem duas propriedades - body e appBar

  • body é usado para especificar sua interface de usuário principal e appBar é usado para especificar sua interface de usuário de cabeçalho

  • Header UI é construída usando widget nativo de vibração, AppBar e Body UI são construídas usando widget Center .

  • O widget Center possui uma propriedade, Child , que se refere ao conteúdo real e é construído usando o widget Text

Gestos

Os widgets Flutter suportam interação através de um widget especial, GestureDetector . GestureDetector é um widget invisível com a capacidade de capturar as interações do usuário, como tocar, arrastar, etc., de seu widget filho. Muitos widgets nativos do Flutter dão suporte à interação por meio do GestureDetector . Também podemos incorporar recurso interativo no widget existente, compondo-o com o widget GestureDetector . Aprenderemos os gestos separadamente nos próximos capítulos.

Conceito de Estado

Widgets Flutter suportam manutenção de estado , fornecendo um widget especial, StatefulWidget . O widget precisa ser derivado do widget StatefulWidget para suportar a manutenção do estado e todos os outros widgets devem ser derivados do StatefulWidget . Widgets Flutter sãoreactiveem nativo. Isso é semelhante a reactjs e StatefulWidget será renderizado automaticamente sempre que seu estado interno for alterado. A re-renderização é otimizada encontrando a diferença entre a interface de usuário do widget antigo e novo e renderizando apenas as mudanças necessárias

Camadas

O conceito mais importante da estrutura Flutter é que a estrutura é agrupada em várias categorias em termos de complexidade e claramente organizada em camadas de complexidade decrescente. Uma camada é construída usando sua camada de próximo nível imediata. A camada superior é um widget específico para Android e iOS . A próxima camada tem todos os widgets nativos flutuantes. A próxima camada é a camada de renderização , que é um componente de renderização de baixo nível e renderiza tudo no aplicativo flutter. As camadas vão para o código específico da plataforma principal

A visão geral de uma camada no Flutter é especificada no diagrama abaixo -

Os pontos a seguir resumem a arquitetura do Flutter -

  • No Flutter, tudo é um widget e um widget complexo é composto de widgets já existentes.

  • Recursos interativos podem ser incorporados sempre que necessário usando o widget GestureDetector .

  • O estado de um widget pode ser mantido sempre que necessário usando o widget StatefulWidget .

  • O Flutter oferece design em camadas para que qualquer camada possa ser programada, dependendo da complexidade da tarefa.

Discutiremos todos esses conceitos em detalhes nos próximos capítulos.