Architecture d’une appli avec Flutter

Lifting State Up

Une application en «layer» avec des « building blocks ».

  • StatefulWidget
    • Inclue les informations dans le constructeur, c’est à dire les données qui doivent lui être passées pour fonctionner
  • State
    • définition des paramètres liés au widget (qui doivent être rendu dedans)
    • les méthodes pour mettre à jour le widget (avec «setState()»)
    • construire l’interface

C’est le concept de « Lifting State Up » qui vient de React :

https://medium.com/@nimelrian/thinking-in-react-a-paradox-statement-33c19e2eb9e2

Cette architecture est parfaite pour gérer un ou deux niveaux sur un écran, mais ça devient vite très compliqué de faire passer les paramètres au travers de plusieurs niveaux, et ça ne permet pas de bien découper le code, ni d’être flexible ni d’être testable.

InheritedWidget

https://cdn-images-1.medium.com/max/1200/1*GEvdBRvehbG6PvqLbVmwZw.png
https://medium.com/flutterpub/breakdown-flutter-i-o-2018-part-two-d47f1236f585

Ce type de widget permet de recevoir un état (des fonctions et des variables) et d’y accéder directement depuis tous les enfants, peut importe leurs niveau.

Bibliographie


Flutter et les API

Quelques liens, exemples et remarques pour cerner rapidement comment on peut utiliser une API externe pour injecter des données dans son application.

Pour la doc de base c’est dans le cookbook « Fetch data from the internet » de Flutter et dans la doc du package http de Dart.

Un super exemple d’application avec un système de login : https://appleeducate.github.io/flutter_login/ et un bon tuto flutter-login-app-using-rest-api

http.post

Pour envoyer du json à une API REST deux choses sont importantes, ne pas oublier de définir le content-type dans le header, ainsi que d’encoder le body.

headers: {'content-type': 'application/json'},
body: json.encode({"user": {"email": "jean@mail.com", "password": "jean"}}),

Le reste est très bien décrit dans les tutos et dans la documentation.

Flutter, applis pour iOs et Android

Pour commencer, c’est quoi Flutter ? Voilà deux liens qui expliquent la politique de Google lié à ce nouvel outil et le deuxième qui refait l’évolution des outils destiné à « écrire une fois, déployer partout ».

Un bon article qui montre de quoi est capable flutter : https://proandroiddev.com/mythbuster-10-rumors-about-flutter-why-its-not-worse-than-android-kotlin-f1a1acbe587d

StateLessWidget vs StateFulWidget

Les « widgets sans état » sont utiles lorsque la partie de l’interface utilisateur que vous décrivez ne dépend pas d’autre chose que des informations de configuration de l’objet lui-même et du BuildContext dans lequel le widget est déployé. Pour les compositions qui peuvent changer dynamiquement, par exemple en raison d’un état d’horloge interne, ou selon l’état du système, pensez à utiliser StatefulWidget.

https://docs.flutter.io/flutter/widgets/StatelessWidget-class.htm

Les widgets de Flutter sont construit sur le même modèle que ceux de React. Il y en a 4 types principaux :

  • le texte
  • des colonnes et des lignes pour organiser des éléments horizontalement et verticalement
  • des piles (stacks), pour empiler des éléments à la manière de la position absolue en html/css
  • un conteneur plus général, comme une <div> qui peut être manipulé par des matrices.

Route et voiture

– Désolé Monsieur, je vous assure vous ne pouvez pas circuler avec votre véhicules sur cette voie ! C’est contraire à notre politique de sécurité !

– Mais je ne comprend pas ! Qu’est ce qui ne va pas ?

– C’est bien simple, nous n’avons testé que des modèles de la marque Toyodi et Fordissan, votre Peugeotroen ne fait pas parti de notre liste blanche des marques de véhicule autorisé à circuler sur notre réseaux d’autoroute. Désolé, mais il va falloir changer de véhicule pour utiliser ce service.

– Monsieur !! Je ne changerai pas de véhicule à cause de votre politique commerciale ! Je prendrai la route national qui est gratuite, ouvert, et respectueuse des choix des automobilistes ! Bonne journée Monsieur.

Vroum

#mercredifiction #automobile #voiture #libre choix #politique

Nextcloud

Depuis quelques mois j’utilise NextCloud un cloud #OpenSource. J’ai opté pour l’offre chez Zaclys qui est simple, économique et efficace.

Pourquoi ?

L’utilisation d’un cloud personnel ne coule pas de source, tout le monde n’en a pas besoin. Personnellement je l’utilise pour accéder à mes fichiers, à mes notes, mes contacts, mes agendas mes listes de taches. Ça m’est aussi utile pour partager des dossiers, des photos. C’est un peu la base d’un cloud vous aller me dire. Oui 😊

Comment ?

Je l’utilise sur plusieurs type d’objets. Avec l’application qui me permet de synchroniser tout ça sur mon iMac 🖥 (MacOS), sur mon ordinateur portable 💻 (Linux/Ubuntu), sur mon smartphone 📱 (LineageOS) et en mobilité sur d’autre ordinateur grâce à l’accès web.

Je suis particulièrement contant de l’application de note et de ToDo sur Android.

Pour ce qui est des contacts ou des agendas, je peux les synchroniser dans leur application respective.

Je vous recommande vivement cette solution qui n’a pas à rougir face à des DropBox, GoogleDrive et autre service centralisé !

Librement,
Pascal

Mes premiers achats en Ğ1 (june)

Je suis super contant parce qu’hier soir j’ai pu faire mes premiers achats avec la monnaie libre Ğ1 (ou June). Ça fait deux mois que j’en suis membre et je créé comme les 450 membres ( chiffre du 23 nov. 2017) 1 Dividende Universel par jour. En ce moment il est de 10,01Ğ1.

J’avais donc dans les 500Ğ1 à dépenser lors de l’apéro organisé par Monnaie Libre Occitanie et ça tombe bien puisqu’il y avait des nems et du savon artisanal à acheter.

J’ai donc fait mes achats, 20 nems pour 100Junes et 2 savons pour 70 Junes et une petite part en euros de 1,20€.

Pour ma part j’ai pu vendre quelques kilos de pomme ultra bio ! J’ai laissé le prix libre et c’est allé de 15Junes à 50Junes pour un gros kilo de pomme. La loi du marché, même avec la monnaie libre.

Ce qui est sympa c’est de voir que les prix sont trés évolutif, du simple à la dizaine. J’imagine que ça va se stabiliser avec le temps. :-)