Como Criar Widgets na Tela Inicial em Flutter com HomeWidget e Back4App

introdução os widgets da tela inicial permitem que os usuários acessem informações em tempo real do seu aplicativo diretamente na tela inicial do dispositivo sem abrir o aplicativo com o flutter, criar esses widgets requer um código específico para a plataforma no entanto, o home widget https //pub dev/packages/home widget pacote preenche essa lacuna ao permitir a troca de dados entre seu aplicativo flutter e os widgets da tela inicial usando código dart neste tutorial, você aprenderá como criar um widget da tela inicial no flutter usando o home widget pacote e integrá lo com o back4app—um backend como serviço alimentado pelo parse server ao final deste tutorial, você terá um aplicativo flutter que exibe dados do back4app em um widget da tela inicial pré requisitos para completar este tutorial, você precisará flutter sdk instalado em sua máquina você pode seguir o guia oficial de instalação do flutter https //flutter dev/docs/get started/install para o seu sistema operacional conhecimento básico de flutter e dart se você é novo no flutter, considere revisar a documentação do flutter https //flutter dev/docs para se familiarizar com os conceitos básicos um ide ou editor de texto como visual studio code ou android studio uma conta back4app inscreva se para uma conta gratuita em back4app https //www back4app com/ parse server sdk para flutter adicionado ao seu projeto você pode aprender como configurá lo seguindo o guia do sdk flutter da back4app https //www back4app com/docs/flutter/parse flutter sdk configuração específica da plataforma para widgets de tela inicial do android e ios passo 1 – configurando o projeto flutter 1 1 criar um novo projeto flutter abra seu terminal e execute flutter create home widget app navegue até o diretório do projeto cd home widget app 1 2 adicionar dependências abra pubspec yaml e adicione as seguintes dependências dependencies flutter sdk flutter home widget ^0 2 4 parse server sdk flutter ^4 0 1 execute flutter pub get para instalar os pacotes passo 2 – configurando o back4app 2 1 criar um novo aplicativo back4app faça login no seu painel do back4app https //dashboard back4app com/ clique em "criar novo app" digite um nome para seu aplicativo, por exemplo, "homewidgetapp" , e clique em "criar" 2 2 configurar o modelo de dados no seu painel de aplicação, navegue até a "database" seção clique em "create a class" na janela modal selecione "custom" digite "message" como o nome da classe clique em "create class" 2 3 adicionar colunas à classe na classe "message" , clique em "+" para adicionar uma nova coluna adicione as seguintes colunas título tipo string conteúdo tipo string adicione alguns dados de exemplo à "message" por exemplo 2 4 obter credenciais da aplicação navegue até app settings > security & keys anote seu application id e client key passo 3 – inicializando o parse em seu app flutter abra lib/main dart e modifique o da seguinte forma import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'package\ home widget/home widget dart'; import 'dart\ async'; import 'home page dart'; // you'll create this file next void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your application id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, debug true, ); runapp(myapp()); } substitua 'seu application id' e 'seu client key' pelas suas credenciais reais do back4app passo 4 – buscando dados do back4app crie um novo arquivo lib/home page dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'package\ home widget/home widget dart'; import 'dart\ async'; class homepage extends statefulwidget { @override homepagestate createstate() => homepagestate(); } class message { final string title; final string content; message(this title, this content); } class homepagestate extends state\<homepage> { message? message; @override void initstate() { super initstate(); fetchmessage(); } future\<void> fetchmessage() async { final querybuilder\<parseobject> query = querybuilder\<parseobject>(parseobject('message')); final parseresponse apiresponse = await query query(); if (apiresponse success && apiresponse results != null) { final data = apiresponse results! first; final title = data get\<string>('title') ?? ''; final content = data get\<string>('content') ?? ''; setstate(() { message = message(title, content); }); updatehomewidget(title, content); } else { print('error fetching data ${apiresponse error? message}'); } } future\<void> updatehomewidget(string title, string content) async { await homewidget savewidgetdata\<string>('title', title); await homewidget savewidgetdata\<string>('content', content); await homewidget updatewidget( name 'homewidgetprovider', // name of your homewidgetprovider iosname 'homewidget'); // used in ios } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('home widget app'), ), body center( child message == null ? circularprogressindicator() column( mainaxisalignment mainaxisalignment center, children \[ text( message! title, style textstyle(fontsize 24, fontweight fontweight bold), ), sizedbox(height 10), text( message! content, style textstyle(fontsize 18), ), sizedbox(height 20), elevatedbutton( onpressed fetchmessage, child text('refresh message'), ), ], ), ), ); } } explicação classe da mensagem uma classe de modelo simples para armazenar os dados da mensagem fetchmessage() busca dados da mensagem classe no back4app e atualiza a mensagem variável updatehomewidget() salva os dados buscados no widget da tela inicial usando homewidget savewidgetdata e aciona uma atualização usando homewidget updatewidget build() exibe os dados da mensagem e um botão para atualizar a mensagem passo 5 – configurando o widget da tela inicial 5 1 configuração do android 5 1 1 criar o layout do widget crie um novo arquivo de layout xml em android/app/src/main/res/layout/ nomeado home widget xml \<! android/app/src/main/res/layout/home widget xml > \<?xml version="1 0" encoding="utf 8"?> \<framelayout xmlns\ android="http //schemas android com/apk/res/android" android\ layout width="match parent" android\ layout height="match parent"> \<textview android\ id="@+id/widget title" android\ layout width="wrap content" android\ layout height="wrap content" android\ text="title" android\ textsize="18sp" android\ layout gravity="center horizontal|top" android\ paddingtop="16dp"/> \<textview android\ id="@+id/widget content" android\ layout width="wrap content" android\ layout height="wrap content" android\ text="content" android\ textsize="14sp" android\ layout gravity="center" android\ paddingtop="8dp"/> \</framelayout> 5 1 2 criar o provedor do widget crie uma nova classe java em android/app/src/main/java/your/package/name/ chamada homewidgetprovider java // android/app/src/main/java/your/package/name/homewidgetprovider java package your package name; import android appwidget appwidgetmanager; import android appwidget appwidgetprovider; import android content context; public class homewidgetprovider extends appwidgetprovider { @override public void onupdate(context context, appwidgetmanager appwidgetmanager, int\[] appwidgetids) { // the homewidget package handles the update } } substitua your package name pelo seu nome de pacote real 5 1 3 atualizar android manifest adicione o provedor de widget ao seu androidmanifest xml \<! add inside the \<application> tag > \<receiver android\ name=" homewidgetprovider"> \<intent filter> \<action android\ name="android appwidget action appwidget update"/> \</intent filter> \<meta data android\ name="android appwidget provider" android\ resource="@xml/home widget info"/> \</receiver> 5 1 4 criar widget info xml crie um novo arquivo xml em android/app/src/main/res/xml/ chamado home widget info xml \<! android/app/src/main/res/xml/home widget info xml > \<?xml version="1 0" encoding="utf 8"?> \<appwidget provider xmlns\ android="http //schemas android com/apk/res/android" android\ initiallayout="@layout/home widget" android\ minwidth="180dp" android\ minheight="110dp" android\ updateperiodmillis="0" android\ resizemode="horizontal|vertical" android\ widgetcategory="home screen"> \</appwidget provider> 5 2 configuração do ios 5 2 1 criar uma extensão de widget abra seu projeto flutter no xcode abrindo ios/runner xcworkspace clique em arquivo > novo > alvo escolha extensão de widget e clique em próximo digite homewidget como o nome do produto e certifique se de que incluir configuração de intenção esteja desmarcado clique em concluir e ativar o esquema 5 2 2 atualizar o código do widget na extensão homewidget , abra homewidget swift e modifique o import widgetkit import swiftui struct provider timelineprovider { func placeholder(in context context) > simpleentry { simpleentry(date date(), title "title", content "content") } func getsnapshot(in context context, completion @escaping (simpleentry) > ()) { let entry = simpleentry(date date(), title "title", content "content") completion(entry) } func gettimeline(in context context, completion @escaping (timeline\<entry>) > ()) { var entries \[simpleentry] = \[] let shareddefaults = userdefaults(suitename "your group id") let title = shareddefaults? string(forkey "title") ?? "title" let content = shareddefaults? string(forkey "content") ?? "content" let entrydate = date() let entry = simpleentry(date entrydate, title title, content content) entries append(entry) let timeline = timeline(entries entries, policy never) completion(timeline) } } struct simpleentry timelineentry { let date date let title string let content string } struct homewidgetentryview view { var entry provider entry var body some view { vstack { text(entry title) font( headline) text(entry content) font( body) } } } @main struct homewidget widget { let kind string = "homewidget" var body some widgetconfiguration { staticconfiguration(kind kind, provider provider()) { entry in homewidgetentryview(entry entry) } configurationdisplayname("home widget") description("this is a home screen widget ") } } substitua your group id pelo seu identificador de grupo de aplicativos (por exemplo, group com example homewidgetapp ) 5 2 3 configurar grupos de aplicativos no xcode, selecione seu projeto e vá para signing & capabilities adicione "app groups" tanto ao seu alvo principal do aplicativo quanto à extensão do widget crie um novo grupo de aplicativos (por exemplo, group com example homewidgetapp ) certifique se de que ambos os alvos tenham o mesmo grupo de aplicativos habilitado 5 3 atualizar código flutter para configurações específicas da plataforma no seu updatehomewidget() método em home page dart , atualize os nomes dos widgets await homewidget updatewidget( name 'homewidgetprovider', // for android, the class name of your appwidgetprovider iosname 'homewidget', // for ios, the name of your widget extension ); passo 6 – executando o app e testando o widget 6 1 execute o app no seu terminal, execute flutter run 6 2 adicione o widget à sua tela inicial android pressione longamente na tela inicial e selecione "widgets" encontre seu app na lista de widgets arraste e solte o widget na sua tela inicial ios entre no modo de balançar pressionando longamente na tela inicial toque no botão "+" no canto superior esquerdo pesquise seu widget pelo nome adicione o widget à sua tela inicial 6 3 atualizações de dados de teste toque no "botão de atualizar mensagem" no seu aplicativo para buscar novos dados do back4app o widget na sua tela inicial deve ser atualizado com os novos dados conclusão neste tutorial, você aprendeu como criar um widget de tela inicial no flutter usando o home widget pacote e integrá lo com o back4app para exibir dados dinâmicos isso permite que você forneça aos usuários informações atualizadas diretamente em suas telas iniciais, aumentando o engajamento e a experiência do usuário próximos passos dados dinâmicos implemente atualizações de dados em tempo real usando as consultas ao vivo do back4app interatividade adicione ações de clique ao seu widget para abrir páginas específicas no seu aplicativo personalização estilize seu widget para combinar com o tema e design do seu aplicativo recursos adicionais documentação do back4app https //www back4app com/docs pacote home widget no pub dev https //pub dev/packages/home widget guia do parse sdk para flutter https //docs parseplatform org/flutter/guide/ documentação oficial do flutter https //flutter dev/docs feliz codificação!