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 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:

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.