Summary - SizedBox and Center

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'),
    ),
  ),
)

Exercise 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')).

Show example 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'),
      ),
    ),
  )));
}

Test yourself

Which pair is used to both give a child a fixed size and center it on screen?
- SizedBox + Center
- Padding + margin
- Column + Row
- Text + Container
Show answer

SizedBox + Center — SizedBox brings the child to a fixed size, Center centers it on screen; together they make a fixed-size centered card.

Place the child in a corner

Align(
  alignment: ____,
  child: Text('Köşede'),
)

Show answer

Align(
  alignment: Alignment.topLeft,
  child: Text('Köşede'),
)

SizedBox and Center combined

Sabit boyut

With SizedBox
Ortalama

With Center
Konumlama

With Align
Ebeveyni doldurma

With SizedBox.expand

Next lesson: What is ListView?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies