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

18min
Введение
Flutter DevTools — это мощный набор инструментов для отладки, инспекции и профилирования приложений Flutter. С помощью фреймворка расширений Dart & Flutter DevTools разработчики могут создавать пользовательские расширения для улучшения своих рабочих процессов отладки и разработки. Эти расширения могут быть созданы как веб-приложения Flutter и бесшовно интегрированы в набор DevTools.
В этом учебном пособии мы рассмотрим, как создать расширение Flutter DevTools, интегрировать его с приложением Flutter, использующим Back4app для бэкенд-сервисов, и отлаживать приложение с помощью пользовательского расширения. Это поможет вам создать специализированные инструменты для разработчиков, которые могут упростить ваш процесс разработки и предоставить более глубокое понимание поведения вашего приложения.
Предварительные условия
Чтобы завершить это учебное пособие, вам потребуется:
Аккаунт Back4app. Зарегистрируйтесь для получения бесплатного аккаунта на Back4app.com.
Настроенная среда разработки Flutter на вашем локальном компьютере. Следуйте руководству по установке Flutter если вы еще не настроили её.
Базовые знания Dart, виджетов Flutter и использования Flutter DevTools.
Шаг 1 – Настройка вашего Back4app бэкенда
Создайте проект Back4app: Войдите в ваш аккаунт Back4app и создайте новый проект.
Создайте классы Parse: Для этого учебника создайте класс Parse с именем ThemeSettings для хранения данных конфигурации темы для вашего Flutter приложения:
themeName (String): Название темы.
primaryColor (String): Основной цвет темы.
accentColor (String): Акцентный цвет темы.
Заполните класс образцовыми данными: Добавьте несколько записей в класс ThemeSettings для имитации конфигураций темы, которые будет использовать ваше Flutter приложение.
Получите свои учетные данные Back4app: Перейдите в настройки вашего проекта, чтобы получить ваш идентификатор приложения и ключ клиента, которые вам понадобятся для подключения вашего Flutter приложения к Back4app.
Шаг 2 – Создание расширения Flutter DevTools
Создайте новый проект Flutter: Откройте ваш терминал или командную строку и выполните:
Bash
flutter create theme_builder_extension
flutter create theme_builder_extension
﻿
Настройте каталог расширения: Перейдите в корневой каталог вашего проекта и создайте новый каталог для вашего расширения DevTools:
Bash
mkdir devtools_extension
mkdir devtools_extension
﻿
В этом каталоге создайте файл config.yaml для хранения метаданных, необходимых DevTools:
YAML
package_name: theme_builder_extension
version: 1.0.0
issue_tracker: https://github.com/yourusername/theme_builder_extension/issues
material_icon: assets/icon.png
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 и добавьте следующие зависимости:
YAML
dependencies:
  flutter:
    sdk: flutter
  devtools_extensions: latest_version
  devtools_app_shared: latest_version
dependencies:
  flutter:
    sdk: flutter
  devtools_extensions: latest_version
  devtools_app_shared: latest_version
﻿
Запустите flutter pub get для установки этих зависимостей.
Создание расширения DevTools: В lib/main.dart, замените содержимое по умолчанию следующим кодом, чтобы обернуть ваше Flutter веб-приложение в DevToolsExtension виджет:
Dart
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'),
        ),
      ),
    );
  }
}
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:
Dart
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'),
        ),
      ),
    );
  }
}
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 в вашем расширении:
Dart
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()));
}
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 в вашем расширении для генерации и применения тем:
Dart
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');
    }
  }
}
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:
Bash
flutter run -d chrome --dart-define=USE_SIMULATED_ENVIRONMENT=true
flutter run -d chrome --dart-define=USE_SIMULATED_ENVIRONMENT=true
﻿
Симулировать подключенное приложение: Запустите другое приложение Flutter, к которому будет подключено ваше расширение. Скопируйте и вставьте URI службы VM и URI службы DTD подключенного приложения в смоделированную среду.
Шаг 5 – Создание и публикация расширения
Создать расширение: Как только вы будете довольны своим расширением, создайте его для производства:
Bash
flutter pub get
flutter build web --output=devtools_extension/build
flutter pub get
flutter build web --output=devtools_extension/build
﻿
Проверить расширение: Используйте команду проверки DevTools, чтобы убедиться, что ваше расширение правильно настроено:
Bash
dart run devtools_extensions validate
dart run devtools_extensions validate
﻿
Опубликовать расширение: Опубликуйте ваше расширение на pub.dev, чтобы другие разработчики могли его использовать:
Bash
flutter pub publish
flutter pub publish
﻿
Заключение
В этом руководстве вы узнали, как создать расширение Flutter DevTools, интегрировать его с Back4app для бэкенд-сервисов и протестировать его в смоделированной среде. Расширяя DevTools, вы можете создавать пользовательские инструменты, которые повышают вашу продуктивность и предлагают новые идеи о поведении вашего приложения. Как только ваше расширение будет готово, его публикация на pub.dev, позволит другим разработчикам воспользоваться вашей работой.
Для получения дополнительной информации о использовании Flutter с Back4app, ознакомьтесь с документацией Back4app и документацией Flutter DevTools. Удачного кодирования!
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Как использовать изоляты в Flutter с Back4app для обработки объемных данных
Как использовать сегментированные кнопки в Flutter с Back4app