Summary - Text and Container
- Flutter course
- Beginner
- Lesson 30/99
- 4 min
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,
),
),
)Practice 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)).
Starter code
import 'package:flutter/material.dart';
void main() {
// 'kart hazir' mesajını print ile yazdır
// runApp ile MaterialApp çağır; home bir Container olsun
}
// Container: padding, decoration, child içersin
// decoration: BoxDecoration, borderRadius ve border ile
// child: Text widget'ı, fontSize ve fontWeight ileSample 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),
),
)));
}Expected output
kart hazir
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is used to add corner rounding to a Container?
- Text with TextAlign
- padding with EdgeInsets
- TextStyle with FontWeight
- BoxDecoration with BorderRadius Correct answer
Explanation: Corner rounding is added via the borderRadius parameter of BoxDecoration.
2 Add decoration to Container
Container(
____: BoxDecoration(
borderRadius: BorderRadius.circular(8),
),
child: Text('Kutu'),
)Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
),
child: Text('Kutu'),
)Explanation: The decoration parameter is used to add a BoxDecoration to a Container.
3 Text and Container combined
| Term | Meaning |
|---|---|
Başlık kartı |
Text + Container + BoxDecoration |
Yazı biçimi |
Via TextStyle |
Kutu alan |
With Container |
Köşe ve kenarlık |
With BoxDecoration |