written in Dart

pub is the package manager for dart and flutter

https://docs.flutter.dev/resources/architectural-overview

https://docs.flutter.dev/resources/inside-flutter

https://stackoverflow.com/questions/63904127/does-every-flutter-app-contain-flutter-engine

widget tree you code → widget tree with all actual widgets 1→1 element tree n→m render tree (render objects) → gpu woahh

widget

everything is a widget, right from actual ui elements like Containers, to style properties like Padding, Alignment etc.

you size widget using logical pixels like css

not just single elements, even style properties can be widgets, example Padding, Alignment etc

style

can be properties on the widgets themselves, or seperate widgets.

unlike web, markup and styling are not seperate. they’re combined.

styling DOES NOT have cascading or inhertinace. thank god. everything is atomisized. you are styling that widget only. no css bullshit. if at all you want some form of inhertance or theming, use the inbuilt theme provider etc.

layouting

https://docs.flutter.dev/ui/layout/constraints

in html, you can just add tags, and they’ll automatically layout using the box model.

each element will get it’s sizes via cascading + inheritance, and is then resolved using rules.

in flutter, there’s no way to add widgets randomly in the “global space”. you have to follow the widget model and have a column, row or whatever with children.

each widgets finally gets its size via the layouting algorithm.

trees

https://www.kodeco.com/books/flutter-apprentice/v2.0/chapters/4-understanding-widgets

https://www.youtube.com/watch?v=996ZgFRENMs

widget tree is only for the developer to interact with

element tree is what engine creates to handle lifecycle of the widgets

render tree is what is actually used by graphics engine to paint

flutter reuses element and render tree objects, whereas widgets can come and go 100s of times in 1 second

if you changed widgets but their of same type, same render tree element is used ex replacing text(”kishan”) w text(”lol”)

buildcontext

is actually the element of that widget from the element tree

https://www.youtube.com/watch?v=bzWaMpD1LHY

keys

keys are what you think they are. unique identifiers

used mostly when you have widgets of the same type ex in a list and you’ve to uniquely identify them

otherwise not necessary