Mehr
Erstellen und Verwenden einer Flutter DevTools-Erweiterung mit Back4app

19min
Einführung
Flutter DevTools ist eine leistungsstarke Suite zum Debuggen, Inspizieren und Profilieren von Flutter-Apps. Mit dem Dart & Flutter DevTools-Erweiterungsframework können Entwickler benutzerdefinierte Erweiterungen erstellen, um ihre Debugging- und Entwicklungsabläufe zu verbessern. Diese Erweiterungen können als Flutter-Web-Apps erstellt und nahtlos in die DevTools-Suite integriert werden.
In diesem Tutorial werden wir erkunden, wie man eine Flutter DevTools-Erweiterung erstellt, sie mit einer Flutter-App integriert, die Back4app für Backend-Dienste verwendet, und die Anwendung mit der benutzerdefinierten Erweiterung debuggt. Dies wird Ihnen helfen, maßgeschneiderte Entwicklerwerkzeuge zu erstellen, die Ihren Entwicklungsprozess optimieren und tiefere Einblicke in das Verhalten Ihrer App bieten.
Voraussetzungen
Um dieses Tutorial abzuschließen, benötigen Sie:
Ein Back4app-Konto. Melden Sie sich für ein kostenloses Konto unter Back4app.com an.
Eine Flutter-Entwicklungsumgebung, die auf Ihrem lokalen Computer eingerichtet ist. Folgen Sie der Flutter-Installationsanleitung , wenn Sie sie noch nicht eingerichtet haben.
Grundkenntnisse in Dart, Flutter-Widgets und der Verwendung von Flutter DevTools.
Schritt 1 – Einrichten Ihres Back4app Backends
Erstellen Sie ein Back4app-Projekt: Melden Sie sich bei Ihrem Back4app-Konto an und erstellen Sie ein neues Projekt.
Erstellen Sie Parse-Klassen: Für dieses Tutorial erstellen Sie eine Parse-Klasse mit dem Namen ThemeSettings zur Speicherung von Themenkonfigurationsdaten für Ihre Flutter-App:
themeName (String): Der Name des Themas.
primaryColor (String): Die Hauptfarbe des Themas.
accentColor (String): Die Akzentfarbe des Themas.
Füllen Sie die Klasse mit Beispieldaten: Fügen Sie mehrere Datensätze zur ThemeSettings-Klasse hinzu, um Themenkonfigurationen zu simulieren, die Ihre Flutter-App verwenden wird.
Holen Sie sich Ihre Back4app-Anmeldeinformationen: Navigieren Sie zu Ihren Projekteinstellungen, um Ihre Anwendungs-ID und Ihren Client-Schlüssel abzurufen, die Sie benötigen, um Ihre Flutter-App mit Back4app zu verbinden.
Schritt 2 – Erstellen der Flutter DevTools-Erweiterung
Erstellen Sie ein neues Flutter-Projekt: Öffnen Sie Ihr Terminal oder Ihre Eingabeaufforderung und führen Sie aus:
Bash
flutter create theme_builder_extension
flutter create theme_builder_extension
﻿
Richten Sie das Erweiterungsverzeichnis ein: Navigieren Sie zu Ihrem Projektstammverzeichnis und erstellen Sie ein neues Verzeichnis für Ihre DevTools-Erweiterung:
Bash
mkdir devtools_extension
mkdir devtools_extension
﻿
Erstellen Sie in diesem Verzeichnis eine config.yaml-Datei, um die von DevTools benötigten Metadaten zu speichern:
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
﻿
Abhängigkeiten hinzufügen: Öffnen Sie pubspec.yaml und fügen Sie die folgenden Abhängigkeiten hinzu:
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
﻿
Führen Sie flutter pub get aus, um diese Abhängigkeiten zu installieren.
Erstellen der DevTools-Erweiterung: In lib/main.dart, ersetzen Sie den Standardinhalt durch den folgenden Code, um Ihre Flutter-Webanwendung in ein DevToolsExtension-Widget zu wickeln:
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'),
        ),
      ),
    );
  }
}
﻿
Dies wickelt Ihre App in das DevToolsExtension-Widget, das das Thema und die Integration mit der DevTools-Suite verwaltet.
Hinzufügen von DevTools-Integrationen: Ändern Sie Ihre App, um DevTools-spezifische Funktionen zu integrieren, wie z.B. die Verwendung des DevToolsButton anstelle eines regulären 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'),
        ),
      ),
    );
  }
}
﻿
Diese Änderung stellt sicher, dass die Benutzeroberfläche Ihrer Erweiterung nahtlos mit dem Rest der DevTools-Suite verschmilzt.
Schritt 3 – Integration mit Back4app
Initialisieren Sie Parse in Ihrer Erweiterung: Da diese Erweiterung mit Back4app interagiert, initialisieren Sie Parse in Ihrer Erweiterung:
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()));
}
﻿
Abrufen und Verwenden von Theme-Daten: Verwenden Sie die Daten von Back4app in Ihrer Erweiterung, um Themes zu generieren und anzuwenden:
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');
    }
  }
}
﻿
Dieser Code ruft die Themen-Einstellungen von Back4app ab und zeigt sie in einer Liste an. Die Auswahl eines Themas könnte zusätzliche Logik auslösen, um es anzuwenden.
Schritt 4 – Testen Sie Ihre Erweiterung in einer simulierten Umgebung
Führen Sie die Erweiterung in einer simulierten Umgebung aus: Um Ihre Erweiterung zu testen, ohne sie jedes Mal zu kompilieren, verwenden Sie die simulierte DevTools-Umgebung:
Bash
flutter run -d chrome --dart-define=USE_SIMULATED_ENVIRONMENT=true
flutter run -d chrome --dart-define=USE_SIMULATED_ENVIRONMENT=true
﻿
Bash
flutter run -d chrome --dart-define=USE_SIMULATED_ENVIRONMENT=true
flutter run -d chrome --dart-define=USE_SIMULATED_ENVIRONMENT=true
﻿
Bash
flutter run -d chrome --dart-define=USE_SIMULATED_ENVIRONMENT=true
flutter run -d chrome --dart-define=USE_SIMULATED_ENVIRONMENT=true
﻿
Simulieren Sie die verbundene App: Starten Sie eine andere Flutter-App, mit der Ihre Erweiterung verbunden wird. Kopieren Sie die VM-Dienst-URI und die DTD-Dienst-URI der verbundenen App in die simulierte Umgebung.
Schritt 5 – Erstellen und Veröffentlichen der Erweiterung
Erstellen Sie die Erweiterung: Sobald Sie mit Ihrer Erweiterung zufrieden sind, erstellen Sie sie für die Produktion:
Bash
flutter pub get
flutter build web --output=devtools_extension/build
flutter pub get
flutter build web --output=devtools_extension/build
﻿
Validieren Sie die Erweiterung: Verwenden Sie den DevTools-Validierungsbefehl, um sicherzustellen, dass Ihre Erweiterung korrekt konfiguriert ist:
Bash
dart run devtools_extensions validate
dart run devtools_extensions validate
﻿
Veröffentlichen Sie die Erweiterung: Veröffentlichen Sie Ihre Erweiterung auf pub.dev, damit andere Entwickler sie nutzen können:
Bash
flutter pub publish
flutter pub publish
﻿
Fazit
In diesem Tutorial haben Sie gelernt, wie Sie eine Flutter DevTools-Erweiterung erstellen, sie mit Back4app für Backend-Dienste integrieren und sie in einer simulierten Umgebung testen. Durch die Erweiterung von DevTools können Sie benutzerdefinierte Tools erstellen, die Ihre Produktivität steigern und neue Einblicke in das Verhalten Ihrer App bieten. Sobald Ihre Erweiterung bereit ist, ermöglicht die Veröffentlichung auf pub.dev, dass andere Entwickler von Ihrer Arbeit profitieren.
Für weitere Informationen zur Verwendung von Flutter mit Back4app, schauen Sie sich die Back4app-Dokumentation und die Flutter DevTools-Dokumentation. Viel Spaß beim Programmieren!
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Wie man Isolate in Flutter mit Back4app verwendet, um umfangreiche Datenverarbeitung zu behandeln
ALS NÄCHSTES
Wie man segmentierte Schaltflächen in Flutter mit Back4app verwendet