BoxDecoration
- Flutter course
- Beginner
- Lesson 29/99
- 4 min
Learn to add border and radius with BoxDecoration.
BoxDecoration
BoxDecoration is the object given to Container's decoration parameter that defines visual decorations. border adds a border, borderRadius rounds corners, and color sets the background color. When using BoxDecoration you cannot use Container's direct color parameter; the color goes inside the decoration.
Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.black, width: 2),
),
child: Text('Süslü'),
)borderRadius and border
borderRadius sets the corner radius; BorderRadius.circular takes a single value, BorderRadius.only a separate value for each corner. border adds the same border to all four sides with Border.all or different horizontal/vertical borders with Border.symmetric. Color and thickness are set via parameters.
BoxDecoration(
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: Colors.grey,
width: 1.5,
),
)Practice Print BoxDecoration info
In main, print two lines with print: decoration susle and borderRadius kose.
Starter code
void main() {
// iki satır yazdır:
// decoration susle
// borderRadius kose
}Sample solution
void main() {
print('decoration susle');
print('borderRadius kose');
}Expected output
decoration susle borderRadius kose
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Where is BoxDecoration given?
- To Text's style parameter
- To Container's decoration parameter Correct answer
- To the runApp function
- To the main method
Explanation: BoxDecoration is given to Container's decoration parameter; border and borderRadius are defined here.
2 Round the corners
decoration: BoxDecoration(
____: BorderRadius.circular(12),
color: Colors.blue,
),decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
color: Colors.blue,
),Explanation: The borderRadius parameter sets the corner radius inside BoxDecoration.
3 BoxDecoration concepts
| Term | Meaning |
|---|---|
BoxDecoration |
Container decoration object |
borderRadius |
Corner rounding |
border |
Border |
Border.all |
Same border on all four sides |