Widget tree

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: child

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

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

Test yourself

What is a widget below another widget called?
- root
- sibling
- child
- parent
Show answer

child — A widget inside a parent is called a child; the parent wraps the child.

Bind parent-child

Center(
  ____: Text('içte'),
)

Show answer

Center(
  child: Text('içte'),
)

Tree terms

widget tree

Nested structure of widgets
parent

Outer widget wrapping a child
child

Widget inside a parent
root widget

Topmost widget in the tree

Next lesson: BuildContext

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies