Summary - SizedBox and Center
- Flutter course
- Beginner
- Lesson 45/99
- 4 min
Combine SizedBox and Center to build a centered welcome screen.
SizedBox and Center summary
SizedBox is a fixed-size box or spacing tool; it gives exact dimensions with width and height, and fills the parent with SizedBox.expand. Center places the child in the exact middle of the parent; Align places the child at any position via Alignment values. Combining these widgets, you can build a fixed-size welcome card in the center of the screen.
Center(
child: SizedBox(
width: 200,
height: 100,
child: Container(
color: Colors.blue,
alignment: Alignment.center,
child: Text('Hoş geldin'),
),
),
)Practice Build a welcome card and run
First print print('karsilama hazir'), then call runApp(MaterialApp(home: Center(child: SizedBox(...)))). Center's child should be SizedBox(width: 200, height: 100), and SizedBox's child should be Container(color: Colors.blue, child: Text('Hos geldin')).
Starter code
import 'package:flutter/material.dart';
void main() {
// 'karsilama hazir' mesajını print ile yazdır
// runApp ile MaterialApp çağır; home Center olsun
}
// Center: SizedBox child içersin
// SizedBox: width, height ve Container child olsun
// Container: color ve Text child olsunSample solution
import 'package:flutter/material.dart';
void main() {
print('karsilama hazir');
runApp(MaterialApp(home: Center(
child: SizedBox(
width: 200,
height: 100,
child: Container(
color: Colors.blue,
child: Text('Hos geldin'),
),
),
)));
}Expected output
karsilama hazir
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which pair is used to both give a child a fixed size and center it on screen?
- SizedBox + Center Correct answer
- Padding + margin
- Column + Row
- Text + Container
Explanation: SizedBox brings the child to a fixed size, Center centers it on screen; together they make a fixed-size centered card.
2 Place the child in a corner
Align(
alignment: ____,
child: Text('Köşede'),
)Align(
alignment: Alignment.topLeft,
child: Text('Köşede'),
)Explanation: Alignment.topLeft places the child in the top-left corner.
3 SizedBox and Center combined
| Term | Meaning |
|---|---|
Sabit boyut |
With SizedBox |
Ortalama |
With Center |
Konumlama |
With Align |
Ebeveyni doldurma |
With SizedBox.expand |