Widget tree
- Flutter course
- Beginner
- Lesson 12/99
- 4 min
Learn that widgets form a nested tree.
Widget tree
Widgets nest to form a tree (widget tree). Every widget has a parent except the root. A widget below another is called a child. Flutter walks this tree to produce the pixels on screen.
MaterialApp(
home: Scaffold(
body: Center(
child: Text('In tree'),
),
),
)parent and child relationship
The parent widget is the outer widget wrapping a child. When Center wraps a Text, Center is the parent and Text is the child. Some widgets take a single child (Center, Padding); others take many (Column, Row).
Center(
child: Text('I am child'),
)
// Center: parent
// Text: childPractice Return the relationship
Write a function iliski that takes a String s parameter. If s == 'Center' return 'parent', if s == 'Text' return 'child', otherwise 'unknown'. In main, print iliski('Center') and iliski('Text') with print.
Starter code
void main() {
// iliski('Center') ve iliski('Text') çağrılarını print ile yazdır
}
// iliski fonksiyonunu tanımla
// 'Center' dönerse 'parent', 'Text' dönerse 'child', değilse 'unknown'Sample solution
void main() {
print(iliski('Center'));
print(iliski('Text'));
}
String iliski(String s) {
if (s == 'Center') return 'parent';
if (s == 'Text') return 'child';
return 'unknown';
}Expected output
parent child
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is a widget below another widget called?
- root
- sibling
- child Correct answer
- parent
Explanation: A widget inside a parent is called a child; the parent wraps the child.
2 Bind parent-child
Center(
____: Text('içte'),
)Center(
child: Text('içte'),
)Explanation: The Center widget takes a child widget via the child parameter.
3 Tree terms
| Term | Meaning |
|---|---|
widget tree |
Nested structure of widgets |
parent |
Outer widget wrapping a child |
child |
Widget inside a parent |
root widget |
Topmost widget in the tree |