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

In this example, we are going to show to easiest way to set child widget's width equal to parent widget's width. You may need this kind of design in your flutter app UI. See the example below and learn to set child widget's width 100% matching to parent widget.

To Make Child Widget width 100% of Parent Widget:

width: double.infinity

To Make Child Container's width matching to Parent Widget:

Container( 
  child:Container( 
    width: double.infinity,
  )
)

To Make Elevated Button width matching to Parent Widget:

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

Full Dart Code Example:

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Test App",
        home: Scaffold( 
            appBar: AppBar( 
              title: Text("100% Width"),
              backgroundColor: Colors.redAccent
            ),
            
            body: Container( 
                   //width: double.infinity, 
                   //set 100% width of container according to parent widget
                   height: 150,
                   margin: EdgeInsets.all(30),
                   padding: EdgeInsets.all(20),
                   color: Colors.purple.shade100,
                   child: Center(
                      child: SizedBox(
                        width: double.infinity,
                        child: ElevatedButton( 
                           onPressed: (){},
                           child: Text("Test Button"),
                        ),),
                   ),
                ),
        ),
    );
  }
}

Output Screenshot:

In this way, you can change the width of any child widget according to the width of parent widget in the Flutter Application.