Flutter : communication Android/iOS et les packages

Flutter Paris
Aller un peu plus loin…

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

3
Flutter Paris
Aller plus loin en Flutter
Android / iOS Et maintenant ?
— Comment faire communiquer son
code Flutter avec Android et / ou
iOS ?
— Roadmap Flutter
— Ressources utiles
Les packages / plugins
— A quoi servent-ils ?
— Où les trouver ?
— Comment les utiliser dans ses
applications ?

Communiquer avec
Android et iOS

Flutter Paris sli.do/zr8eef4g
Communication Android / iOS Packages / plugins Et maintenant ?
Flutter et Android / iOS
5
FlutterView
Dans une Activité
Android
FlutterViewController
Dans un AppDelegate
iOS

Flutter et Android / iOS
5
FlutterView
Dans une Activité
Android
FlutterViewController
Dans un AppDelegate
iOS
Dart
runApp()
Flutter

MethodChannel : Communication avec résultat
6

6
Résultat, erreur ou non implémenté

6
Résultat, erreur ou non implémenté
Dart Android iOS
null null nil / NSNull
bool Boolean NSNumber numberWithBool
int Integer NSNumber numberWithInt
Int (> 32 bits) Long NSNumber numberWithLong
Int (> 64 bits) BigInteger FlutterStandardBigInteger
double Double NSNumber numberWithDouble
String String NSString
Uint8List byte[] FlutterStandardTypedData typedDataWithBytes:
Int32List int[] FlutterStandardTypedData typedDataWithInt32:
Int64List long[] FlutterStandardTypedData typedDataWithInt64:
Float64List double[] FlutterStandardTypedData typedDataWithFloat64:
List ArrayList NSArray
Map HashMap NSDictionary

Les MethodChannel côté Flutter
7
Dart
On crée un MethodChannel, sur
lequel on va appeler une méthode
dont le résultat est asynchrone.
static const MethodChannel channel = const
MethodChannel('flutter.paris/test');
Future<String> getBatteryLevel() {
try {
int level = await
channel.invokeMethod('getBatteryLevel');
return 'Battery level $level';
} on PlatformException {
return "Unknown battery level";
}
}

Les MethodChannel côté Flutter
7
Dart
On crée un MethodChannel, sur
lequel on va appeler une méthode
dont le résultat est asynchrone.
static const MethodChannel channel = const
MethodChannel('flutter.paris/test');
try {
int level = await
}
}
try {
int level = await
}
}

Les MethodChannel sur Android
8
Android
On modifie le code de la MainActivity public class MainActivity extends FlutterActivity {
public void onCreate(Bundle bundle) {
super.onCreate(bundle);
GeneratedPluginRegistrant.registerWith(this);
// TODO
}
}

9
new MethodChannel(getFlutterView(), "flutter.paris/test")
.setMethodCallHandler(new MethodCallHandler() {
public void onMethodCall(MethodCall call, Result result) {
if (call.method.equals("getBatteryLevel")) {
int batteryLevel = getBatteryLevel();
if (batteryLevel != -1) {
result.success(batteryLevel);
} else {
result.error("UNAVAILABLE", "Battery level not available.", null);
}
} else {
result.notImplemented();
}}}
);}}

9
} else {
}
} else {
}}}
);}}
} else {
}
} else {
}}}

9
} else {
}
} else {
}}}
);}}
} else {
}
} else {
}}}
} else {
}

Les MethodChannel sur iOS
10
iOS
On modifie le code de l'AppDelegate
- (BOOL)application:(UIApplication*)application
didFinishLaunchingWithOptions:(NSDictionary*)launchOptions {
[GeneratedPluginRegistrant registerWithRegistry:self];
FlutterViewController* controller =
(FlutterViewController*)self.window.rootViewController;
FlutterMethodChannel* batteryChannel = [FlutterMethodChannel
methodChannelWithName:@"flutter.paris/test"
binaryMessenger:controller];
// TODO
return [super application:application
didFinishLaunchingWithOptions:launchOptions];
}

