Flutter

Let us learn something .... Yahooo!

---

Widgets

Similar to components in React.js, Widgets in Flutter allow us to build UI piece-by-piece, incrementally. They can be nested (or composed) with one and the other, causing good separation of concerns. Widget tree is the same as component tree.

All widgets are basically dart classes in Flutter, the way all components are JS functions in React.js.

Widgets, just like React.js components, can be stateful or stateless.

---

OOP-First Approach

Flutter takes a very, very heavy OOP-first approach, whereas React.js (since 2018) takes a more functional approach.

---

StatefulWidget Vs. StatelessWidget Lifecycle Methods

• StatefulWidget has three key lifecycle methods: initState, build, and dispose.
• StatelessWidget has only one lifecycle method: build. The dispose method is not applicable.

All these methods are fully overridable. However, dispose() and initState() demand you to call the super (original) dispose and initState as well and then write your code in addition to that in the next line.

---

Topics Covered

• MaterialApp widget

• Scaffold widget

• AppBar widget

• Container widget

• EdgeInsets ( for adding padding and margins inside containers )

• Column widget ( crossAxisAlignment Vs. mainAxisAlignment)

• Row widget ( mainAxisAlignment Vs. crossAxisAlignment )

• [ Inheritance ]: Custom StatelessWidget

• [ Inheritance ]: Custom StatefulWidget

• MediaQuery.sizeOf ( built-in InheritedWidget )

• [ Dynamic Polymorphism ]: Using @override with build ( .... ) method

• Initialisation formals in constructors

• Positional Vs. named parameters ( required Vs. nullable with "?")

• Image widget ( using Image.asset( .... ) method & image asset registeration in pubspec.yaml )

• Sizedbox widget ( for adding spacing between container elements )

• Expanded widget ( for stopping an image from going out of the screen bounds )

• ColorBlendMode widget ( for removing image backgrounds )

• FilledButton widget

• StatefulWidgets ( the State class, setState( () { ... }) method )

• Table widget ( TableRow widget also )

• Modals

• FloatingActionButton

• Modals

• Navigational Animations ( CupertinoPageRoute and MaterialPageRoute )

• Form StatefulWidget ( FormKey, TextFormField, validation, InputDecorations )

• Navigator ( Navigator.push ( ... ) and MaterialPageRoute and CupertinoPageRoute for going to the next screen in the built-in stack )

• Navigation (stack with data passing, tab bar, BottomNavigationBar )

• BottomNavigationBar

• Navigation Rail (vertical navigation bar)

• TabBar (top navigation bar, part of the app bar)

• Drawer (the sliding widget from the left with a hamburger icon)

• CircularProgressIndicator

• Scrollable List ( SingleChildScrollView, Card, ListTile )

• Central state management ( context ) via provider package

to-do:

• Light / dark theme