The Center widget
- Flutter course
- Beginner
- Lesson 42/99
- 4 min
Learn to center a child with Center.
The Center widget
Center is a widget that places its single child in the exact middle of its parent. Center is actually a shortcut for using the Align widget with alignment: Alignment.center. The child is centered both horizontally and vertically.
Center(
child: Text('Ortada'),
)
// Equivalent:
Align(
alignment: Alignment.center,
child: Text('Ortada'),
)Center and alignment
Center places the child in the exact middle of the parent's area. If the parent gives unbounded size (e.g. inside a Column with mainAxisSize: min), Center centers the child only within its own size. Center has no alignment parameter; it is designed for dead center. For different alignments, use Align.
Scaffold(
body: Center(
child: Container(
width: 100,
height: 100,
color: Colors.red,
child: Text('Ortada'),
),
),
)Practice Print Center info
In main, print two lines with print: center ortala and align kisa yol.
Starter code
void main() {
// iki satır yazdır:
// center ortala
// align kisa yol
}Sample solution
void main() {
print('center ortala');
print('align kisa yol');
}Expected output
center ortala align kisa yol
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does the Center widget do?
- Rotates the child
- Places the child in the middle of the parent Correct answer
- Hides the child
- Sizes the child
Explanation: Center places the child in the exact middle of its parent; it centers both horizontally and vertically.
2 Center the child
Widget build(BuildContext context) {
return ____(
child: Text('Ortada'),
);
}Widget build(BuildContext context) {
return Center(
child: Text('Ortada'),
);
}Explanation: The Center widget places the child in the middle of its parent.
3 Center concepts
| Term | Meaning |
|---|---|
Center |
Centers the child |
alignment |
Alignment info |
Alignment.center |
Center's default value |
Center = Align |
Center is a shortcut for Align |