Flutter - Glimpses from Udacity Course

Transcript

1. Flutter: Glimpses of Udacity Course
2. 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
3. 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
4. Why Flutter ?
6. 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.
7. Why Dart ?
8. 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.
9. 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
16. Stateless Widget
17. 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.
18. 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”.
19. 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.
20. 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
21. 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