Les nouveautés Flutter depuis la Google I/O 2019

Transcript

1. Les nouveautés Flutter
   Edouard Marquez
   
   (Développeur freelance Flutter & Android)
   

   View Slide

2. Un petit rappel
   
   sur Flutter
   

   View Slide

3. Les nouveautés de la Google I/O 2019 Paris Android User Group
   La notion de "declarative UI"
   SwiftUI
   
   iOS / iPad OS / Mac OS /
   
   TV OS / Watch OS
   Jetpack Compose
   
   Android
   

   View Slide

4. Les nouveautés de la Google I/O 2019 Paris Android User Group
   La notion de "declarative UI"
   SwiftUI
   
   iOS / iPad OS / Mac OS /
   
   TV OS / Watch OS
   Jetpack
   
   Compose
   
   Android
   import SwiftUI
   struct Content : View {
   @State var model = Themes.listModel
   var body: some View {
   List(model.items, action: model.selectItem) {
   Image(item.image)
   VStack(alignement: .leading) {
   Text(item.title)
   Text(item.subtitle)
   .color(.gray)
   }
   }
   }
   }
   

   View Slide

5. Les nouveautés de la Google I/O 2019 Paris Android User Group
   En résumé, qu'est-ce que Flutter ?
   OpenSource
   
   Toutes les couches
   Multiplateforme
   
   Android (4.1+) & iOS (8.0+)
   Code natif
   
   = performances
   Dart
   
   Langage de programmation
   Inspiré du web
   
   Hot Reload, concepts…
   

   View Slide

6. Introduction à Flutter Meetup Abbeal
   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

7. View Slide

8. Et donc les
   
   nouveautés ?
   

   View Slide

9. 1 Une nouvelle version stable de Flutter est disponible
   g123k@localhost:~$ flutter doctor
   Doctor summary (to see all details, run flutter doctor -v):
   [✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.4 18E226, locale en-FR)
   [✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
   [✓] iOS toolchain - develop for iOS devices (Xcode 10.2.1)
   

   View Slide

10. Collection
    
    if
    Collection
    
    for
    Null-aware
    spread
    operator
    2 Une nouvelle version de Dart est disponible
    Nouvelles possibilités sur les collections
    
    "UI as code"
    Spread
    operator
    Ajouter une liste
    dans une liste
    Ajouter une liste non-
    nulle dans une liste
    Ajouter par
    condition
    Ajouter en
    itérant
    

    View Slide

11. 2 Avant Dart 2.3
    class MyWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    List widgets = [];
    if (myCondition) {
    widgets.add(const Icon(Icons.people, size: 40.0));
    }
    if (myOtherCondition) {
    widgets.add(const Text('Hello Paris'));
    }
    return Column(
    children : widgets
    );
    

    View Slide

12. 2 Depuis Dart 2.3
    class MyWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return Column(
    children : [
    if (myCondition) const Icon(Icons.people, size: 40.0),
    if (myOtherCondition) const Text('Hello Paris')
    ]
    );
    }
    }
    

    View Slide

13. 3 Flutter pour l'embarqué
    Perhaps one of the most pervasive embedded
    platforms where Flutter is already running is on the
    smart display operating system that powers the likes
    of Google Home Hub.
    “
    “
    Within Google, some Google-built features for the
    Smart Display platform are powered by Flutter today.
    And the Assistant team is excited to continue to
    expand the portfolio of features built with Flutter for
    the Smart Display in the coming months; the goal this
    year is to use Flutter to drive the overall system UI.
    “
    “
    

    View Slide

14. 3 Flutter pour l'embarqué
    

    View Slide

15. 4 Flutter sur le desktop
    Windows Mac
    Linux ChromeOS
    

    View Slide

16. 5 Flutter sur le web (Hummingbird)
    Material Cupertino
    Widgets
    Rendering
    Foundation
    Animation Painting Gestures
    Framework
    
    (Dart)
    Skia Dart Text
    Engine
    
    (C++)
    Canvas JS Engine DOM
    Navigateur
    

    View Slide

17. 5 Flutter sur le web (Technical preview)
    Pas de plugin
    
    Temporairement à accès
    à des API de substitution
    API incomplètes
    
    Toutes les API Flutter ne
    sont pas disponibles
    Chrome uniquement
    
    Pour l'aspect
    
    développement
    2 modes de
    fonctionnement
    
    Dev / prod
    Ca marche !
    

    View Slide

18. 6 Résultats du concours Flutter Create
    

    View Slide

19. 6 Résultats du concours Flutter Create
    

    View Slide

20. View Slide

21. 6 Résultats du concours Flutter Create
    

    View Slide

22. Merci !
    
    
    Questions ?
    @g123k @FlutterFr
    Meetup Kotlin (04/07)
    
    Kotlin multiplatform + Flutter & PWA
    

    View Slide