Construindo e Usando uma Extensão do Flutter DevTools com Back4app

introdução flutter devtools é um conjunto poderoso para depuração, inspeção e perfilamento de aplicativos flutter com o framework de extensão dart & flutter devtools, os desenvolvedores podem criar extensões personalizadas para aprimorar seus fluxos de trabalho de depuração e desenvolvimento essas extensões podem ser construídas como aplicativos web flutter e integradas perfeitamente ao conjunto devtools neste tutorial, exploraremos como criar uma extensão flutter devtools, integrá la a um aplicativo flutter que usa back4app para serviços de backend e depurar a aplicação usando a extensão personalizada isso ajudará você a construir ferramentas de desenvolvedor sob medida que podem agilizar seu processo de desenvolvimento e fornecer insights mais profundos sobre o comportamento do seu aplicativo pré requisitos para completar este tutorial, você precisará uma conta back4app inscreva se para uma conta gratuita em back4app com https //www back4app com um ambiente de desenvolvimento flutter configurado em sua máquina local siga o guia de instalação do flutter https //flutter dev/docs/get started/install se você ainda não o configurou conhecimento básico de dart, widgets flutter e uso do flutter devtools passo 1 – configurando seu backend back4app crie um projeto back4app faça login na sua conta back4app https //www back4app com/ e crie um novo projeto crie classes parse para este tutorial, crie uma classe parse chamada themesettings para armazenar dados de configuração de tema para seu aplicativo flutter themename (string) o nome do tema primarycolor (string) a cor primária do tema accentcolor (string) a cor de destaque do tema preencha a classe com dados de exemplo adicione vários registros à themesettings classe para simular configurações de tema que seu aplicativo flutter usará obtenha suas credenciais back4app navegue até as configurações do seu projeto para recuperar seu id de aplicação e chave do cliente, que você precisará para conectar seu aplicativo flutter ao back4app passo 2 – criando a extensão flutter devtools crie um novo projeto flutter abra seu terminal ou prompt de comando e execute flutter create theme builder extension configurar o diretório da extensão navegue até o diretório raiz do seu projeto e crie um novo diretório para sua extensão devtools mkdir devtools extension dentro deste diretório, crie um config yaml arquivo para armazenar os metadados necessários pelo devtools package name theme builder extension version 1 0 0 issue tracker https //github com/yourusername/theme builder extension/issues material icon assets/icon png adicionar dependências abra pubspec yaml e adicione as seguintes dependências dependencies flutter sdk flutter devtools extensions latest version devtools app shared latest version este é um exemplo adicional para demonstrar a tradução execute flutter pub get para instalar essas dependências criando a extensão devtools em lib/main dart , substitua o conteúdo padrão pelo seguinte código para envolver seu aplicativo flutter web em um devtoolsextension widget import 'package\ flutter/material dart'; import 'package\ devtools extensions/devtools extensions dart'; import 'package\ devtools app shared/devtools app shared dart'; void main() { runapp(devtoolsextension(child themebuilderapp())); } class themebuilderapp extends statelesswidget { @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('theme builder')), body center( child elevatedbutton( onpressed () { // your extension logic here }, child text('generate theme'), ), ), ); } } isso envolve seu aplicativo no devtoolsextension widget, que gerencia a tematização e a integração com a suíte devtools adicionando integrações devtools modifique seu aplicativo para integrar recursos específicos do devtools, como usar o devtoolsbutton em vez de um elevatedbutton class themebuilderapp extends statelesswidget { @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('theme builder')), body center( child devtoolsbutton( onpressed () { // your extension logic here }, child text('generate theme'), ), ), ); } } essa mudança garante que a interface do usuário da sua extensão se misture perfeitamente com o restante do conjunto de ferramentas do devtools passo 3 – integrando com back4app inicialize o parse na sua extensão como esta extensão interagirá com o back4app, inicialize o parse na sua extensão import 'package\ parse server sdk flutter/parse server sdk flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your back4app app id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize(keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true); runapp(devtoolsextension(child themebuilderapp())); } busque e use dados de tema use os dados do back4app na sua extensão para gerar e aplicar temas class themebuilderapp extends statelesswidget { @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('theme builder')), body futurebuilder\<list\<parseobject>>( future fetchthemes(), builder (context, snapshot) { if (!snapshot hasdata) { return circularprogressindicator(); } final themes = snapshot data!; return listview\ builder( itemcount themes length, itembuilder (context, index) { final theme = themes\[index]; return listtile( title text(theme get\<string>('themename') ?? 'no name'), subtitle text('primary color ${theme get\<string>('primarycolor')}'), ontap () { // apply theme logic }, ); }, ); }, ), ); } future\<list\<parseobject>> fetchthemes() async { final query = querybuilder\<parseobject>(parseobject('themesettings')); final response = await query query(); if (response success && response results != null) { return response results as list\<parseobject>; } else { throw exception('failed to load themes'); } } } este código busca as configurações de tema do back4app e as exibe em uma lista selecionar um tema pode acionar lógica adicional para aplicá lo passo 4 – testando sua extensão em um ambiente simulado execute a extensão em um ambiente simulado para testar sua extensão sem compilá la toda vez, use o ambiente simulado do devtools flutter run d chrome dart define=use simulated environment=true simular o aplicativo conectado inicie outro aplicativo flutter ao qual sua extensão se conectará copie e cole o uri do serviço vm do aplicativo conectado e o uri do serviço dtd no ambiente simulado passo 5 – construindo e publicando a extensão construir a extensão uma vez que você esteja satisfeito com sua extensão, construa a para produção flutter pub get flutter build web output=devtools extension/build validar a extensão use o comando de validação do devtools para garantir que sua extensão esteja configurada corretamente dart run devtools extensions validate publicar a extensão publique sua extensão em pub dev para que outros desenvolvedores possam usá la flutter pub publish conclusão neste tutorial, você aprendeu como criar uma extensão flutter devtools, integrá la com o back4app para serviços de backend e testá la em um ambiente simulado ao estender o devtools, você pode construir ferramentas personalizadas que aumentam sua produtividade e oferecem novas percepções sobre o comportamento do seu aplicativo uma vez que sua extensão esteja pronta, publicá la em pub dev permite que outros desenvolvedores se beneficiem do seu trabalho para mais informações sobre como usar o flutter com o back4app, confira a documentação do back4app https //www back4app com/docs e a documentação do flutter devtools https //flutter dev/docs/development/tools/devtools/overview boa codificação!