Flutter - How to Set Child Widget width Equal to Parent Widget

In this post, we will show the most straightforward way to set child widget's width equal to parent widget's width. Let's see the below example, How to set the child widget's width to the same as to parent widget.

We need set "double. infinity" in the width properties of the widget  to make it the same as  of parent widget:

width: double.infinity

 

How to set container width the same as parent width : 

We can set the container width the same as the parent width easily you can see below example the example.

Container(
          child: Container(
              color: Colors.red,
              child: Container(
            color: Colors.amber,
            width: double.infinity,
          )),
        )

You can see in the below screenshot the second container's amber color in full screen on the first container's red color.

 

How to set ElevatedButton width the same as the parent width :

We can set the ElevatedButton width to the same as the parent width easily you can see below example the example.

SizedBox(
          width: double.infinity,
          child: ElevatedButton(
            onPressed: () {},
            child: Text("Errorgram"),
          ),
        )

 

Full example : 

class Errorgram extends StatefulWidget {
  const Errorgram({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text("Errorgram"),
      ),
      body: Container(
          color: Colors.red,
          child: Container(
              color: Colors.amber,
              width: double.infinity,
              child: Center(
                child: Text(
                  "Errorgram",
                ),
              ))),
    );
  }
}

I hope this post will help you.

Tags: