Getting started with Flutter

- Getting started with Flutter
- Dart
- Sample project

Transcript

1. Getting
   started with
   Flutter
   

   View Slide

2. About
   → Khoa https://github.com/onmyway133/
   → Write for React Native Training https://
   medium.com/react-native-training
   → and Flawless App https://medium.com/flawless-
   app-stories
   

   View Slide

3. Flutter
   → https://flutter.dev/
   → Open source mobile application development SDK
   by Google
   → https://github.com/flutter/flutter
   → Release 1.0 on December 4th 2018
   

   View Slide

4. Platform
   → Target iOS, Android, Fuchsia
   → Latest Flutter 1.2.1 with Dart 2.1.2
   → Flutter engine in C++ using Google Skia graphics
   library
   → Foundation in Dart
   

   View Slide

5. Platform
   → Android: Dart virtual machine with just in time
   (JIT) execution
   → iOS: ahead of time (AOT) compilation
   → Dart supports hot reload
   → Modification to source files can be injected into
   running application
   

   View Slide

6. Why Flutter uses Dart
   → https://hackernoon.com/why-flutter-uses-dart-
   dd635a054ebf
   → Either Ahead of Time or Just in time
   → Effective object allocation and garbage collection
   

   View Slide

7. Dart
   // Define a function.
   printInteger(int aNumber) {
   print('The number is $aNumber.'); // Print to console.
   }
   // This is where the app starts executing.
   main() {
   var number = 42; // Declare and initialize a variable.
   printInteger(number); // Call a function.
   }
   

   View Slide

8. Dart
   → async await
   → named and positional parameters
   → strongly typed
   

   View Slide

9. What’s Revolutionary about Flutter
   → https://hackernoon.com/whats-revolutionary-
   about-flutter-946915b09514
   → Develop Flutter widgets instead of platform
   widgets
   

   View Slide

10. Flutter
    new Center(
    child: new Column(
    children: [
    new Text('Hello, World!')),
    new Icon(Icons.star, color: Colors.green)
    ]
    )
    )
    

    View Slide

11. Flutter vs React Native
    → React Native Virtual dom -> native controls
    → Flutter Widget tree
    

    View Slide

12. Compatability
    → https://medium.com/flutter-io/https-medium-
    com-flutter-io-pitching-flutter-2d4f494e47d1
    → OpenGL -> Metal https://github.com/flutter/
    flutter/issues/18208 !?
    → New widget?
    → New native features !?
    → Plugins support
    

    View Slide

13. Platform channel
    → https://flutter.dev/docs/development/platform-
    integration/platform-channels
    → Integrate platform specific code
    

    View Slide

14. Production checklist
    → https://medium.com/capital-one-tech/flutter-a-
    production-ready-checklist-c202525fab48
    → Security (Obfuscation, SSL Pinning, Static Code
    Analysis)
    → Native Integration
    → Multiple entry points
    → Testing
    

    View Slide

15. Create an app
    → Install Flutter https://flutter.dev/docs/get-
    started/install/macos
    → Flutter Widget of the week https://
    www.youtube.com/watch?
    v=lkF0TQJO0bA&list=PLOU2XLYxmsIL0pH0zWe_ZOH
    gGhZ7UasUE
    

    View Slide

16. Another contact book
    → https://github.com/shortcut/contactbookflutter
    → Dependency
    → googlesignin: ^4.0.1+1
    → http: ^0.12.0+1
    → url_launcher: 5.0.2
    

    View Slide

17. Resource
    → Add Flutter to existing apps https://github.com/
    flutter/flutter/wiki/Add-Flutter-to-existing-apps
    → Flutter official samples https://github.com/
    flutter/samples
    → Open source apps https://github.com/Solido/
    awesome-flutter#open-source-apps
    → Cookbook https://flutter.dev/docs/cookbook
    

    View Slide