Widgets in Flutter — Flutter Basic Programming — Part 3

In Flutter, everything is a widget

Widget tree
  • Widget is not just a piece of UI. Widget is a lot more than just structural elements like buttons, text, image, list or slider. A widget might display Something, it might help define design, it might help with layout, it may handle user interaction, etc.
  • Widget is look like a blueprint for displaying your app state, and Flutter using these blueprint to create views.
Example display text “Hello Widget” in Flutter
Text(
'Hello Widget',
style: Theme.of(context).textTheme.headline4,
);

But, how Flutter draw a widget into screen ?

Conditions to called build() method
  • When the state of your app changes (for example, the user flips a switch in the settings screen), you change the state, and that triggers a redraw of the user interface.
  • State can be separated into two concept: Ephemeral state and App state.

Ephemeral state

  • Called UI state or local state. Which you can neatly contain in a single widget.
  • No need to use state management techniques on this kind of state, only need using “Stateful Widget”.
  • Only need to use setState() to alter your current state.
Counter example
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}}

App state

  • Called shared state. Use when you want to share across many parts of your app or want to keep between user sessions.For example, these case will using application state:
  1. Login information
  2. Shopping cart from e-commerce
  3. Notification from social app

Widget tree, Element tree and Render tree

  • Widget will describes the configuration for an Element.
  • Element is an instantiation of a Widget at a particular location in the tree.
  • RenderObject will handles size, layout and painting.
Three objects in each widget
  1. Corresponding to the Widget tree, creates the Element tree in which each Element object is created by calling createElement() on the widget.
  2. Each render object will be created when Element calls createRenderObject().
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
key: _keyRed,
width: 375.w,
height: 500.h,
color: Colors.red,
child: Text(
"Screen Width : ${ScreenUtil().screenWidth} Height : ${ScreenUtil().screenHeight}"
"\n$_containerSize "
"\nWidth Ratio : ${ScreenUtil().scaleWidth} "
"\nHeight Ratio : ${ScreenUtil().scaleHeight} "
"\nText Ratio : ${ScreenUtil().scaleText} "
"\n$defaultTargetPlatform",
style: AppTextStyle.label3,
),
),
Text(
"Aspect Ratio : ${ScreenUtil().pixelRatio}",
style: AppTextStyle.label3,
),
],
),
);
}

Widget Tree

  • Basiclly it’s all of Widget that we created when coding. For example: Text, Column, Image,… All of nested widget will create a widget tree.
  • We can fully control widget tree because we are the one who build the position of widget in this tree.
  • Widget tree will created when build() method called.
  • Widget tree not only display view in screen but also it’s help Flutter know that which will draw in screen. Widget tree will rebuild frequently.

Element Tree

  • Will linked with Widget tree. It’s information that will set with object/element which displayed. It’s rarely rebuild.
  • Will manage with another way and don’t rebuild when build() method called.
  • Flutter will automatically create an element in each Widget in Widget Tree. It’ll process immediately when Flutter handle Widget first time.
  • We can said that one element is one object that will manage in heap memory by Flutter, it’s related to Widget in Widget tree.
  • Element only keep one reference to Widget in Widget tree.

Render tree

  • It’s represent for which element/object that display on screen.
  • It’s rarely rebuild.
  • It’ll linked with Element Tree.Element in Element Tree will point to render object which actually display in view.
  • Whenever Flutter saw an element that haven’t render before, it’ll reference to Widget in Widget Tree, and create an element in Element Tree.
  • Flutter also have layout phase, on this phase it’ll calculate and get space, layout display in screen.
  • It’s also have another phase for configuration listeners with Widget that let us handle event.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hoang Nguyen

Hoang Nguyen

I've started with Flutter since 2019 and have good knowledge about Flutter and some architecture. I want to share more of my knowledge and learn more from other