Les nouveautés Flutter

Depuis le dernier meetup du Flutter Paris en juin 2018, cette présentation retrace les principales nouveautés qui sont intervenues dans le monde de Flutter.

Speaker : Edouard Marquez - Freelance Android & Flutter

Contenu :
- Les nouveautés Dart
- Les nouveautés Flutter
- Les nouveautés de la communauté

Transcript

1. Les nouveautés
   Flutter
   

   View Slide

2. Edouard Marquez
   Freelance développeur Android & Flutter
   2
   @g123k edouard@marquez.cool
   @FlutterDev
   Qui suis-je ?
   

   View Slide

3. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
   De quoi allons-nous parler ce soir ?
   FLUTTER
   Nouvelles versions,
   nouvelles fonctionnalités…
   COMMUNAUTE
   Plein de nouveautés !
   DART
   Dart 2.0 et Dart 2.1
   

   View Slide

4. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
   Mais avant de commencer…
   Android Web iOS ReactNative Xamarin Autres Aucun
   Sondage réalisé auprès de 1016 personnes en juillet 2018 - 831 réponses
   67%
   45%
   30%
   24%
   15%
   8% 8%
   Parmi les plateformes mobiles suivantes,
   avec lesquelles avez-vous une expérience professionnelle ?
   

   View Slide

5. Dart 2.1
   Dart 2.0 en version
   finale
   Les nouveautés du
   langage Dart
   5
   

   View Slide

6. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
   Dart Flutter Communauté
   Dart : du pire…
   6
   

   View Slide

7. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
   Dart Flutter Communauté
   Dart : du pire…
   6
   

   View Slide

8. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
   Dart Flutter Communauté
   Dart : du pire… au meilleur
   7
   

   View Slide

9. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
   Dart Flutter Communauté
   Version stable pour Dart 2.0
   8
   "Sound" type-system
   new optionnel
   const optionnel
   *
   AngularDart 5
   

   View Slide

10. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Dart Flutter Communauté
    Et déjà une version 2.1 !
    9
    Nouvelle syntaxe et
    harmonisation entre
    les "plateformes"
    Evolution des mixins
    Peu de changements
    notables
    Version "mineure"
    

    View Slide

11. Nouveaux widgets
    Nouvelles versions
    Les nouveautés
    Flutter
    10
    Les problèmes
    bloquants
    

    View Slide

12. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Nouvelles versions de Flutter
    11
    7
    0.7.3
    28 août
    6
    0.6.0
    16 Août
    8
    0.8.2
    7 Septembre
    Nouvelles
    bêtas
    Passage à
    Dart 2.1
    Améliorations 

    et ajouts de 

    Widgets Cupertino
    

    View Slide

13. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Nouveaux Widgets
    12
    CupertinoApp
    CupertinoTimerPicker
    CupertinoActionSheet
    CupertinoSegmentedControl
    

    View Slide

14. Import des
    ressources
    13
    

    View Slide

15. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Possibilité d'importer un dossier d'assets
    14
    name: helloworld
    description: A new Flutter project.
    dependencies:
    flutter:
    sdk: flutter
    flutter:
    uses-material-design: true
    assets:
    - images/pic1.jpg
    - images/pic2.jpg
    - images/pic3.jpg
    Pubspec.yaml
    Le fichier pubspec est en quelque
    sorte la carte d'identité de
    l'application.
    On y indique le nom et la description
    du projet, tout comme les ressources
    (
    assets
    ) qui pourront être utilisées.
    

    View Slide

16. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Possibilité d'importer un dossier d'assets
    14
    name: helloworld
    description: A new Flutter project.
    dependencies:
    flutter:
    sdk: flutter
    flutter:
    uses-material-design: true
    assets:
    - images/pic1.jpg
    - images/pic2.jpg
    - images/pic3.jpg
    Pubspec.yaml
    Le fichier pubspec est en quelque
    sorte la carte d'identité de
    l'application.
    On y indique le nom et la description
    du projet, tout comme les ressources
    (
    assets
    ) qui pourront être utilisées.
    assets:
    - images/
    

    View Slide

17. Les problèmes de
    Flutter
    15
    

    View Slide

18. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    De retour en avril dernier…
    16
    Intégration WebView
    Maps
    Routing
    Taille
    Faciliter l'intégration de
    Flutter dans une
    application existante
    Enrichir/améliorer les
    APIs pour la navigation
    Intégrer des WebView
    dans l'arbre des widgets
    Intégrer une carte
    comme widget
    Réduire la taille du
    moteur
    

    View Slide

19. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    De retour en avril dernier…
    16
    Intégration WebView
    Maps
    Routing
    Taille
    Faciliter l'intégration de
    Flutter dans une
    application existante
    Enrichir/améliorer les
    APIs pour la navigation
    Intégrer des WebView
    dans l'arbre des widgets
    Intégrer une carte
    comme widget
    Réduire la taille du
    moteur
    Intégration
    Faciliter l'intégration de
    Flutter dans une
    application existante
    

    View Slide

20. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    De retour en avril dernier…
    16
    Intégration WebView
    Maps
    Routing
    Taille
    Faciliter l'intégration de
    Flutter dans une
    application existante
    Enrichir/améliorer les
    APIs pour la navigation
    Intégrer des WebView
    dans l'arbre des widgets
    Intégrer une carte
    comme widget
    Réduire la taille du
    moteur
    WebView
    Intégrer des WebView
    dans l'arbre des widgets
    Maps
    Intégrer une carte
    comme widget
    Intégration
    Faciliter l'intégration de
    Flutter dans une
    application existante
    

    View Slide

21. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    De retour en avril dernier…
    16
    Intégration WebView
    Maps
    Routing
    Taille
    Faciliter l'intégration de
    Flutter dans une
    application existante
    Enrichir/améliorer les
    APIs pour la navigation
    Intégrer des WebView
    dans l'arbre des widgets
    Intégrer une carte
    comme widget
    Réduire la taille du
    moteur
    WebView
    Intégrer des WebView
    dans l'arbre des widgets
    Taille
    Réduire la taille du
    moteur
    Maps
    Intégrer une carte
    comme widget
    Intégration
    Faciliter l'intégration de
    Flutter dans une
    application existante
    

    View Slide

22. 17
    Taille des applications
    

    View Slide

23. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Poids en nette baisse pour les applications Flutter
    18
    Android (Java) Android (Kotlin)
    ReactNative Flutter
    2018
    AVRIL
    

    View Slide

24. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Poids en nette baisse pour les applications Flutter
    18
    Android (Java) Android (Kotlin)
    ReactNative Flutter
    539 ko 550 ko
    7,5 Mo
    7 Mo
    2018
    AVRIL
    

    View Slide

25. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Poids en nette baisse pour les applications Flutter
    19
    Android (Java) Android (Kotlin)
    ReactNative Flutter
    2018
    SEPT
    539 ko 550 ko
    7 Mo
    

    View Slide

26. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Poids en nette baisse pour les applications Flutter
    19
    Android (Java) Android (Kotlin)
    ReactNative Flutter
    5,3 Mo
    2018
    SEPT
    539 ko 550 ko
    7 Mo
    

    View Slide

27. 20
    PlatformView
    

    View Slide

28. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Le concept des PlatformView
    21
    Nouvelle syntaxe et
    harmonisation entre
    les "plateformes"
    Evolution des mixins
    Peu de changements
    notables
    Version "mineure"
    

    View Slide

29. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment intégrer une
    PlatformView
    côté Flutter ?
    22
    @override
    Widget build(BuildContext context) {
    if (defaultTargetPlatform == TargetPlatform.android) {
    return AndroidView(
    viewType: 'MapView',
    onPlatformViewCreated: _onPlatformViewCreated);
    }
    return Text('Unavailable');
    }
    void _onPlatformViewCreated(int id) {}
    DART
    

    View Slide

30. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment intégrer une
    PlatformView
    côté Flutter ?
    22
    DART
    @override
    Widget build(BuildContext context) {
    if (defaultTargetPlatform == TargetPlatform.android) {
    return AndroidView(
    viewType: 'MapView',
    onPlatformViewCreated: _onPlatformViewCreated);
    }
    return Text('Unavailable');
    }
    void _onPlatformViewCreated(int id) {}
    

    View Slide

31. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment intégrer une
    PlatformView
    côté Flutter ?
    22
    DART
    @override
    Widget build(BuildContext context) {
    if (defaultTargetPlatform == TargetPlatform.android) {
    return AndroidView(
    viewType: 'MapView',
    onPlatformViewCreated: _onPlatformViewCreated);
    }
    return Text('Unavailable');
    }
    void _onPlatformViewCreated(int id) {}
    

    View Slide

32. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment intégrer une
    PlatformView
    côté Android ? (1/3)
    23
    public class TextViewPlugin {
    public static void registerWith(Registrar registrar) {
    registrar
    .platformViewRegistry()
    .registerViewFactory("MapView",
    new MapViewFactory(registrar.messenger())
    );
    }
    }
    JAVA
    

    View Slide

33. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment intégrer une
    PlatformView
    côté Android ? (1/3)
    23
    JAVA
    public class TextViewPlugin {
    public static void registerWith(Registrar registrar) {
    registrar
    .platformViewRegistry()
    .registerViewFactory("MapView",
    new MapViewFactory(registrar.messenger())
    );
    }
    }
    

    View Slide

34. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment intégrer une
    PlatformView
    côté Android ? (1/3)
    23
    JAVA
    public class TextViewPlugin {
    public static void registerWith(Registrar registrar) {
    registrar
    .platformViewRegistry()
    .registerViewFactory("MapView",
    new MapViewFactory(registrar.messenger())
    );
    }
    }
    

    View Slide

35. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment intégrer une
    PlatformView
    côté Android ? (2/3)
    24
    public class MapViewFactory extends PlatformViewFactory {
    private final BinaryMessenger messenger;
    public MapViewFactory(BinaryMessenger messenger) {
    super(StandardMessageCodec.INSTANCE);
    this.messenger = messenger;
    }
    @Override
    public PlatformView create(Context context, int id, Object o) {
    return new FlutterMapView(context, messenger, id);
    }
    }
    JAVA
    

    View Slide

36. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment intégrer une
    PlatformView
    côté Android ? (2/3)
    24
    JAVA
    public class MapViewFactory extends PlatformViewFactory {
    private final BinaryMessenger messenger;
    public MapViewFactory(BinaryMessenger messenger) {
    super(StandardMessageCodec.INSTANCE);
    this.messenger = messenger;
    }
    @Override
    public PlatformView create(Context context, int id, Object o) {
    return new FlutterMapView(context, messenger, id);
    }
    }
    

    View Slide

37. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment intégrer une
    PlatformView
    côté Android ? (2/3)
    24
    JAVA
    public class MapViewFactory extends PlatformViewFactory {
    private final BinaryMessenger messenger;
    public MapViewFactory(BinaryMessenger messenger) {
    super(StandardMessageCodec.INSTANCE);
    this.messenger = messenger;
    }
    @Override
    public PlatformView create(Context context, int id, Object o) {
    return new FlutterMapView(context, messenger, id);
    }
    }
    

    View Slide

38. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment intégrer une
    PlatformView
    côté Android ? (3/3)
    25
    public class FlutterMapView implements PlatformView {
    private final MapView mapView;
    FlutterMapView(Context context, BinaryMessenger messenger, int id) {
    this.mapView = new MapView(context);
    }
    @Override
    public View getView() {
    return mapView;
    }
    @Override public void dispose() {}
    }
    JAVA
    

    View Slide

39. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment intégrer une
    PlatformView
    côté Android ? (3/3)
    25
    JAVA
    public class FlutterMapView implements PlatformView {
    private final MapView mapView;
    FlutterMapView(Context context, BinaryMessenger messenger, int id) {
    this.mapView = new MapView(context);
    }
    @Override
    public View getView() {
    return mapView;
    }
    @Override public void dispose() {}
    }
    

    View Slide

40. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment intégrer une
    PlatformView
    côté Android ? (3/3)
    25
    JAVA
    public class FlutterMapView implements PlatformView {
    private final MapView mapView;
    FlutterMapView(Context context, BinaryMessenger messenger, int id) {
    this.mapView = new MapView(context);
    }
    @Override
    public View getView() {
    return mapView;
    }
    @Override public void dispose() {}
    }
    

    View Slide

41. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment intégrer une
    PlatformView
    côté Android ? (3/3)
    25
    JAVA
    public class FlutterMapView implements PlatformView {
    private final MapView mapView;
    FlutterMapView(Context context, BinaryMessenger messenger, int id) {
    this.mapView = new MapView(context);
    }
    @Override
    public View getView() {
    return mapView;
    }
    @Override public void dispose() {}
    }
    

    View Slide

42. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Et voici le résultat !
    26
    

    View Slide

43. 27
    Comment faire
    communiquer
    Flutter & Android ?
    

    View Slide

44. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment faire communiquer une
    PlatformView
    entre Android et Flutter ? (1/6)
    28
    public class TextViewPlugin {
    public static void registerWith(Registrar registrar) {
    registrar
    .platformViewRegistry()
    .registerViewFactory("MapView",
    new MapViewFactory(registrar.messenger())
    );
    }
    }
    JAVA
    

    View Slide

45. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment faire communiquer une
    PlatformView
    entre Android et Flutter ? (2/6)
    29
    public class MapViewFactory extends PlatformViewFactory {
    private final BinaryMessenger messenger;
    public MapViewFactory(BinaryMessenger messenger) {
    super(StandardMessageCodec.INSTANCE);
    this.messenger = messenger;
    }
    @Override
    public PlatformView create(Context context, int id, Object o) {
    return new FlutterMapView(context, messenger, id);
    }
    }
    JAVA
    

    View Slide

46. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment faire communiquer une
    PlatformView
    entre Android et Flutter ? (2/6)
    29
    JAVA
    public class MapViewFactory extends PlatformViewFactory {
    private final BinaryMessenger messenger;
    public MapViewFactory(BinaryMessenger messenger) {
    super(StandardMessageCodec.INSTANCE);
    this.messenger = messenger;
    }
    @Override
    public PlatformView create(Context context, int id, Object o) {
    return new FlutterMapView(context, messenger, id);
    }
    }
    

    View Slide

47. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment faire communiquer une
    PlatformView
    entre Android et Flutter ? (2/6)
    29
    JAVA
    public class MapViewFactory extends PlatformViewFactory {
    private final BinaryMessenger messenger;
    public MapViewFactory(BinaryMessenger messenger) {
    super(StandardMessageCodec.INSTANCE);
    this.messenger = messenger;
    }
    @Override
    public PlatformView create(Context context, int id, Object o) {
    return new FlutterMapView(context, messenger, id);
    }
    }
    

    View Slide

48. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment faire communiquer une PlatformView entre Android et Flutter ? (3/6)
    30
    public class FlutterMapView implements PlatformView {
    private final MethodChannel methodChannel;
    FlutterMapView(Context context,
    BinaryMessenger messenger, 

    int id) {
    this.mapView = new MapView(context);
    this.methodChannel = new MethodChannel(
    messenger,
    "fr.g123k/mapview_" + id);
    this.methodChannel.setMethodCallHandler(this);
    }
    JAVA
    

    View Slide

49. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment faire communiquer une PlatformView entre Android et Flutter ? (3/6)
    30
    JAVA
    public class FlutterMapView implements PlatformView {
    private final MethodChannel methodChannel;
    FlutterMapView(Context context,
    BinaryMessenger messenger, 

    int id) {
    this.mapView = new MapView(context);
    this.methodChannel = new MethodChannel(
    messenger,
    "fr.g123k/mapview_" + id);
    this.methodChannel.setMethodCallHandler(this);
    }
    

    View Slide

50. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment faire communiquer une PlatformView entre Android et Flutter ? (3/6)
    30
    JAVA
    public class FlutterMapView implements PlatformView {
    private final MethodChannel methodChannel;
    FlutterMapView(Context context,
    BinaryMessenger messenger, 

    int id) {
    this.mapView = new MapView(context);
    this.methodChannel = new MethodChannel(
    messenger,
    "fr.g123k/mapview_" + id);
    this.methodChannel.setMethodCallHandler(this);
    }
    

    View Slide

51. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment faire communiquer une PlatformView entre Android et Flutter ? (3/6)
    30
    JAVA
    public class FlutterMapView implements PlatformView {
    private final MethodChannel methodChannel;
    FlutterMapView(Context context,
    BinaryMessenger messenger, 

    int id) {
    this.mapView = new MapView(context);
    this.methodChannel = new MethodChannel(
    messenger,
    "fr.g123k/mapview_" + id);
    this.methodChannel.setMethodCallHandler(this);
    }
    

    View Slide

52. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment faire communiquer une PlatformView entre Android et Flutter ? (4/6)
    31
    public class FlutterMapView implements PlatformView,
    MethodCallHandler {
    @Override
    public void onMethodCall(MethodCall methodCall,
    MethodChannel.Result result) {
    switch (methodCall.method) {
    case "addMarker":
    addMarker(methodCall, result);
    break;
    default:
    result.notImplemented();
    }
    }
    JAVA
    

    View Slide

53. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment faire communiquer une PlatformView entre Android et Flutter ? (4/6)
    31
    JAVA
    public class FlutterMapView implements PlatformView,
    MethodCallHandler {
    @Override
    public void onMethodCall(MethodCall methodCall,
    MethodChannel.Result result) {
    switch (methodCall.method) {
    case "addMarker":
    addMarker(methodCall, result);
    break;
    default:
    result.notImplemented();
    }
    }
    

    View Slide

54. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment faire communiquer une PlatformView entre Android et Flutter ? (4/6)
    31
    JAVA
    public class FlutterMapView implements PlatformView,
    MethodCallHandler {
    @Override
    public void onMethodCall(MethodCall methodCall,
    MethodChannel.Result result) {
    switch (methodCall.method) {
    case "addMarker":
    addMarker(methodCall, result);
    break;
    default:
    result.notImplemented();
    }
    }
    

    View Slide

55. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment faire communiquer une PlatformView entre Android et Flutter ? (4/6)
    32
    @override
    Widget build(BuildContext context) {
    if (defaultTargetPlatform == TargetPlatform.android) {
    return AndroidView(
    viewType: 'MapView',
    onPlatformViewCreated: _onPlatformViewCreated);
    }
    return Text('Unavailable');
    }
    void _onPlatformViewCreated(int id) {}
    DART
    

    View Slide

56. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment faire communiquer une PlatformView entre Android et Flutter ? (5/6)
    33
    class MapViewController {
    final MethodChannel _channel;
    MapViewController(int id) :
    _channel = new MethodChannel('fr.g123k/mapview_$id');
    Future addMarker({double lat, double lng}) async {
    assert(lat != null); assert(lng != null);
    return _channel.invokeMethod('addMarker',
    {'latitude':lat, 'longitude': lng}
    );
    }
    }
    DART
    

    View Slide

57. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment faire communiquer une PlatformView entre Android et Flutter ? (5/6)
    33
    DART
    class MapViewController {
    final MethodChannel _channel;
    MapViewController(int id) :
    _channel = new MethodChannel('fr.g123k/mapview_$id');
    Future addMarker({double lat, double lng}) async {
    assert(lat != null); assert(lng != null);
    return _channel.invokeMethod('addMarker',
    {'latitude':lat, 'longitude': lng}
    );
    }
    }
    

    View Slide

58. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment faire communiquer une PlatformView entre Android et Flutter ? (5/6)
    33
    DART
    class MapViewController {
    final MethodChannel _channel;
    MapViewController(int id) :
    _channel = new MethodChannel('fr.g123k/mapview_$id');
    Future addMarker({double lat, double lng}) async {
    assert(lat != null); assert(lng != null);
    return _channel.invokeMethod('addMarker',
    {'latitude':lat, 'longitude': lng}
    );
    }
    }
    

    View Slide

59. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment faire communiquer une PlatformView entre Android et Flutter ? (5/6)
    33
    DART
    class MapViewController {
    final MethodChannel _channel;
    MapViewController(int id) :
    _channel = new MethodChannel('fr.g123k/mapview_$id');
    Future addMarker({double lat, double lng}) async {
    assert(lat != null); assert(lng != null);
    return _channel.invokeMethod('addMarker',
    {'latitude': lat, 'longitude': lng}
    );
    }
    }
    

    View Slide

60. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Comment faire communiquer une PlatformView entre Android et Flutter ? (6/6)
    34
    @override
    Widget build(BuildContext context) { … }
    void _onPlatformViewCreated(int id) {
    MapViewController(id).addMarker(
    lat: 48.866667,
    lng: 2.333333
    );
    }
    DART
    

    View Slide

61. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Et voici le résultat !
    35
    

    View Slide

62. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Les défauts de cette solution
    36
    Performances
    

    View Slide

63. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Les défauts de cette solution
    36
    Performances
    API Level 20+ 

    (> 87%)
    

    View Slide

64. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Les défauts de cette solution
    36
    Performances
    API Level 20+ 

    (> 87%)
    Widgets dépendants
    de la plateforme
    

    View Slide

65. 37
    Intégration dans un
    projet existant
    

    View Slide

66. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Rappel sur le mode de fonctionnement de Flutter
    38
    FlutterView
    Dans une Activité
    Android
    FlutterViewController
    Dans un AppDelegate
    iOS
    Dart
    runApp()
    Flutter
    

    View Slide

67. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Arborescence d'un projet Flutter
    39
    Projet Flutter
    android
    ios
    lib
    

    View Slide

68. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Arborescence d'un projet Flutter
    39
    Projet Flutter
    android
    ios
    lib
    

    View Slide

69. 40
    Comment faire
    si l'on possède déjà
    une application
    Android / iOS ?
    

    View Slide

70. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Deux choix côté Android
    41
    Intégrer une vue native dans
    l'arbre des Widgets Flutter
    Vue native
    Permet d'intégrer une
    MapView ou une WebView et
    ainsi de corriger une
    limitation de Flutter
    Réponse aux
    problématiques
    Seule l'implémentation côté
    Android est disponible, par
    l'intermédiaire du widget
    AndroidView
    Aujourd'hui
    

    View Slide

71. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Module Flutter
    42
    Créer une application
    Flutter classique
    flutter create myapp
    Créer un module
    Flutter
    flutter create -t module myapp
    https://github.com/flutter/flutter/wiki/
    Add-Flutter-to-existing-apps
    

    View Slide

72. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Créer une vue Flutter sur Android
    43
    // Initialisation en amont (recommandé)
    Flutter.startInitialization(context);
    // Vue
    View view = Flutter.createView(
    context,
    getLifecycle(),
    "route1"
    );
    layout.addView(view);
    // Fragment
    Flutter.createFragment("route1");
    JAVA
    

    View Slide

73. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Sur iOS, forcément sur un nouvel écran
    44
    // Au clic sur un bouton
    - (void)handleButtonAction {
    FlutterViewController* flutterViewController =
    [[FlutterViewController alloc] init];
    [self presentViewController:flutterViewController
    animated:false completion:nil];
    }
    // Indiquer de lancer une route
    [viewController setInitialRoute:@"route1"];
    OBJ-C
    

    View Slide

74. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Lancer un écran particulier en Flutter
    45
    void main() => runApp(_widgetForRoute(window.defaultRouteName));
    Widget _widgetForRoute(String route) {
    switch (route) {
    case 'route1': return SomeWidget(...);
    case 'route2': return SomeOtherWidget(...);
    default: return Center(child:
    Text('Unknown route: $route');
    }
    }
    DART
    

    View Slide

75. Les nouveautés
    de la "communauté"
    46
    Flutter pour 

    Mac & Windows
    Site regroupant les
    applications Flutter
    Nouveaux outils
    

    View Slide

76. Applications Flutter
    47
    

    View Slide

77. Un site regroupant les
    applications Flutter
    itsallwidgets.com
    48
    @itsallwidgets
    

    View Slide

78. Autres plateformes
    49
    

    View Slide

79. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Vos applications Flutter sur PC
    50
    

    View Slide

80. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Vos applications Flutter sur PC
    50
    

    View Slide

81. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Vos applications Flutter sur PC
    50
    

    View Slide

82. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Google fournit déjà en opensource une compatibilité Windows / MacOS / Linux
    51
    google/
    flutter-desktop-
    embedding
    

    View Slide

83. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Et une autre faite en Go
    52
    Drakirus/
    go-flutter-

    desktop-embedder
    

    View Slide

84. Dépendances
    53
    

    View Slide

85. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    De nouveaux packages
    54
    https://pub.dartlang.org/flutter
    

    View Slide

86. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    De nouveaux packages
    54
    https://pub.dartlang.org/flutter
    Push
    OneSignal
    Injection de dépendances
    Kiwi
    WebRTC
    

    View Slide

87. CI / CD
    55
    

    View Slide

88. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Support officiel de Flutter avec Nevercode
    56
    Build des applications
    Android et iOS
    Signature des
    applications
    Exécution des
    tests
    Publication des
    applications
    

    View Slide

89. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    … tout comme Bitrise
    57
    

    View Slide

90. IDE
    58
    

    View Slide

91. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    IntelliJ 2018.2 est désormais compatible avec la Touch Bar
    59
    

    View Slide

92. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Rainbow Brackets : un plugin utile pour IntelliJ Idea, Visual Studio Code…
    60
    

    View Slide

93. Figma -> Flutter
    61
    

    View Slide

94. View Slide

95. Flutter Paris - Septembre 2018 Les nouveautés Flutter depuis le dernier meetup
    Communauté
    Flutter
    Dart
    Export de Sigma vers Flutter
    63
    http://
    aloisdeniel.github.com/
    figma-to-flutter
    

    View Slide

96. Merci !
    Des questions ?
    @g123k
    64
    @FlutterFrance
    

    View Slide