Flutter
Summary - Text and Container
Combine Text, Container and BoxDecoration to make a title card.
Text and Container summary
The Text widget writes text to screen; TextStyle sets size, color and weight. Container is a box that takes a child and is formatted with padding, margin and decoration. BoxDecoration adds corner rounding and borders. Combining the three lets you build title cards, info boxes or labels.
Container(
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.blue, width: 2),
),
child: Text(
'Başlık',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
)
Exercise Build a title card and run
First print print('kart hazir'), then call runApp(MaterialApp(home: Container(...))). The Container should have padding: EdgeInsets.all(16.0), a decoration with BoxDecoration (containing borderRadius: BorderRadius.circular(12) and border: Border.all(color: Colors.blue, width: 2)), and a child of Text('Baslik', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)).
Show example solution
import 'package:flutter/material.dart';
void main() {
print('kart hazir');
runApp(MaterialApp(home: Container(
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.blue, width: 2),
),
child: Text(
'Baslik',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
)));
}
Test yourself
-
What is used to add corner rounding to a Container?
- Text with TextAlign
- padding with EdgeInsets
- TextStyle with FontWeight
- BoxDecoration with BorderRadius
Show answer
BoxDecoration with BorderRadius — Corner rounding is added via the borderRadius parameter of BoxDecoration.
-
Add decoration to Container
Container(
____: BoxDecoration(
borderRadius: BorderRadius.circular(8),
),
child: Text('Kutu'),
)
Show answer
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
),
child: Text('Kutu'),
)
-
Text and Container combined
- Başlık kartı
- Text + Container + BoxDecoration
- Yazı biçimi
- Via TextStyle
- Kutu alan
- With Container
- Köşe ve kenarlık
- With BoxDecoration
Next lesson: Column
