Layout bounds not showing in Fultter app but it shows for other apps

Question

I just started with flutter and created a blank app with default config, when I turned on show layouts bounds from developer options it is not showing any boundaries like any other app.

How is this happening?

Solution

To show layouts bounds from developer options for Flutter apps, we have to do this

1. import this package in main.dart class.

   import 'package:flutter/rendering.dart';
   

2. in build() or main() you have to set this debugPaintSizeEnabled variable as true.

   debugPaintSizeEnabled = true;
   

Example: Here is my complete class

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

void main()
{
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  @override
  Widget build(BuildContext context) {
    debugPaintSizeEnabled = true;
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(    
        primarySwatch: Colors.blue,
      ),
    home: MyHomePage(title: 'Flutter Demo Home Page'),
    
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Comments

[SilSur]

This is exactly what I was looking for.

[Sachin Tanpure]

Perfect. It saved my lots of time. Thank You.