10
iOS
- (BOOL)application:(UIApplication*)application
// TODO
return [super application:application
didFinishLaunchingWithOptions:launchOptions];
}
// TODO

11
[batteryChannel setMethodCallHandler:^(FlutterMethodCall* call, FlutterResult result) {
if ([@"getBatteryLevel" isEqualToString:call.method]) {
int batteryLevel = [self getBatteryLevel];
if (batteryLevel == -1) {
result([FlutterError errorWithCode:@"UNAVAILABLE"
message:@"Battery info unavailable"  
details:nil]);
} else {
result(@(batteryLevel));
}
} else {
result(FlutterMethodNotImplemented);
}
}];

11
details:nil]);
} else {
}
} else {
}
}];
details:nil]);
} else {
}
} else {
}

11
details:nil]);
} else {
}
} else {
}
}];
details:nil]);
} else {
}
} else {
}
details:nil]);
} else {
}

EventChannel : Communication avec un seul résultat
12

EventChannel : Communication avec un seul résultat
12
Résultat(s) et/ou
erreur(s)

Les EventChannel côté Flutter
13
Dart
On crée un EventChannel, sur lequel
on va appeler une méthode dont le
résultat est un Stream.
static const EventChannel eventChannel = const
EventChannel('flutter.paris/testEvent');
eventChannel.receiveBroadcastStream()
.listen((obj) {
// Nouvelle position reçue
}, (err) {
// Nouvelle erreur reçue
}
);

Les EventChannel côté Flutter
13
Dart
On crée un EventChannel, sur lequel
on va appeler une méthode dont le
résultat est un Stream.
static const EventChannel eventChannel = const
EventChannel('flutter.paris/testEvent');
.listen((obj) {
// Nouvelle position reçue
}, (err) {
}
);
.listen((obj) {
// Nouvelle valeur reçue
}, onError: (err) {
}
);

Les EventChannel sur Android
14
Android
On modifie le code de la MainActivity
On met en attribut l'EventSink
public class MainActivity extends FlutterActivity {
}

14
Android
On modifie le code de la MainActivity
On met en attribut l'EventSink
public class MainActivity extends FlutterActivity
implements StreamHandler {
private EventSink sink;
new EventChannel(getFlutterView(),
"flutter.paris/testEvent") 
.setStreamHandler(this));
}
}

15
@Override
public void onListen(Object arguments, EventSink events) {
events.success("Hello");
events.success("World");
}
@Override
public void onCancel(Object arguments) {
this.
}
@Override
this.sink = events;
}
@Override
this.sink = null;
}
}

15
@Override
}
@Override
this.
}
@Override
this.sink = events;
}
@Override
this.sink = null;
}
}
this.sink = events;

15
@Override
}
@Override
this.
}
@Override
this.sink = events;
}
@Override
this.sink = null;
}
}
this.sink = events;
this.sink = null;

Les EventChannel sur iOS
16
iOS
On garde la variable de type
FlutterEventSink pour l'appeler à
n'importe quel moment
@implementation AppDelegate { FlutterEventSink _eventSink; }
-(BOOL)application:(UIApplication*)application
FlutterEventChannel* eventChannel = [FlutterEventChannel
eventChannelWithName:@"flutter.paris/testEvent"
binaryMessenger:controller];  
[eventChannel setStreamHandler:self];
}

16
iOS
}

17
- (FlutterError*)onListenWithArguments:(id)arguments
eventSink:(FlutterEventSink)eventSink {
_eventSink = eventSink;
_eventSink(@"Hello");
_eventSink(@"World");
return nil;
}
- (FlutterError*)onCancelWithArguments:(id)arguments {
_eventSink = nil;
return nil;
}
@end

17
return nil;
}
_eventSink = nil;
return nil;
}
@end

17
return nil;
}
_eventSink = nil;
return nil;
}
@end
_eventSink = nil;

A quoi servent-ils ?
19

