Slide 1

Slide 1 text

Flutter: Glimpses of Udacity Course

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Why Flutter ?

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

Why Dart ?

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Stateless Widget

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

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”.

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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