Flutter Debugging and Performance Profiling
This purpose of this chapter is to help you debug, diagnose issues with and profile your Flutter app. Flutter gives us amazing tools for this purpose, which can provide you with any information you should require. In fact, almost too much information! This is a very deep subject and the most this chapter can do is ‘dip your toe in the water’.
Flutter Debugging & Profiling is quite a rabbit-hole!
Debugging
Obviously you should be running Flutter in checked mode.
Profiling
When you are profiling, you should ensure the following:
You are connected to a real device.
An emulator can ‘emulate’ the real thing but under the covers it’s not the same thing.
You are running Flutter in profile mode.
This mode was written especially for this task, with enough performance to simulate release mode but enough information to help you profile the app.
Programmatical Options
When you write code, it has a purpose – to perform a certain task.However, you can augment that code with additional code that helps you diagnose issues and profile your Flutter app:
Debugger Statements. When you are debugging and attempting to reproduce a condition, you can add temporary code to detect that condition and launch the debugger.
Print to the Console.
You can output to the console to provide runtime information about what is happening in the program, what are variable values set to.
Assertions.
You can add assertions to enable programs to detect their own defects.Add Debugger Statements
With this statement, Flutter enables the developer to invoke your IDE’s debugger from your code. This is similar to the ‘JavaScript’ debuggerstatement. This statement has an optional ‘when’ argument which you can specify to only break when a certain condition is true.
Remember to import ‘dart:developer’ at the top!
Exercise – ‘debugging’
This exercise involves the default Flutter app modified to do into debug mode when the counter reaches 5.Step 1 – Create Default Flutter App
Follow the instructions in Generate Your First App Leave project open.Step 2 – Replace Application Code
Replace contents of file ‘main.dart’ in folder ‘lib’ with the following:import 'package:flutter/material.dart';
import 'dart:developer';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
debugger(when: _counter > 5);
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}Step 3 – Open Emulator & Run
Follow the instructions in Open Android Emulator & Run Your First App
Run the app in debug mode and hit the ‘+’ floating button until your IDE goes into debug mode and highlights the line containing ‘debugger’.