Flutter is an open-source UI toolkit from Google for crafting beautiful, natively compiled applications for desktop, web, and mobile from a single codebase. Flutter apps are built using the Dart programming language.
Widgets are basically the UI components in Flutter. There are 2 types of widgets in flutter. Stateless and StateFul.
This is a object orieanted programming language which is used to write flutter code. Dart allows Flutter to avoid the need for a separate declarative layout language like JSX or XML. It uses AOT compilation to make the code run faster on host device.
main() is the method from which the flutter project starts. runApp() is the method which returns a widget which is attached to UI as the root widget.
Hot Reload can be used when we want to change some of UI part of a widget. this takes much less time to execute and it will save the current state of the widget. Hot Restart will destroy all the state data of the widget and reload the app from start. this takes longer time then hot reload.
If we are expecting a sequence of output from a source we can make use of streams. this will allow us to subscribe to the stream and listen to it whenever a new data is available. Types -
- Single subscription - this will notify to only one listener. adding more then one listener will result in error.
- Broadcast streams - this will notify to more then one listener.
Key in flutter are used to identify a widget by the framework. by default each widget is assigned a key. if we are doing any operation like adding and removing widgets in flutter we should make use of Key to keep the widgets distinguishable from each other.
createState(), initState(), didChangeDependeicies(), build(), didUpdateWidget(), setState(), deactivate(), dispose()
initState(), didChangeDependeicies(), build(), deactivate(), dispose()
Flutter has 3 trees structures, Widget tree, Element tree and Render tree.
We can get the app lifecycle events from a widget using the WidgetsBindingObserver mixin.
class LifeCycleManager extends StatefulWidget {
final Widget child;
LifeCycleManager({Key key, this.child}) : super(key: key);
_LifeCycleManagerState createState() => _LifeCycleManagerState();
}
class _LifeCycleManagerState extends State<LifeCycleManager>
with WidgetsBindingObserver {
@override
void initState() {
WidgetsBinding.instance.addObserver(this);
super.initState();
}
@override
void dispose() {
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}
@override
void didChangeAppLifecycleState(AppLifecycleState state) {
print('state = $state');
}
@override
Widget build(BuildContext context) {
return Container(
child: widget.child,
);
}
}
This will output
state = AppLifecycleState.inactive
state = AppLifecycleState.paused
state = AppLifecycleState.inactive
state = AppLifecycleState.resumed
There are 4 states of WidgetsBindingObserver. detached, inactive, paused and resumed. Flutter dev ref.