Di più
Crea e usa un'estensione Flutter DevTools con Back4app

18min
Introduzione
Flutter DevTools è una potente suite per il debug, l'ispezione e il profiling delle app Flutter. Con il framework di estensione Dart & Flutter DevTools, gli sviluppatori possono creare estensioni personalizzate per migliorare i loro flussi di lavoro di debug e sviluppo. Queste estensioni possono essere costruite come app web Flutter e integrate senza soluzione di continuità nella suite DevTools.
In questo tutorial, esploreremo come creare un'estensione Flutter DevTools, integrarla con un'app Flutter che utilizza Back4app per i servizi backend e fare il debug dell'applicazione utilizzando l'estensione personalizzata. Questo ti aiuterà a costruire strumenti per sviluppatori su misura che possono semplificare il tuo processo di sviluppo e fornire approfondimenti più dettagliati sul comportamento della tua app.
Requisiti
Per completare questo tutorial, avrai bisogno di:
Un account Back4app. Registrati per un account gratuito su Back4app.com.
Un ambiente di sviluppo Flutter configurato sul tuo computer locale. Segui la guida all'installazione di Flutter se non l'hai ancora configurato.
Conoscenze di base di Dart, widget Flutter e utilizzo di Flutter DevTools.
Passo 1 – Configurare il tuo backend Back4app
Crea un progetto Back4app: Accedi al tuo account Back4app e crea un nuovo progetto.
Crea classi Parse: Per questo tutorial, crea una classe Parse chiamata ThemeSettings per memorizzare i dati di configurazione del tema per la tua app Flutter:
themeName (String): Il nome del tema.
primaryColor (String): Il colore principale del tema.
accentColor (String): Il colore di accento del tema.
Popola la classe con dati di esempio: Aggiungi diversi record alla ThemeSettings classe per simulare le configurazioni del tema che la tua app Flutter utilizzerà.
Ottieni le tue credenziali Back4app: Naviga nelle impostazioni del tuo progetto per recuperare il tuo ID applicazione e la chiave client, che ti serviranno per connettere la tua app Flutter a Back4app.
Passo 2 – Creare l'estensione Flutter DevTools
Crea un nuovo progetto Flutter: Apri il tuo terminale o prompt dei comandi e esegui:
Bash
flutter create theme_builder_extension
flutter create theme_builder_extension
﻿
Imposta la directory dell'estensione: Naviga nella directory principale del tuo progetto e crea una nuova directory per la tua estensione DevTools:
Bash
mkdir devtools_extension
mkdir devtools_extension
﻿
All'interno di questa directory, crea un config.yaml file per memorizzare i metadati richiesti da 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
﻿
Aggiungi dipendenze: Apri pubspec.yaml e aggiungi le seguenti dipendenze:
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
﻿
Esegui flutter pub get per installare queste dipendenze.
Creazione dell'estensione DevTools: In lib/main.dart, sostituisci il contenuto predefinito con il seguente codice per avvolgere la tua app web Flutter in 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'),
        ),
      ),
    );
  }
}
﻿
Questo avvolge la tua app nel DevToolsExtension widget, che gestisce il tema e l'integrazione con la suite DevTools.
Aggiunta delle integrazioni DevTools: Modifica la tua app per integrare funzionalità specifiche di DevTools, come l'utilizzo del DevToolsButton invece di un normale 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'),
        ),
      ),
    );
  }
}
﻿
Questa modifica garantisce che l'interfaccia utente della tua estensione si integri perfettamente con il resto della suite DevTools.
Passo 3 – Integrazione con Back4app
Inizializza Parse nella tua Estensione: Poiché questa estensione interagirà con Back4app, inizializza Parse nella tua estensione:
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()));
}
﻿
Recupera e Usa i Dati del Tema: Usa i dati da Back4app nella tua estensione per generare e applicare temi:
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');
    }
  }
}
﻿
Questo codice recupera le impostazioni del tema da Back4app e le visualizza in un elenco. Selezionare un tema potrebbe attivare logiche aggiuntive per applicarlo.
Passo 4 – Testare la tua Estensione in un Ambiente Simulato
Esegui l'Estensione in un Ambiente Simulato: Per testare la tua estensione senza compilarla ogni volta, utilizza l'ambiente DevTools simulato:
Bash
flutter run -d chrome --dart-define=USE_SIMULATED_ENVIRONMENT=true
flutter run -d chrome --dart-define=USE_SIMULATED_ENVIRONMENT=true
﻿
Simula l'app connessa: Avvia un'altra app Flutter a cui la tua estensione si connetterà. Copia e incolla l'URI del servizio VM dell'app connessa e l'URI del servizio DTD nell'ambiente simulato.
Passo 5 – Costruire e Pubblicare l'Estensione
Costruisci l'Estensione: Una volta che sei soddisfatto della tua estensione, costruiscila per la produzione:
Bash
flutter pub get
flutter build web --output=devtools_extension/build
flutter pub get
flutter build web --output=devtools_extension/build
﻿
Valida l'Estensione: Usa il comando di validazione di DevTools per assicurarti che la tua estensione sia configurata correttamente:
Bash
dart run devtools_extensions validate
dart run devtools_extensions validate
﻿
Pubblica l'Estensione: Pubblica la tua estensione su pub.dev affinché altri sviluppatori possano usarla:
Bash
flutter pub publish
flutter pub publish
﻿
Conclusione
In questo tutorial, hai imparato come creare un'estensione Flutter DevTools, integrarla con Back4app per i servizi backend e testarla in un ambiente simulato. Estendendo DevTools, puoi costruire strumenti personalizzati che migliorano la tua produttività e offrono nuove intuizioni sul comportamento della tua app. Una volta che la tua estensione è pronta, pubblicarla su pub.dev consente ad altri sviluppatori di beneficiare del tuo lavoro.
Per ulteriori informazioni su come utilizzare Flutter con Back4app, dai un'occhiata alla documentazione di Back4app e alla documentazione di Flutter DevTools. Buon coding!
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Come utilizzare gli Isolates in Flutter con Back4app per gestire elaborazioni di dati pesanti
AVANTI IL PROSSIMO
Come utilizzare i pulsanti segmentati in Flutter con Back4App?