Как создать виджеты на главном экране в Flutter с помощью HomeWidget и Back4App

введение виджеты на главном экране позволяют пользователям получать информацию в реальном времени из вашего приложения прямо на главном экране их устройства без открытия приложения с помощью flutter создание этих виджетов требует некоторого кода, специфичного для платформы однако пакет home widget https //pub dev/packages/home widget устраняет этот разрыв, позволяя обмениваться данными между вашим приложением flutter и виджетами на главном экране с использованием кода dart в этом учебном пособии вы узнаете, как создать виджет на главном экране в flutter, используя пакет home widget и интегрировать его с back4app — бэкендом как сервисом, работающим на parse server к концу этого учебного пособия у вас будет приложение flutter, которое отображает данные из back4app в виджете на главном экране предварительные требования чтобы завершить это учебное пособие, вам потребуется flutter sdk установлен на вашем компьютере вы можете следовать за официальным руководством по установке flutter https //flutter dev/docs/get started/install для вашей операционной системы базовые знания flutter и dart если вы новичок в flutter, рассмотрите возможность изучения документации flutter https //flutter dev/docs для ознакомления с основами ide или текстовый редактор такой как visual studio code или android studio аккаунт back4app зарегистрируйтесь для получения бесплатного аккаунта на back4app https //www back4app com/ parse server sdk для flutter добавлен в ваш проект вы можете узнать, как его настроить, следуя за руководством по flutter sdk от back4app https //www back4app com/docs/flutter/parse flutter sdk настройка, специфичная для платформы для виджетов на главном экране android и ios шаг 1 – настройка проекта flutter 1 1 создайте новый проект flutter откройте терминал и выполните flutter create home widget app перейдите в каталог проекта cd home widget app 1 2 добавить зависимости откройте pubspec yaml и добавьте следующие зависимости dependencies flutter sdk flutter home widget ^0 2 4 parse server sdk flutter ^4 0 1 запустите flutter pub get для установки пакетов шаг 2 – настройка back4app 2 1 создайте новое приложение back4app войдите в вашу панель управления back4app https //dashboard back4app com/ нажмите на "создать новое приложение" введите имя для вашего приложения, например, "homewidgetapp" , и нажмите "создать" 2 2 настройте модель данных в вашей панели управления приложением перейдите в раздел "база данных" нажмите на "создать класс" в модальном окне выберите "пользовательский" введите "сообщение" в качестве имени класса нажмите "создать класс" 2 3 добавить столбцы в класс в классе "сообщение" нажмите на "+" для добавления нового столбца добавьте следующие столбцы название тип строка содержимое тип строка добавьте несколько образцов данных в класс "сообщение" например 2 4 получить учетные данные приложения перейдите в настройки приложения > безопасность и ключи запишите ваш идентификатор приложения и ключ клиента шаг 3 – инициализация parse в вашем приложении flutter откройте lib/main 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'; 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()); } замените 'your application id' и 'your client key' на ваши реальные учетные данные back4app шаг 4 – получение данных из back4app создайте новый файл 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'), ), ], ), ), ); } } объяснение класс сообщения простая модель класса для хранения данных сообщения fetchmessage() извлекает данные из класса message в back4app и обновляет переменную message updatehomewidget() сохраняет извлеченные данные в виджет домашнего экрана с помощью homewidget savewidgetdata , и инициирует обновление с помощью homewidget updatewidget build() отображает данные сообщения и кнопку для обновления сообщения шаг 5 – настройка виджета домашнего экрана 5 1 настройка android 5 1 1 создание макета виджета создайте новый xml файл макета в android/app/src/main/res/layout/ с именем 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 создание провайдера виджета создайте новый класс java в android/app/src/main/java/your/package/name/ с именем 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 } } замените your package name на ваше фактическое имя пакета 5 1 3 обновите android manifest добавьте провайдер виджетов в ваш 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 создайте xml для информации о виджете создайте новый xml файл в android/app/src/main/res/xml/ с именем 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 настройка ios 5 2 1 создание расширения виджета откройте ваш проект flutter в xcode, открыв ios/runner xcworkspace нажмите file > new > target выберите widget extension и нажмите next введите homewidget в качестве имени продукта и убедитесь, что include configuration intent не отмечено нажмите finish и activate схему 5 2 2 обновите код виджета в расширении homewidget откройте homewidget swift и измените его 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 ") } } замените your group id на идентификатор вашей группы приложений (например, group com example homewidgetapp ) 5 2 3 настройка групп приложений в xcode выберите ваш проект и перейдите в signing & capabilities добавьте "app groups" как для основной цели приложения, так и для расширения виджета создайте новую группу приложений (например, group com example homewidgetapp ) убедитесь, что обе цели имеют включенную одну и ту же группу приложений 5 3 обновите код flutter для конфигураций, специфичных для платформы в вашем updatehomewidget() методе в home page dart , обновите имена виджетов await homewidget updatewidget( name 'homewidgetprovider', // for android, the class name of your appwidgetprovider iosname 'homewidget', // for ios, the name of your widget extension ); шаг 6 – запуск приложения и тестирование виджета 6 1 запустите приложение в вашем терминале выполните flutter run 6 2 добавьте виджет на главный экран android долгим нажатием на главном экране выберите "виджеты" найдите ваше приложение в списке виджетов перетащите виджет на главный экран ios введите режим дрожания , долго нажав на главном экране нажмите на "+" кнопку в верхнем левом углу найдите ваш виджет по имени добавьте виджет на главный экран 6 3 обновления тестовых данных нажмите на "обновить сообщение" кнопку в вашем приложении, чтобы получить новые данные из back4app виджет на вашем домашнем экране должен обновиться с новыми данными заключение в этом учебном пособии вы узнали, как создать виджет на домашнем экране в flutter, используя пакет home widget и интегрировать его с back4app для отображения динамических данных это позволяет предоставлять пользователям актуальную информацию прямо на их домашних экранах, что повышает вовлеченность и пользовательский опыт следующие шаги динамические данные реализуйте обновления данных в реальном времени с помощью live queries от back4app интерактивность добавьте действия по клику к вашему виджету, чтобы открывать определенные страницы в вашем приложении настройка настройте ваш виджет, чтобы он соответствовал теме и дизайну вашего приложения дополнительные ресурсы документация back4app https //www back4app com/docs пакет home widget на pub dev https //pub dev/packages/home widget руководство по parse sdk для flutter https //docs parseplatform org/flutter/guide/ официальная документация flutter https //flutter dev/docs счастливого кодирования!