Você precisa declarar um mapa que siga a estrutura Map<String, ComponentBuilder>
e passá-lo pelo método de inicialização BeagleSdk.init
.
Essa estrutura diz ao Beagle qual widget renderizar quando dado identificador vier pelo JSON.
A chave String do mapa é a propriedade _beagleComponent_
no JSON que identifica o tipo do widget. Você pode nomeá-lo do jeito que quiser, desde que o prefixo seja custom:
.
O valor ComponentBuilder
do mapa recebe por parâmetro:
BeagleUIElement
;BeagleView
.Ele retorna um widget e segue a estrutura Widget Function(BeagleUIElement element, List<Widget> children, BeagleView view)
.
Esses parâmetros estão disponíveis porque eles provêem todas as informações necessárias para construir um widget customizado, como o contexto e os filhos.
Siga esses passos para aprender como criar e customizar seus próprios widgets customizados:
Defina o identificador, aqui vamos nomeá-lo de custom:loading
.
Crie seu widget independentemente do Beagle. Para esse exemplo, vamos usar o simples widget abaixo:
final customLoading = Center(
child: const Text('Meu carregando customizado.'),
);
Crie a estrutura que será passada para o Beagle, veja abaixo:
Map<String, ComponentBuilder> myCustomComponents = {
'custom:loading': (element, children, view) {
return customLoading;
}
};
Passe pelo método de inicialização o mapa que você criou, agora o Beagle é capaz de renderizar seu widget:
BeagleSdk.init(
components: myCustomComponents,
);
É isso! Agora voce pode usar seu componente customizado com o Beagle Flutter!
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.