debugPaintSizeEnabled is not working in Flutter

Question

I just began learning flutter and built the sample app present in Building Layout tutorial.

In the source code it's suggested to un-comment two lines, to see the visual debug lines, but so far no luck.

import 'package:flutter/material.dart';
// Uncomment lines 7 and 10 to view the visual layout at runtime.
//import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;

void main() {
  //debugPaintSizeEnabled = true;
  runApp(new MyApp());
}

What I have tried?

1. Hot Reload
2. Full Restart
3. Setting other debug variables to true:

debugPaintPointersEnabled = 
    debugPaintBaselinesEnabled = 
    debugPaintLayerBordersEnabled = 
    debugRepaintRainbowEnabled = true;

, which I read from Docs. They worked fine.

My Setup?

1. Visual Studio Code
2. No Dart 2 Preview Mode
3. Flutter Beta
4. I use an Android Mobile Hardware, not Virtual (Moto G5)

Question: How to make the visual debugger work?

Answer 1

I had exactly the same problem and the only solution i found, is to toggle debug painting from VSCode command palette.

Flutter: Toggle Debug Painting

You can also make it works using the rendering library.

First you need to import it

import 'package:flutter/rendering.dart';

Then, set debugPaintSizeEnabled to true in the main method of your application or in a widget's build method

void main() {
  debugPaintSizeEnabled=true;
  runApp(MyApp());
}

You need to fully restart your application to apply effects

Here's the official documentation.

Answer 2

Add import statements :

import 'dart:developer';

import 'package:flutter/rendering.dart';

Then in the build add the debugPaintSizeEnabled=true; like :

Widget build(BuildContext context) {
    debugPaintSizeEnabled=true;

Answer 3

It's not necessary import anything in VSCode, just:

1. Open command palette by Ctrl+Shift+P (Cmd for mac)
2. Type Flutter: Toggle Debug Painting and click on it: example.

Answer 4

In the terminal press 'p'

To toggle the display of construction lines (debugPaintSizeEnabled), press "p".

(this is the easiest option!)

Answer 5

I think you need import 'package:flutter/rendering.dart';

Answer 6

UPDATE

The following steps work on both android device and android virtual device if you are working with ANDROID STUDIO. It works only on Android virtual device if you are working wih VSCode

I was following the same tutorial recently to learn all about the layout elements in Flutter. To enable visual layout at runtime, what I did was quite straightforward -

• First

I added import 'package:flutter/rendering.dart' show debugPaintSizeEnabled; at the top of my main.dart file

• Next

I added debugPaintSizeEnabled = true; to my main() method

void main() {
  debugPaintSizeEnabled = true;
  runApp(new MyApp());
}

• Finally

I performed a full restart of my app to reflect all the changes. It doesn't reflect changes if you perform a hot reload.

Hope this helps.