Developpement d'applications mobiles android ios avec Flutter et Mary Xia
Encore un framework de développement d'applications mobiles pour créer des applications sur les smartphones, pardon, sur les téléphones portables: je vais pouvoir le tester et l'ajouter à la liste :-) Avant de commencer, on cherche des développeurs Java sur Paris ou en télétravail pour du développement Android aussi...
Mary Xia travaille dans l'équipe Flutter, notamment sur la partie UI et les modules.
Mary Xia avait donné une conférence à la Google I/O sur la manière de créer de belles applications Flutter avec Material Theming. Elle est également l'une des intervenantes dans le cours Flutter sur Udacity
Edouard nous explique que Flutter est un SDK open-source pour créer des application iOS et Android performantes et adaptées à l’OS. ‘Un peu comme React Native ou Xamarin ?’ vous pourriez vous demander ? Oui, un peu… mais avec une intégration avec les widgets natifs et des niveaux de performance qui vont au delà de ce que Xamarin ou React Native peuvent proposer, le tout avec très peu de lignes de code.
Merci au sponsors/mécènes Flutter Paris, Paris Android User Group et Google France, Philippe Antoine (relation avec les developpeurs France et Belgique) et Jean François Geyelin. Si vous souhaitez aussi un transcript comme celui-ci, voir là: Piges SEO Consultingit
Une question? Posez-la ici
Aide au développement d'applications
Flutter des applications en production sur le Google Play et l'app store
Nouvelle version de Flutter: release preview 1, on se rapproche de la version finale.
Exemple, téléchargerz l'application "Beer me" sur IOS ou Android.
Si besoin de support, d'aide sur flutter, se rapprocher du programme Google developer Experts, avec Kevin Segaud et Horacio Gonzales.
Les questions-réponses sont posables au micro, ou sur https://bit.ly/slido-flutter
Jean-François Geyelin nous parle de Flutter. C'est un SDK, la solution de Google au multiplateforme. Quand on veut développer une application sur les mobiles IOS ou Android, que fait-on? On écrit une application par plate-forme... Autre approche, on utilise des technologies basées sur le web comme Cordova, Ionic, mais techniquement il faut tuner la webview.
Autre solution, les frameworks React Native et Xamarin: les interfaces seront affichées par des widgets natifs.
La solution adoptée par les jeux vidéos: ils dessinent l'interface eux-même. L'avantage est que cette interface fonctionne partout. https://www/reddit.com/r/itrunsdoom
C'est l'approche de Flutter: on a des widgets indépendants, pas de pont inter-languages, rendu structurel. Les technologies sous jacentes, sont liées à Chrome, SKIA + DART. Dart c'est un peu comme Java, ou Kotlin
La fonctionnalité de "hot reload" permet de raffraichir rapidement l'affichage, un peu comme QT, un genre de "recompilation" rapide.
Une question? Posez-la ici
Aide au développement d'applications
Demo d'une nouvelle fonctionnalités flutter avec Eric
Revue de code:
Un code nous montre une image avec une palette: on peut extraire les couleurs dominantes de l'image et les classer par ordre d'apparence. C'est l'effet de material design. Quand on développe une applicationa avec Flutter, sous Android Studio, on a le main de l'application, les classes. On crée une classe qui extends le statefulWidget . On a une fonction qui intéragit avec la classe PaletteGenerator qui est en async, bravo Dart, et qui permet de rafraichir la palette quand on selectionne un rectangle dans l'image. Et ensuite on effectue un SetState pour recharger la palette correspondante et renvoyer le classement des couleurs.
Eric ajoute la ligne:
backgroundColor= paletteGenerator.darkVibrantColor.color;
Et quand on clique sur l'image, le fond prend la couleur du pixel, magique...
Maintenant, ajoutons un
Container{
width: widget.imageSize.width...
height:widget.imageSize.height...
decoration:...
gradient:...
}
On voit bien que tout est "widget".
Une question? Posez-la ici
Aide au développement d'applications
Mary Xia fait une demo Flutter en material design
Le material design est une interface que l'on rencontre quand on navigue sur une application Android. On a un fond qui apparait derriere l'application, on appelle ça le backdrop. On a un layer devant et un layer derriere.
On peut développer avec Android Studio par exemple.
Pour la demo, on a une carte avec une barre d'état et 2 champs textfields.
Flutter est composé de widgets, tout est widget. Un icone? C'est un widget; Un bouton? C'est un Widget. On va pouvoir intégrer une fonction theme de notre ThemeData.
On rajoute un inputDecorationTheme: InputDecorationTheme (border: OutlineInputBorder(borderRadius: BorderRadius.circular(4.0),),
Et on a maintenant nos texfields qui sont entourés d'un contours bleu qui les rend plus visibles, c'est bluffant, j'adore.
Material Design, l'interface, est personnalisée avec des couleurs en texte, comme red par exemple, ou white.
Flutter est livré avec plein de widgets sympas, des boutons, des inputboxs, de l'autocompletion, tout pour rendre une interface très agréable.
Quand on ajoute un Widget _buildArrowToggle() {... } entre 2 widgets, on peut swapper facilement entre 2 inputboxes sI on rajoute un onPressed{}
On ajoute un icon: AnimatedIcon et quand on clique, le menu descent et remonde, c'est magique.
Un widget peut être retourné depuis une fonction.
Comment ajouter un widget DatePicker, enfin, un "controle" qui nous permet de choisir une date:
Widget _buildDatePicker(){
return Padding(
child: _DateTimePicker(
...
selectedDate: _date,
selectedTate: _time,
);}
Et voilà, on a à l'écran de l'Android, le controle qui apparait et qui nous permet de choisir le jour et l'heure.
Une petite checkbox?
_BuildChecbox()
Un petit bouton?
_BuildButton()
Trop facile!
On peut traduire les widgets en plusieurs langues de manière native en utilisant locale:Locale('Fr','FR')
Pour avoir plein d'autres infos, de tutoriaux, se connecter ici: https://codelabs.developers.google.com et chercher Flutter...
Ce transcript reflète exclusivement l'opinion de ses auteurs et n’engage en aucune façon Consultingit
Besoin d'une appli mobile?