Set Widget Center at Middle of Screen in Flutter

Placing a widget at the center of an app’s screen is perfect for when you want to make a widget stand out in the center of the screen. In this blog post, we’ll show you different ways to make a widget center-aligned in the middle of the screen in Flutter.

One way is to use the Center widget. The Center widget takes a single child and positions it in the center of the screen. If you want to center multiple children, you can wrap them in a Row or Column and then use the Center widget. Another way to center widgets horizontally is to use the Align widget as a child of Stack one.

Scaffold(
  backgroundColor: Colors.blue,
  body: Center(
    child: FlutterLogo(
      size: 200,
    ),
  ),
)

Container(
    width: double.infinity,
    height: double.infinity,
    child: Align(
      alignment: Alignment.center,
      child: FlutterLogo(
        size: 200,
      ),
    ),
)

Container(
    width: double.infinity,
    height: double.infinity,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Container(
          width: 200,
          height: 200,
          color: Colors.transparent,
          child: FlutterLogo(size: 200),
        )
      ],
    ),
)

Container(
    width: double.infinity,
    height: double.infinity,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          width: 200,
          height: 200,
          color: Colors.orange,
          child: FlutterLogo(size: 200),
        )
      ],
    ),
)