A quoi servent-ils ?
19
Nouveaux widgets
Nouveaux composants
graphiques
Outils tiers
Firebase, MixPanel…
Nouveau composants
Redux, RXDart…
Compléter des fonctions
Ex: demander la
géolocalisation du téléphone

Quelle différence entre package et plugin ?
20
Package
Ne contient que
du code Dart
(dossier lib)

Quelle différence entre package et plugin ?
21
Android
Code Java/Kotlin
(dossier android)
iOS
Code Obj C/Swift
(dossier ios)
Plugin
Code Dart
(dossier lib)

Où les trouver ?
22
https://pub.dartlang.org/flutter

Choisir son plugin
23

Pub : le gestionnaire des dépendances
24
Le gestionnaire des
dépendances du
langage Dart
pub
Fichier dans lequel
on indique les
dépendances du projet
pubspec.yaml
Fichier généré qui précise
quelles versions
des dépendances
sont utilisées
pubspec.lock

Comment les utiliser dans vos applications ?
25
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.
On indique également les
dépendances qui seront utilisées.
name: helloworld
description: A new Flutter project.
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.0
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true

Ajouter une dépendance
26
Ajouter la dépendance
au projet
dependencies
firebase_auth: '^0.5.3'

Pubspec.yaml : indiquer le numéro de version
27
any
La dernière version disponible
1.2.3
Exactement la version 1.2.3
>=1.2.3
Au moins la 1.2.3
>1.2.3
Une version supérieure
à la 1.2.3
<=1.2.3
Au maximum la 1.2.3
<1.2.3
Une version antérieure
à la 1.2.3

Pubspec.yaml : indiquer une plage de versions
28
Utiliser la version la plus
récente entre la 0.5 et 0.9**
dependencies
firebase_auth: '>=0.5.3 <0.6.0'

Pubspec.yaml : indiquer une plage de versions
28
Utiliser la version la plus
récente entre la 0.5 et 0.9**
dependencies
firebase_auth: '>=0.5.3 <0.6.0'
La caret syntax
permet d'exprimer une
plage de versions
dependencies
firebase_auth: '^0.5.3'

Dépendances : la source
29

29
Repo officiel
pub.dartlang.org

29
Repo privé
Hébergé par vos soins
Repo officiel
pub.dartlang.org

29
Repo privé
Git
Pointer sur une branche,  
un tag ou un commit
Repo officiel
pub.dartlang.org

29
Repo privé
Git
Pointer sur une branche,  
un tag ou un commit
Repo officiel
pub.dartlang.org
Dossier local

Flutter packages… : les commandes utiles
30
Récupère les dépendances
pour les nouveaux packages
flutter packages get
Mettre à jour
les dépendances
flutter packages upgrade

Une sélection des packages utiles
31
Authentification
Database & Cloud Firestore
Storage
Analytics
Messaging
AdMob
Firebase
Base de données SQLite (SQFLite)
Préférences (~ NSUserDefaults)
Données
Flux
Redux
RXDart
Flutter Stream Friends
Autres
Google
Facebook
Twitter
Comptes

32
Graphiques (animés)
Charts Flutter

33
Grille avec des éléments de
tailles différentes
Staggered  
Grid View
De la parallaxe avec
n'importe quel widget
Flutter
Parallax

34
Moteur de jeu 2D
Sprite Widget

Roadmap (sur GitHub)
36

Roadmap (lors de l'annonce de la bêta)
37
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

Roadmap (sondage)
38

Quelques ressources
39
Flutter.rocks
https://flutter.rocks/
Sergi & Replace
https://sergiandreplace.com
Flutter institute
https://flutter.institute/
Codelabs
codelabs.google.com / flutter.io
Flutter Weekly
https://flutterweekly.net/

Extension Chrome
40

Merci :)
Questions ?
41
@g123k @FlutterDev

Flutter : communication Android/iOS et les packages

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (18)

Similaire à Flutter : communication Android/iOS et les packages

Similaire à Flutter : communication Android/iOS et les packages (20)

Flutter : communication Android/iOS et les packages