Center Widget in Flutter

In Flutter, there are multiple ways to center a widget within its parent. One common way is to use the "Center" widget. The "Center" widget takes a single child and positions it in the center of its parent.


Here is an example of how to use the "Center" widget to center a child button within its parent:

Center(
    child: FlatButton(
        onPressed: () {},
        child: Text('Click Me'),
    ),
)


Another way to center a widget is to use a "Container" widget with a "center" alignment and a fixed width and height. Here is an example:

Container(
    width: 200,
    height: 200,
    alignment: Alignment.center,
    child: FlatButton(
        onPressed: () {},
        child: Text('Click Me'),
    ),
)


You can also use "FractionallySizedBox" with a "center" alignment, and a widthFactor or heightFactor of 0.5 to center the child. Here is an example:

FractionallySizedBox(
    widthFactor: 0.5,
    heightFactor: 0.5,
    alignment: Alignment.center,
    child: FlatButton(
        onPressed: () {},
        child: Text('Click Me'),
    ),
)


You can choose the method that best suits your layout needs.


Video Link:

 
Post a Comment (0)
Previous Post Next Post