Étiquette : flutter

Catégories
Développement

Utiliser le Bluetooth dans une appli

Pour l’instant il n’y a qu’un seul paquet sérieusement utilisable pour développer un application avec Flutter, il s’agit de flutter_blue. Il existe d’autres paquets mais beaucoup trop limité, par exemple bluetooth où encore flutter_bluetooth_serial qui est limité à Android, ce qui est un paradoxe puisque Flutter n’est utile que pour développer des applications cross-platform !

Il y a très peu de documentation sur Flutter dès qu’on s’éloigne des thèmes décrit dans la doc officielle. C’est là qu’on voit que c’est un framework très jeune.

Catégories
Développement

Flutter en image

iOS et Android

Tout est widget

https://flutter.dev/docs/resources/technical-overview
A mathematical formula of UI = f(state). 'UI' is the layout on the screen. 'f' is your build methods. 'state' is the application state.
https://flutter.dev/docs/development/data-and-backend/state-mgmt/declarative

Les états : app and ephemeral states

A flow chart. Start with 'Data'. 'Who needs it?'. Three options: 'Most widgets', 'Some widgets' and 'Single widget'. The first two options both lead to 'App state'. The 'Single widget' option leads to 'Ephemeral state'.


Catégories
Développement

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


Catégories
Développement

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.

Catégories
Développement

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 ».

https://www.upwork.com/hiring/for-clients/revealed-real-google-strategy-behind-flutter/
https://www.fidelisa.com/2018/03/02/flutter/

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.