In an emulator, how to hide the “Slow Mode” or “Debug” banner in the upper-right corner of a Flutter application?

Difficulty: Beginner

Sometimes you do not want to have the “Slow Mode” or “Debug” banner visible at the upper-right corner in the emulator.

This might not be very convenient when, for example, you want to take snapshots to write the documentation or show to your client.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
void main(){
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: new Text('My Application'),
      debugShowCheckedModeBanner: false,
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new SplashScreen(),
      routes: <String, WidgetBuilder> {
          '/splashscreen': (BuildContext context) => new SplashScreen(),
          '/conditions': (BuildContext context) => new TermsAndConditionsPage(),
        },
    );
  }
}

Explanation

At initialization of your MaterialApp, set debugShowCheckedModeBanner: false.

Line #16:

This line makes the trick to hide the “Slow Mode” or “Debug” banner by default visible at the upper-right corner in the emulator.