CODEWITHSUNDEEP
flutter
Abhijit Kar ツ
Abhijit Kar ツ

Reputation: 1732

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?

  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?

Upvotes: 31

Views: 11860

Answers (8)

mfrischbutter
mfrischbutter

Reputation: 96

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.

Upvotes: 0

Costa
Costa

Reputation: 815

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.

Upvotes: 70

melvinsalas
melvinsalas

Reputation: 106

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.

Upvotes: 8

ke Chankrisna
ke Chankrisna

Reputation: 301

  1. import 'package:flutter/material.dart';

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

  3. Open command palette by CTRL + SHIFT + P (for window),

  4. type Flutter: Toggle Debug Painting and click on it.

Upvotes: 0

atreeon
atreeon

Reputation: 24097

In the terminal press 'p'

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

(this is the easiest option!)

Upvotes: 3

Annsh Singh
Annsh Singh

Reputation: 435

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.

Upvotes: 3

rahulmr
rahulmr

Reputation: 681

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;

Upvotes: 13

William
William

Reputation: 31

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

Upvotes: 2

Related Questions