Más
Construyendo y Usando una Extensión de Flutter DevTools con Back4app

19min
Introducción
Flutter DevTools es un conjunto poderoso para depurar, inspeccionar y perfilar aplicaciones Flutter. Con el marco de extensión Dart & Flutter DevTools, los desarrolladores pueden crear extensiones personalizadas para mejorar sus flujos de trabajo de depuración y desarrollo. Estas extensiones se pueden construir como aplicaciones web de Flutter e integrarse sin problemas en el conjunto de DevTools.
En este tutorial, exploraremos cómo crear una extensión de Flutter DevTools, integrarla con una aplicación Flutter que utiliza Back4app para servicios de backend, y depurar la aplicación utilizando la extensión personalizada. Esto te ayudará a construir herramientas de desarrollo personalizadas que pueden agilizar tu proceso de desarrollo y proporcionar una visión más profunda del comportamiento de tu aplicación.
Requisitos previos
Para completar este tutorial, necesitarás:
Una cuenta de Back4app. Regístrate para obtener una cuenta gratuita en Back4app.com.
Un entorno de desarrollo de Flutter configurado en tu máquina local. Sigue la guía de instalación de Flutter si aún no lo has configurado.
Conocimientos básicos de Dart, widgets de Flutter y uso de Flutter DevTools.
Paso 1 – Configurando tu Backend de Back4app
Crea un Proyecto de Back4app: Inicia sesión en tu cuenta de Back4app y crea un nuevo proyecto.
Crea Clases de Parse: Para este tutorial, crea una Clase de Parse llamada ThemeSettings para almacenar datos de configuración de tema para tu aplicación Flutter:
themeName (String): El nombre del tema.
primaryColor (String): El color principal del tema.
accentColor (String): El color de acento del tema.
Poblar la Clase con Datos de Ejemplo: Agrega varios registros a la ThemeSettings clase para simular configuraciones de tema que tu aplicación Flutter utilizará.
Obtén tus Credenciales de Back4app: Navega a la configuración de tu proyecto para recuperar tu ID de Aplicación y Clave de Cliente, que necesitarás para conectar tu aplicación Flutter a Back4app.
Paso 2 – Creando la Extensión de Flutter DevTools
Crea un Nuevo Proyecto de Flutter: Abre tu terminal o símbolo del sistema y ejecuta:
Bash
flutter create theme_builder_extension
flutter create theme_builder_extension
﻿
Configurar el directorio de la extensión: Navega a tu directorio raíz del proyecto y crea un nuevo directorio para tu extensión de DevTools:
Bash
mkdir devtools_extension
mkdir devtools_extension
﻿
Dentro de este directorio, crea un config.yaml archivo para almacenar los metadatos requeridos por 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
﻿
Agregar dependencias: Abre pubspec.yaml y agrega las siguientes dependencias:
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
﻿
Ejecuta flutter pub get para instalar estas dependencias.
Creando la Extensión DevTools: En lib/main.dart, reemplaza el contenido predeterminado con el siguiente código para envolver tu aplicación web de Flutter en 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'),
        ),
      ),
    );
  }
}
﻿
Esto envuelve tu aplicación en el DevToolsExtension widget, que maneja la tematización y la integración con la suite DevTools.
Agregando Integraciones de DevTools: Modifica tu aplicación para integrar características específicas de DevTools, como usar el DevToolsButton en lugar de 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'),
        ),
      ),
    );
  }
}
﻿
Este cambio asegura que la interfaz de usuario de tu extensión se mezcle perfectamente con el resto de la suite de DevTools.
Paso 3 – Integración con Back4app
Inicializa Parse en tu Extensión: Dado que esta extensión interactuará con Back4app, inicializa Parse en tu extensión:
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()));
}
﻿
Obtén y Usa Datos de Tema: Usa los datos de Back4app en tu extensión para generar y aplicar temas:
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');
    }
  }
}
﻿
Este código obtiene la configuración de temas de Back4app y los muestra en una lista. Seleccionar un tema podría activar lógica adicional para aplicarlo.
Paso 4 – Probar tu Extensión en un Entorno Simulado
Ejecutar la Extensión en un Entorno Simulado: Para probar tu extensión sin compilarla cada vez, utiliza el entorno simulado de DevTools:
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
﻿
Simular la Aplicación Conectada: Inicie otra aplicación Flutter a la que su extensión se conectará. Copie y pegue la URI del servicio VM de la aplicación conectada y la URI del servicio DTD en el entorno simulado.
Paso 5 – Construyendo y Publicando la Extensión
Construir la Extensión: Una vez que esté satisfecho con su extensión, constrúyala para producción:
Bash
flutter pub get
flutter build web --output=devtools_extension/build
flutter pub get
flutter build web --output=devtools_extension/build
﻿
Validar la Extensión: Use el comando de validación de DevTools para asegurarse de que su extensión esté configurada correctamente:
Bash
dart run devtools_extensions validate
dart run devtools_extensions validate
﻿
Publicar la Extensión: Publique su extensión en pub.dev para que otros desarrolladores puedan usarla:
Bash
flutter pub publish
flutter pub publish
﻿
Conclusión
En este tutorial, aprendió cómo crear una extensión de Flutter DevTools, integrarla con Back4app para servicios de backend y probarla en un entorno simulado. Al extender DevTools, puede construir herramientas personalizadas que mejoren su productividad y ofrezcan nuevas perspectivas sobre el comportamiento de su aplicación. Una vez que su extensión esté lista, publicarla en pub.dev permite que otros desarrolladores se beneficien de su trabajo.
Para obtener más información sobre el uso de Flutter con Back4app, consulte la documentación de Back4app y la documentación de Flutter DevTools. ¡Feliz codificación!
Actualizado 23 Jan 2025
¿Esta página le fue útil?
Cómo usar Aisladores en Flutter con Back4app para manejar el procesamiento de datos pesados
Cómo usar botones segmentados en Flutter con Back4app