How to Put a Container Widget in the Center of the Screen in Flutter?

To put a Container widget in the center of the screen, we can wrap it with a Center widget. The Center widget is used to center its child widget within its parent widget.

It takes a single child and positions it in the center of the parent widget. The Center widget does not have a size of its own but instead takes up the maximum amount of space possible within its parent widget.

The following example code shows how you can wrap the Container widget with a Center widget to center it within its parent widget:

Center(
  child: Container(
    width: 200,
    height: 200,
    color: Colors.lightBlue,
    child: const Text('This is a container'),
  ),
),

Here is a full Flutter example code that puts the Container widget in the exact center of the screen:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final String _title = 'Center Widget Demo';
  MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text(_title),
        ),
        body: SafeArea(
          child: Center(
            child: Container(
              width: 200,
              height: 200,
              color: Colors.pink,
              alignment: Alignment.center,
              child: const Text(
                'This is a container',
                style: TextStyle(fontSize: 20),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Output:

put a container widget in the center of the screen in Flutter

Put the Text Widget in the Center of the Screen

You can also put the Text widget in the center of the screen by wrapping it with the Center widget.

When you wrap the Text widget with a Center widget, it takes the maximum possible space on the screen and pulls it into the center of its parent widget both horizontally and vertically.

See the implementation in the following Flutter example:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final String _title = 'Center Widget Demo';
  MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text(_title),
        ),
        body: const SafeArea(
          child: Center(
            child: Text(
              'This text is centered',
              style: TextStyle(
                fontSize: 20,
                color: Colors.pink,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Output:

put a Text widget in the center of the screen in Flutter

Conclusion

In this article, we learned how we can put a Container widget in the center of the screen.

In summary, to put a Container widget in the center of the screen, you can wrap it with the Center widget. The Center widget takes up the maximum possible space on the screen and pulls the child widget into the center of the parent widget.

Moreover, you can also use this approach to put other widgets such as Text, Image, etc. in the center of the screen.

Thanks for reading.

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts