Plus
Construire et utiliser une extension Flutter DevTools avec Back4app

18min
Introduction
Flutter DevTools est une suite puissante pour le débogage, l'inspection et le profilage des applications Flutter. Avec le framework d'extension Dart & Flutter DevTools, les développeurs peuvent créer des extensions personnalisées pour améliorer leurs flux de travail de débogage et de développement. Ces extensions peuvent être construites en tant qu'applications web Flutter et intégrées de manière transparente dans la suite DevTools.
Dans ce tutoriel, nous allons explorer comment créer une extension Flutter DevTools, l'intégrer avec une application Flutter qui utilise Back4app pour les services backend, et déboguer l'application en utilisant l'extension personnalisée. Cela vous aidera à construire des outils de développement sur mesure qui peuvent rationaliser votre processus de développement et fournir des informations plus approfondies sur le comportement de votre application.
Prérequis
Pour compléter ce tutoriel, vous aurez besoin de :
Un compte Back4app. Inscrivez-vous pour un compte gratuit sur Back4app.com.
Un environnement de développement Flutter configuré sur votre machine locale. Suivez le guide d'installation de Flutter si vous ne l'avez pas encore configuré.
Connaissances de base en Dart, widgets Flutter et utilisation de Flutter DevTools.
Étape 1 – Configuration de votre backend Back4app
Créer un projet Back4app: Connectez-vous à votre compte Back4app et créez un nouveau projet.
Créer des classes Parse: Pour ce tutoriel, créez une classe Parse nommée ThemeSettings pour stocker les données de configuration du thème pour votre application Flutter :
themeName (String) : Le nom du thème.
primaryColor (String) : La couleur principale du thème.
accentColor (String) : La couleur d'accentuation du thème.
Remplir la classe avec des données d'exemple: Ajoutez plusieurs enregistrements à la ThemeSettings classe pour simuler les configurations de thème que votre application Flutter utilisera.
Obtenez vos identifiants Back4app: Accédez aux paramètres de votre projet pour récupérer votre ID d'application et votre clé client, dont vous aurez besoin pour connecter votre application Flutter à Back4app.
Étape 2 – Création de l'extension Flutter DevTools
Créer un nouveau projet Flutter: Ouvrez votre terminal ou votre invite de commande et exécutez :
Bash
flutter create theme_builder_extension
flutter create theme_builder_extension
﻿
Configurer le répertoire de l'extension: Accédez à votre répertoire racine de projet et créez un nouveau répertoire pour votre extension DevTools :
Bash
mkdir devtools_extension
mkdir devtools_extension
﻿
Dans ce répertoire, créez un config.yaml fichier pour stocker les métadonnées requises par 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
﻿
Ajouter des dépendances: Ouvrez pubspec.yaml et ajoutez les dépendances suivantes :
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
﻿
Exécutez flutter pub get pour installer ces dépendances.
Création de l'extension DevTools: Dans lib/main.dart, remplacez le contenu par défaut par le code suivant pour envelopper votre application web Flutter dans un DevToolsExtension widget:
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'),
        ),
      ),
    );
  }
}
﻿
Cela enveloppe votre application dans le DevToolsExtension widget, qui gère le thème et l'intégration avec la suite DevTools.
Ajout d'intégrations DevTools: Modifiez votre application pour intégrer des fonctionnalités spécifiques à DevTools, telles que l'utilisation du DevToolsButton au lieu d'un 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'),
        ),
      ),
    );
  }
}
﻿
Ce changement garantit que l'interface utilisateur de votre extension s'intègre parfaitement avec le reste de la suite DevTools.
Étape 3 – Intégration avec Back4app
Initialiser Parse dans votre extension: Puisque cette extension interagira avec Back4app, initialisez Parse dans votre extension :
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()));
}
﻿
Récupérer et utiliser les données de thème: Utilisez les données de Back4app dans votre extension pour générer et appliquer des thèmes :
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');
    }
  }
}
﻿
Ce code récupère les paramètres de thème depuis Back4app et les affiche dans une liste. La sélection d'un thème pourrait déclencher une logique supplémentaire pour l'appliquer.
Étape 4 – Tester votre extension dans un environnement simulé
Exécutez l'extension dans un environnement simulé: Pour tester votre extension sans la compiler à chaque fois, utilisez l'environnement DevTools simulé:
Bash
flutter run -d chrome --dart-define=USE_SIMULATED_ENVIRONMENT=true
flutter run -d chrome --dart-define=USE_SIMULATED_ENVIRONMENT=true
﻿
Simuler l'application connectée: Démarrez une autre application Flutter à laquelle votre extension se connectera. Copiez et collez l'URI du service VM de l'application connectée et l'URI du service DTD dans l'environnement simulé.
Étape 5 – Construire et publier l'extension
Construire l'extension: Une fois que vous êtes satisfait de votre extension, construisez-la pour la production :
Bash
flutter pub get
flutter build web --output=devtools_extension/build
flutter pub get
flutter build web --output=devtools_extension/build
﻿
Valider l'extension: Utilisez la commande de validation DevTools pour vous assurer que votre extension est correctement configurée :
Bash
dart run devtools_extensions validate
dart run devtools_extensions validate
﻿
Publier l'extension: Publiez votre extension sur pub.dev afin que d'autres développeurs puissent l'utiliser :
Bash
flutter pub publish
flutter pub publish
﻿
Conclusion
Dans ce tutoriel, vous avez appris à créer une extension Flutter DevTools, à l'intégrer avec Back4app pour des services backend, et à la tester dans un environnement simulé. En étendant DevTools, vous pouvez créer des outils personnalisés qui améliorent votre productivité et offrent de nouvelles perspectives sur le comportement de votre application. Une fois votre extension prête, la publier sur pub.dev permet à d'autres développeurs de bénéficier de votre travail.
Pour plus d'informations sur l'utilisation de Flutter avec Back4app, consultez la documentation de Back4app et la documentation de Flutter DevTools. Bon codage !
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Comment utiliser des isolats dans Flutter avec Back4app pour gérer le traitement intensif des données
Comment utiliser des boutons segmentés dans Flutter avec Back4app