Flutter Study Jam : Introduction

Transcript

1. @FlutterParis
   FlutterParis
   flutter-paris.fr
   

   View Slide

2. Flutter Study Jam
   

   View Slide

3. Flutter Study Jam
   

   View Slide

4. Flutter Study Jam
   5) Scaffold First App
   6) Widgets & Layouts
   7) Navigation
   8) Stateful Widgets
   1) Why Flutter?
   2) Why Dart?
   3) Reactive Framework
   4) Development Tools
   

   View Slide

5. Merci à
   SUP'Internet !
   

   View Slide

6. Le programme ce soir
   1ère partie
   Introduction à Flutter

   + notions nécessaires au cours
   3ème partie
   A votre tour !
   Démarrage du codelab
   2ème partie
   Installation de
   l'environnement
   

   View Slide

7. Slack
   bit.ly/slack-flutter-france
   Rejoindre le channel #study-jam-paris
   

   View Slide

8. Flutter Study Jam
   Introduction aux concepts de Flutter
   

   View Slide

9. Pour bien commencer
   8
   Comment coder
   en Dart ?
   Qu'est-ce que
   Flutter ?
   Les outils pour
   développer
   

   View Slide

10. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Qu'est-ce que Flutter ?
    OpenSource
    Toutes les couches
    Multiplateforme
    Android (4.1+) & iOS (8.0+)
    Inspiré du web
    Hot Reload, concepts…
    Code natif
    = performances
    Dart
    Langage de programmation
    Tooling
    Plugins, Inspector…
    

    View Slide

11. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Le paradigme : natif
    Widgets OEM
    Position GPS Bluetooth
    Audio Capteurs
    Caméra Etc
    Plateforme
    Services
    Code natif
    Application
    Canvas
    Evénements
    

    View Slide

12. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Le paradigme : WebView (Ionic, Cordova…)
    Javascript
    WebView
    Application Plateforme
    Position GPS Bluetooth
    Audio Capteurs
    Caméra Etc
    Services
    Bridge
    Canvas
    Evénements
    

    View Slide

13. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Le paradigme : Reactives
    Javascript
    Widgets OEM
    Application Plateforme
    Position GPS Bluetooth
    Audio Capteurs
    Caméra Etc
    Services
    Bridge
    Canvas
    Evénements
    

    View Slide

14. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Le paradigme : Flutter
    Code natif
    Canvas
    Evénements
    Application Plateforme
    Position GPS Bluetooth
    Audio Capteurs
    Caméra Etc
    Services
    Widgets,
    Rendu
    Platform
    Channels
    

    View Slide

15. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Stack Flutter
    

    View Slide

16. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    "Tout est un widget"
    100% Flutter
    Dessine tout à l'écran
    Tout est widget
    Layout, thème, vue…
    Catalogue
    Material, iOS…
    Immutable
    Mais on peut y connecter un état
    

    View Slide

17. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Hot Reload
    

    View Slide

18. 17
    Le langage Dart
    

    View Slide

19. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Dart : les types
    DART
    int, double, String, bool…
    List list = ["a", "b"];
    // équivalent à
    List = List()..add("a")..add("b");
    Map = {'Clé': 'Valeur'}
    dynamic, var, Object
    

    View Slide

20. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Dart : les classes
    DART
    class Car {}
    // On récupère les attributs et l'implémentation des méthodes
    class Clio extends Car {}
    // On ne récupère que la définition de la classe Car
    class Clio implements Car {}
    

    View Slide

21. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Dart : les constructeurs
    DART
    class Car {
    final String model;
    Car(String carModel) : model = carModel;
    Car(this.model);
    Car.namedConstructor(String carModel) : model = carModel;
    }
    

    View Slide

22. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Dart : les constructeurs
    DART
    class Car {
    final String model;
    Car(String carModel) : model = carModel;
    Car(this.model);
    Car.namedConstructor(String carModel) : model = carModel;
    }
    

    View Slide

23. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Dart : les constructeurs
    DART
    class Car {
    final String model;
    Car(String carModel) : model = carModel;
    Car(this.model);
    Car.namedConstructor(String carModel) : model = carModel;
    }
    

    View Slide

24. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Dart : les arguments
    DART
    void myMethod1 (int arg1, int arg2) {…}
    // Optional positional parameters
    void myMethod2 ([int arg1, int arg2]) {…}
    // Optional named parameters
    void myMethod3 ({int arg1, int arg2}) {…}
    

    View Slide

25. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Dart : les arguments
    DART
    void myMethod1 (int arg1, int arg2) {…}
    // Optional positional parameters
    void myMethod2 ([int arg1, int arg2]) {…}
    // Optional named parameters
    void myMethod3 ({int arg1, int arg2}) {…}
    

    View Slide

26. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Dart : les arguments
    DART
    void myMethod1 (int arg1, int arg2) {…}
    => myMethod1(0, 1)
    void myMethod2 ([int arg1, int arg2]) {…}
    => myMethod2() ou myMethod2(0) ou myMethod2(0, 1)
    void myMethod3 ({int arg1, int arg2}) {…}
    => myMethod3() ou myMethod3(arg1: 0) ou myMethod3(arg1: 0, arg2: 1)
    

    View Slide

27. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Dart : les arguments
    DART
    void myMethod1 (int arg1, int arg2) {…}
    => myMethod1(0, 1)
    void myMethod2 ([int arg1, int arg2]) {…}
    => myMethod2() ou myMethod2(0) ou myMethod2(0, 1)
    void myMethod3 ({int arg1, int arg2}) {…}
    => myMethod3() ou myMethod3(arg1: 0) ou myMethod3(arg1: 0, arg2: 1)
    

    View Slide

28. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Dart : les arguments
    DART
    void myMethod1 (int arg1, int arg2) {…}
    => myMethod1(0, 1)
    void myMethod2 ([int arg1, int arg2]) {…}
    => myMethod2() ou myMethod2(0) ou myMethod2(0, 1)
    void myMethod3 ({int arg1, int arg2}) {…}
    => myMethod3() ou myMethod3(arg1: 0) ou myMethod3(arg1: 0, arg2: 1)
    

    View Slide

29. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Dart : les arguments
    DART
    void myMethod1 (int arg1, int arg2) {…}
    => myMethod1(0, 1)
    void myMethod2 ([int arg1, int arg2]) {…}
    => myMethod2() ou myMethod2(0) ou myMethod2(0, 1)
    void myMethod3 ({int arg1, int arg2}) {…}
    => myMethod3() ou myMethod3(arg1: 0) ou myMethod3(arg1: 0, arg2: 1)
    

    View Slide

30. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Dart : les arguments
    DART
    // Valeur par défaut
    void myMethod3 ({int arg1, int arg2 = 10}) {…}
    // Forcer les valeurs pour les named arguments
    void myMethod3 ({int arg1, @required int arg2}) {…}
    

    View Slide

31. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Dart : la visibilité (public / privé)
    DART
    class Car {
    final String _model;
    String get model => _model;
    void _internalMethod() {…}

    void publicMethod() {…}
    }
    

    View Slide

32. Les outils
    25
    

    View Slide

33. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Flutter Inspector
    

    View Slide

34. Premiers pas en Flutter
    27
    La navigation
    Les widgets
    StatelessWidget
    StatefulWidget
    

    View Slide

35. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Liste des widgets
    

    View Slide

36. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Liste des widgets
    Material
    AppBar, RaisedButton, 

    SnackBar, Chip, Card…
    Cupertino
    CupertinoNavigationBar,
    CupertinoButton, Cupertino….
    Widgets génériques
    Text, Image,
    Padding, Theme…
    Texte
    

    View Slide

37. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Liste des layouts / containers
    Fils unique
    Text, Image,
    Padding, Theme…
    Padding
    Texte
    Fils multiples
    Column (les uns en dessous des autres)
    Row (les uns à côté des autres)
    Stack (les uns aux dessus des autres)
    Column
    Texte
    

    View Slide

