'debugPaintSizeEnabled is not working in Flutter

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?

Hot Reload
Full Restart
Setting other debug variables to true:

debugPaintPointersEnabled = 
    debugPaintBaselinesEnabled = 
    debugPaintLayerBordersEnabled = 
    debugRepaintRainbowEnabled = true;

, which I read from Docs. They worked fine.

My Setup?

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

Question: How to make the visual debugger work?

flutter

Solution 1:^[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.

Solution 2:^[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;

Solution 3:^[3]

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

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

Solution 4:^[4]

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

Solution 5:^[5]

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

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.

Solution 6:^[6]

In the terminal press 'p'

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

(this is the easiest option!)

Solution 7:^[7]

import 'package:flutter/material.dart';
void main() { debugPaintSizeEnabled = true; runApp(new MyApp()); }
Open command palette by CTRL + SHIFT + P (for window),
type Flutter: Toggle Debug Painting and click on it.

Solution 8:^[8]

I had the same issue, wasn't able to see any debug information.

Fixed it by running in debug mode instead of profile or release. Maybe this will help someone.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	rahulmr
Solution 3	Rafael
Solution 4	William
Solution 5
Solution 6
Solution 7	ke Chankrisna
Solution 8	mfrischbutter

'debugPaintSizeEnabled is not working in Flutter

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]