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.

width: double.infinity

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

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

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"),
                        ),),
                   ),
                ),
        ),
    );
  }
}

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

No any Comments on this Article


Please Wait...