38. Stateless/Stateful
    Widget
    31
    

    View Slide

39. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Quelle différence entre StatelessWidget et StatefulWidget ?
    stless stfull
    StatelessWidget
    Son état n'évolue pas au fil du temps
    Bienvenue !
    StatefulWidget
    Widget attaché à un état (State) qui
    peut évoluer au fil du temps
    Vous avez
    1 item
    Ajouter un
    item au
    panier
    

    View Slide

40. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Comment créer un StatelessWidget ?
    DART
    class MyWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return Text('Hello World!');
    }
    }
    

    View Slide

41. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Comment créer un StatelessWidget ?
    DART
    class MyWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return Text('Hello World!');
    }
    }
    

    View Slide

42. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Comment créer un StatelessWidget ?
    DART
    class MyWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return Text('Bienvenue !');
    }
    }
    

    View Slide

43. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Comment créer un StatefulWidget ?
    DART
    class MyWidget extends StatefulWidget {
    @override
    State createState() {
    return MyWidgetState();
    }
    }
    

    View Slide

44. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Comment créer un StatefulWidget ?
    DART
    class MyWidgetState extends State {
    int items = 0;
    @override
    Widget build(BuildContext context) {
    return Column(children: [
    Text('Vous avez $items item(s)'),
    RaisedButton(
    child: Text('Ajouter un item au panier'),
    onPressed: () {})
    ]);
    }
    }
    

    View Slide

45. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Comment créer un StatefulWidget ?
    DART
    class MyWidgetState extends State {
    int items = 0;
    @override
    Widget build(BuildContext context) {
    return Column(children: [
    Text('Vous avez $items item(s)'),
    RaisedButton(
    child: Text('Ajouter un item au panier'),
    onPressed: () {})
    ]);
    }
    }
    

    View Slide

46. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Comment créer un StatefulWidget ?
    DART
    class MyWidgetState extends State {
    int items = 0;
    @override
    Widget build(BuildContext context) {
    return Column(children: [
    Text('Vous avez $items item(s)'),
    RaisedButton(
    child: Text('Ajouter un item au panier'),
    onPressed: () {})
    ]);
    }
    }
    

    View Slide

47. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Comment forcer la mise à jour d'un StatelessWidget ?
    DART
    onPressed: () {
    setState() {
    items++;
    }
    }
    

    View Slide

48. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Comment forcer la mise à jour d'un StatelessWidget ?
    DART
    onPressed: () {
    setState() {
    items++;
    }
    }
    

    View Slide

49. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Le lifecycle simplifié des StatefulWidgets
    initState
    Created
    Widget
    State
    create
    State
    Initialized
    mounted
    didChange
    Dependencies
    Ready
    build
    Defunct
    dispose
    setState
    

    View Slide

50. La navigation
    38
    

    View Slide

51. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Comment gérer la navigation ?
    Bouton retour sur Android,
    swipe sur iOS
    Gestion auto de la
    plateforme
    Ce composant gère les
    écrans et la backstack
    Le Navigator
    

    View Slide

52. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Soit les écrans suivants
    DART
    class Screen1 extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(
    title: Text('Screen 1')),
    body: RaisedButton(
    child: Text('Open page 2'),
    onPressed: () { // TODO }));
    }
    }
    

    View Slide

53. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Soit les écrans suivants
    DART
    class Screen2 extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(
    title: Text('Screen 2')),
    body: RaisedButton(
    child: Text('Close'),
    onPressed: () { // TODO }));
    }
    }
    

    View Slide

54. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode 1
    Comment ouvrir puis fermer un écran ?
    Ouvrir un nouvel écran
    Navigator.of(context).push(
    MaterialPageRoute(builder: (context) => Screen2()));
    Fermer l'écran courant
    Navigator.of(context).pop();
    

    View Slide

55. C'est à vous !
    Slack :
    bit.ly/slack-flutter-france
    Cours :
    bit.ly/study-jam-udacity
    Site officiel Flutter :
    flutter.io
    Slides :
    bit.ly/slides-study-jam
    

    View Slide