Flutter: Glimpses of Udacity Course

Introduction to The Flutter Framework ● Open source, Cross Platform ( Android / iOS ) Framework ● Built using Modern reactive framework ● Has its own 2D rendering engine ● Good development tools to work with ( IntelliJ Idea / VSCode ) ● Lots of ready-to-use UI widgets - Material and Cupertino

Things to be learnt from this course To build high quality interactive apps To structure and architect apps Flutter Tooling for making apps efficient Widgets ( readymade and customized ) States (Maintaining UI widget states) Material Design User Interaction and gestures

Why Flutter ?

No content

Why Flutter ? ● Single code base compiles to native ARM code ( machine code for each platform ) results in faster performance. ● Flutter Apps comes with their own UI renderer that uses GPU to accelerate rendering of Widget tree. ● Widget tree is a nested layer of Widgets.

Why Dart ?

Why Dart ? Strongly Typed Object Oriented language Familiar Language experience like Swift, C#, Java and JavaScript JIT ( Just In Time )Compilation: Hot Reload: Code is continuously recompiled on devices AOT ( Ahead of Time ) Compilation: Code is directly compiled to native ARM code, leads to Fast startup and better performance.

Flutter’s Reactive Framework A View is build as an immutable tree of Widgets Widgets are foundation of Flutter Apps Nearly, everything is a widget in Flutter

No content

No content

No content

No content

No content

No content

Stateless Widget

Stateless Widgets ● Immutable Widgets - All their fields are final. They cannot be changed once created. ● Example: Container Widget ● We can initialize fields like background color, height and width using constructors ● Non-interactive by nature. ● On the contrary, stateful Widgets create a State Object and are interactive.

Widget with one / multiple Child ● “Container Widget” can have only one child widget. Attribute name is “child”. ● Whereas, “Column Widget, ListView Widget and Stack Widget” can have more than one child widget.. Attribute name is “children”.

Getting started: Points to remember Any Flutter app starts with main() function Void main(){ // This method ‘runApp’ comes from “package:flutter/material.dart” runApp(...somewidget...) } When creating any widget, always have a “,” comma after the last attribute of that widget. This helps in formatting the code with Dart Format.

Getting started: Points to remember ● When creating any widget, always have a “,” comma after the last attribute of that widget. This helps in formatting the code with Dart Format. ● To format your code ( in IntelliJ Idea or Android Studio )go to menu Code -> Reformat code with Dart Frmt

Getting started: MaterialApp Widget ● A canonical Widget to start from: ● Attributes: title, home, theme, things to do on back button press and more ● You can use any widget, e.g. Container in Home attribute ● Another widget that can be used with home attribute is Scaffold. ● Scaffold offers: Drawers, AppBars, BottomNavigation Tabs and FABs