Back4appを使用したFlutter DevTools拡張機能の構築と使用

17min
はじめに
Flutter DevToolsは、Flutterアプリのデバッグ、検査、プロファイリングのための強力なスイートです。DartとFlutter DevTools拡張フレームワークを使用することで、開発者はデバッグと開発のワークフローを強化するカスタム拡張を作成できます。これらの拡張はFlutterウェブアプリとして構築され、DevToolsスイートにシームレスに統合できます。
このチュートリアルでは、Flutter DevTools拡張を作成し、バックエンドサービスにBack4appを使用するFlutterアプリと統合し、カスタム拡張を使用してアプリケーションをデバッグする方法を探ります。これにより、開発プロセスを効率化し、アプリの動作に関する深い洞察を提供するカスタマイズされた開発者ツールを構築するのに役立ちます。
前提条件
このチュートリアルを完了するには、次のものが必要です:
Back4appアカウント。 Back4app.comで無料アカウントにサインアップしてください。
ローカルマシンにFlutter開発環境をセットアップしてください。まだセットアップしていない場合は、Flutterインストールガイドを参照してください。
Dart、Flutterウィジェット、およびFlutter DevToolsの基本的な知識。
ステップ 1 – Back4app バックエンドの設定
Back4app プロジェクトを作成: あなたの Back4app アカウント にログインし、新しいプロジェクトを作成します。
Parse クラスを作成: このチュートリアルでは、Flutter アプリのテーマ設定データを保存するために ThemeSettings という名前の Parse クラスを作成します:
themeName (String): テーマの名前。
primaryColor (String): テーマの主要な色。
accentColor (String): テーマのアクセントカラー。
サンプルデータでクラスを埋める: Flutter アプリが使用するテーマ設定をシミュレートするために、 ThemeSettings クラスにいくつかのレコードを追加します。
Back4app 認証情報を取得: プロジェクト設定に移動して、Flutter アプリを Back4app に接続するために必要なアプリケーション ID とクライアントキーを取得します。
ステップ 2 – Flutter DevTools 拡張の作成
新しい Flutter プロジェクトを作成: ターミナルまたはコマンドプロンプトを開き、次のコマンドを実行します:
Bash
flutter create theme_builder_extension
flutter create theme_builder_extension
﻿
拡張機能ディレクトリの設定: プロジェクトのルートディレクトリに移動し、DevTools拡張機能用の新しいディレクトリを作成します:
Bash
mkdir devtools_extension
mkdir devtools_extension
﻿
このディレクトリ内に、DevToolsに必要なメタデータを保存するための config.yaml ファイルを作成します:
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統合の追加: アプリを修正して、通常の ElevatedButton の代わりに DevToolsButton を使用するなど、DevTools特有の機能を統合します。
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'),
        ),
      ),
    );
  }
}
﻿
この変更により、拡張機能のUIが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アプリを起動します。接続されたアプリのVMサービスURIとDTDサービスURIをシミュレーション環境にコピーして貼り付けます。
ステップ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 に公開することで、他の開発者があなたの成果を利用できるようになります。
Back4appを使用したFlutterに関する詳細情報は、 Back4appのドキュメント と Flutter DevToolsのドキュメント をご覧ください。コーディングを楽しんでください!
更新日 24 Jan 2025
このページは役に立ちましたか？
FlutterでIsolatesを使ってBack4appと連携し、重いデータ処理を行う方法
FlutterでBack4appを使用してセグメント化されたボタンを使用する方法