Building and Using a Flutter DevTools Extension with Back4app

18min
Introduction
Flutter DevTools is a powerful suite for debugging, inspecting, and profiling Flutter apps. With the Dart & Flutter DevTools extension framework, developers can create custom extensions to enhance their debugging and development workflows. These extensions can be built as Flutter web apps and seamlessly integrated into the DevTools suite.
In this tutorial, we will explore how to create a Flutter DevTools extension, integrate it with a Flutter app that uses Back4app for backend services, and debug the application using the custom extension. This will help you build tailored developer tools that can streamline your development process and provide deeper insights into your app's behavior.
Prerequisites
To complete this tutorial, you will need:
A Back4app account. Sign up for a free account at Back4app.com.
A Flutter development environment set up on your local machine. Follow the Flutter installation guide if you haven't set it up yet.
Basic knowledge of Dart, Flutter widgets, and using Flutter DevTools.
Step 1 – Setting Up Your Back4app Backend
Create a Back4app Project: Log in to your Back4app account and create a new project.
Create Parse Classes: For this tutorial, create a Parse Class named ThemeSettings to store theme configuration data for your Flutter app:
themeName (String): The name of the theme.
primaryColor (String): The primary color of the theme.
accentColor (String): The accent color of the theme.
Populate the Class with Sample Data: Add several records to the ThemeSettings class to simulate theme configurations that your Flutter app will use.
Get Your Back4app Credentials: Navigate to your project settings to retrieve your Application ID and Client Key, which you’ll need to connect your Flutter app to Back4app.
Step 2 – Creating the Flutter DevTools Extension
Create a New Flutter Project: Open your terminal or command prompt and run:
Bash
flutter create theme_builder_extension
flutter create theme_builder_extension
﻿
Set Up the Extension Directory: Navigate to your project root directory and create a new directory for your DevTools extension:
Bash
mkdir devtools_extension
mkdir devtools_extension
﻿
Inside this directory, create a config.yaml file to store metadata required by 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
﻿
Add Dependencies: Open pubspec.yaml and add the following dependencies:
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
﻿
Run flutter pub get to install these dependencies.
Creating the DevTools Extension: In lib/main.dart, replace the default content with the following code to wrap your Flutter web app in a 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'),
        ),
      ),
    );
  }
}
﻿
This wraps your app in the DevToolsExtension widget, which handles theming and integration with the DevTools suite.
Adding DevTools Integrations: Modify your app to integrate DevTools-specific features, such as using the DevToolsButton instead of a regular 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'),
        ),
      ),
    );
  }
}
﻿
This change ensures your extension’s UI blends seamlessly with the rest of the DevTools suite.
Step 3 – Integrating with Back4app
Initialize Parse in Your Extension: Since this extension will interact with Back4app, initialize Parse in your 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()));
}
﻿
Fetch and Use Theme Data: Use the data from Back4app in your extension to generate and apply themes:
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');
    }
  }
}
﻿
This code fetches theme settings from Back4app and displays them in a list. Selecting a theme could trigger additional logic to apply it.
Step 4 – Testing Your Extension in a Simulated Environment
Run the Extension in a Simulated Environment: To test your extension without compiling it every time, use the simulated DevTools environment:
Bash
flutter run -d chrome --dart-define=USE_SIMULATED_ENVIRONMENT=true
flutter run -d chrome --dart-define=USE_SIMULATED_ENVIRONMENT=true
﻿
Simulate the Connected App: Start another Flutter app that your extension will connect to. Copy and paste the connected app’s VM service URI and DTD service URI into the simulated environment.
Step 5 – Building and Publishing the Extension
Build the Extension: Once you are satisfied with your extension, build it for production:
Bash
flutter pub get
flutter build web --output=devtools_extension/build
flutter pub get
flutter build web --output=devtools_extension/build
﻿
Validate the Extension: Use the DevTools validation command to ensure your extension is correctly configured:
Bash
dart run devtools_extensions validate
dart run devtools_extensions validate
﻿
Publish the Extension: Publish your extension to pub.dev so other developers can use it:
Bash
flutter pub publish
flutter pub publish
﻿
Conclusion
In this tutorial, you learned how to create a Flutter DevTools extension, integrate it with Back4app for backend services, and test it in a simulated environment. By extending DevTools, you can build custom tools that enhance your productivity and offer new insights into your app’s behavior. Once your extension is ready, publishing it to pub.dev allows other developers to benefit from your work.
For more information on using Flutter with Back4app, check out the Back4app documentation and the Flutter DevTools documentation. Happy coding!
Updated 27 Aug 2024
Did this page help you?
How to Use Isolates in Flutter with Back4app to Handle Heavy Data Processing
How to Use Segmented Buttons in Flutter with Back4app