Using Flutter DevTools
1. Installing DevTools
DevTools is a suite of performance and debugging tools for Flutter and Dart applications. It can be installed as a command-line tool or as a web-based application.
| Installation Method | Description | Command |
|---|---|---|
| Command Line | Install via Dart SDK or Flutter SDK | flutter pub global activate devtools |
| Web-Based | Access via browser at http://localhost:9100 |
flutter pub global run devtools |
Note: Ensure that
flutter is in your system PATH to run these commands.
2. Launching DevTools
| Command | Description | Notes |
|---|---|---|
| flutter pub global activate devtools | Installs DevTools globally | Run once to set up |
| devtools | Launches DevTools server | Opens browser automatically |
Note: DevTools requires Flutter SDK to be installed and configured.
3. Using Widget Inspector
Example: Inspecting a Widget Tree
// Example Flutter widget tree inspection
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Home')),
body: Center(
child: Column(
children: [
Text('Hello, World!'),
Icon(Icons.favorite),
],
),
),
);
}
}| Feature | Description | Usage |
|---|---|---|
| Widget Tree | Visual representation of the widget hierarchy | Inspect nested widgets in real-time |
| Widget Properties | Displays properties of selected widgets | View and modify widget attributes |
| Layout Metrics | Shows size, position, and constraints | Debug layout issues and alignment |
Note: Widget Inspector is accessible via the DevTools UI or by running
flutter pub run devtools.
Workflow: Inspecting Widgets
- Launch DevTools using
flutter pub run devtools - Navigate to the Widget Inspector tab
- Select a widget in the tree to inspect its properties
- Use the Layout Metrics panel to analyze widget constraints
4. Using Performance View
Example: Profiling a Flutter App
// Run your app with --profile flag
flutter run --profile
// Or in DevTools, select the Performance tab and click "Start"| Feature | Description | Usage |
|---|---|---|
| CPU Usage | Shows CPU utilization over time | View graph to identify performance bottlenecks |
| Memory Usage | Displays memory consumption of the app | Monitor for memory leaks or excessive allocation |
| Frame Rate | Graph showing frames per second (FPS) | Target 60 FPS for smooth UI |
| Widget Build Time | Time taken to build widgets | Identify slow widget rebuilds |
Note: Performance View requires running your app in
--profile mode or using the DevTools UI.
Warning: Profiling can impact app performance. Use in release builds or with
--profile flag.
Key Performance Metrics
- Frame Rate: Target 60 FPS for smooth animations
- Memory Usage: Monitor for consistent growth or spikes
- CPU Usage: Identify high CPU tasks that block the UI thread
- Widget Build Time: Optimize rebuilds to reduce frame drops
5. Using Memory View
Example: Inspecting Memory Usage
// Example of monitoring memory in Flutter
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Memory Demo')),
body: Center(
child: MemoryMonitor(),
),
),
);
}
}
class MemoryMonitor extends StatefulWidget {
@override
_MemoryMonitorState createState() => _MemoryMonitorState();
}
class _MemoryMonitorState extends State<MemoryMonitor> {
int memoryUsage = 0;
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Current Memory Usage: $memoryUsage MB'),
ElevatedButton(
onPressed: () {
setState(() {
memoryUsage += 10;
});
},
child: Text('Simulate Memory Increase'),
),
],
);
}
}
| Feature | Description | Notes |
|---|---|---|
| Memory View | Visualizes memory usage over time | Shows heap size and allocation patterns |
| Heap Size | Current size of the Dart heap | Measured in MB or KB |
| Allocation Rate | Rate of memory allocation per second | Helps identify memory leaks |
Note: Memory View is part of Flutter DevTools and requires running your app in debug mode to access.
Warning: Memory usage can vary significantly between debug and release builds.
Key Features of Memory View
- Real-time memory consumption tracking
- Allocation pattern visualization
- Peak memory usage identification
- Integration with Flutter DevTools UI
6. Using Network View
Example: Inspecting Network Requests
// Enable network tracking in DevTools
// Run with --enable-network-inspection flag
flutter run --enable-network-inspection| Feature | Description | Usage |
|---|---|---|
| Request Filtering | Filter requests by URL, method, or status code | Use filter bar in Network View |
| Request Details | View headers, body, and response data | Click on any request to inspect |
| Timeline View | Visualize request timing and duration | See how long each request takes |
Note: Network View requires Flutter 3.19+ and is available in DevTools v2.0+
Warning: Sensitive data in network requests may be visible in DevTools
7. Using Logging View
Example: Configure logging in Flutter
// Enable logging in debug mode
void main() {
runApp(MyApp());
if (kDebugMode) {
FlutterError.onError = (FlutterErrorDetails details) {
print('Flutter Error: ${details.exception}');
};
}
}| Feature | Description | Usage |
|---|---|---|
| logLevel | Minimum level of logs to display | flutter run --verbose |
| logFilter | Filter logs by pattern or tag | flutter logs --time-format iso8601 |
Note: The Logging View in DevTools helps visualize logs from your app in real-time, including errors and warnings.
Warning: Enabling verbose logging in production can impact performance and reveal sensitive data.
8. Using Debugger
Example: Setting a Breakpoint
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Set breakpoint here
return MaterialApp(
home: Scaffold(
body: Center(
child: Text('Hello, Flutter!'),
),
),
);
}
}| Feature | Description | Usage |
|---|---|---|
| Breakpoint | Pauses execution at a specific line | Click on the left gutter next to the line number in DevTools or IDE |
| Step Over | Executes the next line without stepping into functions | Use the "Step Over" button in DevTools or IDE |
| Step Into | Enters a function call to debug inside it | Use the "Step Into" button in DevTools or IDE |
| Step Out | Exits the current function and returns to caller | Use the "Step Out" button in DevTools or IDE |
Note: Ensure that the application is running in debug mode to enable breakpoints.
Warning: Breakpoints in release mode will not work as expected.
9. Using App Size Tool
| Feature | Description | Notes |
|---|---|---|
| app-size | Measures the size of your Flutter app | Requires flutter pub run devtools |
| bundle-size | Reports the size of the app bundle | Useful for optimization |
| asset-size | Shows size of assets in the app | Helps identify large assets |
Note: The App Size Tool is part of the Flutter DevTools suite and helps analyze app size for performance optimization.
10. Using Layout Explorer
Example: Inspecting Widget Tree
// Run your Flutter app with DevTools enabled
// In terminal:
flutter run --profile -d chrome
// Then open DevTools in browser:
// http://localhost:9100| Feature | Description | Usage |
|---|---|---|
| Widget Tree | Visual representation of the widget hierarchy | Click on widgets to inspect properties and layout |
| Layout Metrics | Shows dimensions, padding, and margins | Hover over widgets to see real-time layout data |
| Render Tree | Shows the actual rendering structure | Compare with widget tree to understand rendering differences |
Note: Layout Explorer requires your app to be running in debug or profile mode.