Создание и использование расширения Flutter DevTools с Back4app

введение flutter devtools — это мощный набор инструментов для отладки, инспекции и профилирования приложений flutter с помощью фреймворка расширений dart & flutter devtools разработчики могут создавать пользовательские расширения для улучшения своих рабочих процессов отладки и разработки эти расширения могут быть созданы как веб приложения flutter и бесшовно интегрированы в набор devtools в этом учебном пособии мы рассмотрим, как создать расширение flutter devtools, интегрировать его с приложением flutter, использующим back4app для бэкенд сервисов, и отлаживать приложение с помощью пользовательского расширения это поможет вам создать специализированные инструменты для разработчиков, которые могут упростить ваш процесс разработки и предоставить более глубокое понимание поведения вашего приложения предварительные условия чтобы завершить это учебное пособие, вам потребуется аккаунт back4app зарегистрируйтесь для получения бесплатного аккаунта на back4app com https //www back4app com настроенная среда разработки flutter на вашем локальном компьютере следуйте руководству по установке flutter https //flutter dev/docs/get started/install если вы еще не настроили её базовые знания dart, виджетов flutter и использования flutter devtools шаг 1 – настройка вашего back4app бэкенда создайте проект back4app войдите в ваш аккаунт back4app https //www back4app com/ и создайте новый проект создайте классы parse для этого учебника создайте класс parse с именем themesettings для хранения данных конфигурации темы для вашего flutter приложения themename (string) название темы primarycolor (string) основной цвет темы accentcolor (string) акцентный цвет темы заполните класс образцовыми данными добавьте несколько записей в класс themesettings для имитации конфигураций темы, которые будет использовать ваше flutter приложение получите свои учетные данные back4app перейдите в настройки вашего проекта, чтобы получить ваш идентификатор приложения и ключ клиента, которые вам понадобятся для подключения вашего flutter приложения к back4app шаг 2 – создание расширения flutter devtools создайте новый проект flutter откройте ваш терминал или командную строку и выполните flutter create theme builder extension настройте каталог расширения перейдите в корневой каталог вашего проекта и создайте новый каталог для вашего расширения devtools mkdir devtools extension в этом каталоге создайте файл config yaml для хранения метаданных, необходимых 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 добавьте зависимости откройте pubspec yaml и добавьте следующие зависимости dependencies flutter sdk flutter devtools extensions latest version devtools app shared latest version запустите flutter pub get для установки этих зависимостей создание расширения devtools в lib/main dart , замените содержимое по умолчанию следующим кодом, чтобы обернуть ваше flutter веб приложение в devtoolsextension виджет 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'), ), ), ); } } это оборачивает ваше приложение в devtoolsextension виджет, который обрабатывает темизацию и интеграцию с набором инструментов devtools добавление интеграций devtools измените ваше приложение, чтобы интегрировать функции, специфичные для devtools, такие как использование devtoolsbutton вместо обычного 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'), ), ), ); } } это изменение гарантирует, что пользовательский интерфейс вашего расширения гармонично сочетается с остальной частью набора инструментов devtools шаг 3 – интеграция с back4app инициализируйте parse в вашем расширении поскольку это расширение будет взаимодействовать с back4app, инициализируйте parse в вашем расширении 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())); } получите и используйте данные темы используйте данные из back4app в вашем расширении для генерации и применения тем 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'); } } } этот код получает настройки темы из back4app и отображает их в списке выбор темы может вызвать дополнительную логику для ее применения шаг 4 – тестирование вашего расширения в смоделированной среде запустите расширение в смоделированной среде чтобы протестировать ваше расширение без компиляции его каждый раз, используйте смоделированную среду devtools flutter run d chrome dart define=use simulated environment=true симулировать подключенное приложение запустите другое приложение flutter, к которому будет подключено ваше расширение скопируйте и вставьте uri службы vm и uri службы dtd подключенного приложения в смоделированную среду шаг 5 – создание и публикация расширения создать расширение как только вы будете довольны своим расширением, создайте его для производства flutter pub get flutter build web output=devtools extension/build проверить расширение используйте команду проверки devtools, чтобы убедиться, что ваше расширение правильно настроено dart run devtools extensions validate опубликовать расширение опубликуйте ваше расширение на pub dev , чтобы другие разработчики могли его использовать flutter pub publish заключение в этом руководстве вы узнали, как создать расширение flutter devtools, интегрировать его с back4app для бэкенд сервисов и протестировать его в смоделированной среде расширяя devtools, вы можете создавать пользовательские инструменты, которые повышают вашу продуктивность и предлагают новые идеи о поведении вашего приложения как только ваше расширение будет готово, его публикация на pub dev , позволит другим разработчикам воспользоваться вашей работой для получения дополнительной информации о использовании flutter с back4app, ознакомьтесь с документацией back4app https //www back4app com/docs и документацией flutter devtools https //flutter dev/docs/development/tools/devtools/overview удачного кодирования!