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.