Quoi de neuf dans Flutter 2?

À propos de l'auteur

Carmine Zaccagnino est un passionné de Flutter et Linux, auteur du livre Programming Flutter avec Pragmatic Bookshelf. Blogues plus, tweets moins.
En savoir plus sur
Carmin
↬

L'année dernière, j'ai écrit deux articles ici sur Smashing Magazine sur l'utilisation de Flutter sur les plates-formes Web et de bureau. Le premier article était une introduction générale au développement Web et de bureau, et se concentrait sur la création d'une interface utilisateur réactive; le deuxième article portait sur les défis auxquels vous pourriez être confronté en essayant de développer une application Flutter qui s'exécute sur plusieurs plates-formes.

À l'époque, la prise en charge de Flutter pour les plates-formes non mobiles n'était pas considérée comme stable et en production- prêt par l'équipe Flutter, mais les choses ont changé maintenant.

Flutter 2 Is Here

Le 3 mars, Google a organisé l'événement Flutter Engage où Fluter 2.0 a été lancé. Cette version est vraiment une version 2.0 appropriée, avec de nombreux changements promettant de rendre Flutter vraiment prêt à aller au-delà du développement d'applications mobiles.

Le changement qui est essentiel pour comprendre pourquoi Flutter 2.0 ce qui compte, c'est que le développement Web fait maintenant officiellement partie du canal stable et que le support de bureau suivra bientôt sur le canal stable. En fait, il est actuellement activé sous la forme d'une version candidate en tant qu'instantané de la version bêta anticipée dans le canal stable.

Dans l'annonce, Google n'a pas seulement donné une idée de ce que sera l'avenir de Flutter. Il y a également eu des exemples concrets de la façon dont de grandes entreprises travaillent déjà sur des applications Flutter pour remplacer leurs applications existantes par des applications plus performantes et permettant aux développeurs d'être plus productifs. Par exemple. le plus grand constructeur automobile au monde, Toyota, va maintenant construire le système d'infodivertissement sur ses voitures à l'aide de Flutter.

Une autre annonce intéressante – celle-ci montrant à quelle vitesse Flutter s'améliore en tant que SDK multiplateforme – est l'annonce de Canonical qui, en plus pour développer leur nouveau programme d'installation Ubuntu à l'aide de Flutter, ils utiliseront également Flutter comme option par défaut pour créer des applications de bureau.

Ils ont également publié une version Flutter du thème Yaru d'Ubuntu que nous utiliserons plus tard dans l'article pour créer une application de bureau Flutter qui ressemble parfaitement à la maison dans le bureau Ubuntu, en utilisant également quelques-unes des nouvelles fonctionnalités Flutter. Vous pouvez consulter l'annonce Flutter 2 de Google pour obtenir une image plus complète.

Examinons quelques-unes des modifications techniques apportées à Flutter qui sont arrivées sur le canal stable avec la version 2.0 et construisez un exemple d'application de bureau très simple avec Flutter avant de tirer des conclusions sur les types de projets spécifiques pour lesquels nous pourrions et ne pouvions pas utiliser Flutter pour le moment.

Changements d'utilisation générale pour les appareils plus gros

Selon l'annonce , de nombreux changements ont été apportés à Flutter pour fournir une meilleure prise en charge des appareils qui ne sont pas des appareils mobiles.

Par exemple, un exemple évident de quelque chose qui était nécessaire pour les applications Web et de bureau et qui jusqu'à présent devait être fait en utilisant un tiers. party packages ou en l'implémentant vous-même est une barre de défilement .

Il existe maintenant une barre de défilement intégrée qui peut s'intégrer directement dans votre application, en regardant exactement à quoi une barre de défilement devrait ressembler. la plateforme spécifique: avec ou sans piste, avec la possibilité de faire défiler en cliquant sur la piste, par exemple, ce qui est énorme si vous voulez que vos utilisateurs se sentent comme chez eux dès le début lors de l'utilisation de votre application Flutter. Vous pouvez également le thème et le personnaliser.

Il semble également qu'à un moment donné, Flutter affichera automatiquement les barres de défilement appropriées lorsque le contenu de l'application peut faire défiler.

Pendant ce temps, vous pouvez simplement envelopper n'importe quel vue déroulante avec le widget de la barre de défilement de votre choix et créez un ScrollController à ajouter comme contrôleur pour la barre de défilement et le widget défilable (au cas où vous n’auriez jamais utilisé un ) ScrollController vous utilisez exactement comme un TextEditingController pour un TextField ). Vous pouvez voir un exemple d'utilisation d'une barre de défilement Material standard un peu plus loin dans cet article dans l'exemple d'application de bureau.

Flutter Web Changes

Flutter pour le Web était déjà dans une forme tout à fait utilisable, mais il y avait des performances et des problèmes d'utilisabilité qui signifiaient qu'il ne se sentait jamais aussi raffiné que Flutter mobile. Avec la sortie de Flutter 2.0, de nombreuses améliorations ont été apportées, notamment en ce qui concerne les performances de .

La cible de compilation, auparavant très expérimentale et délicate à utiliser pour rendre votre application (avec WebAssembly et Skia) s'appelle désormais CanvasKit . Il a été affiné pour offrir une expérience cohérente et performante lors du passage de l'exécution d'une application Flutter en mode natif sur des appareils mobiles à son exécution dans un navigateur.

Désormais, par défaut, votre application sera rendue à l'aide de CanvasKit pour les utilisateurs Web de bureau et avec la valeur par défaut Rendu HTML (qui a également été amélioré, mais n'est pas aussi bon que CanvasKit) pour les utilisateurs Web mobiles.

Si vous avez essayé d'utiliser Flutter pour créer des applications Web, vous avez peut-être remarqué qu'il n'était pas particulièrement intuitif. avoir quelque chose d'aussi simple qu'un lien hypertexte. Maintenant au moins, vous pouvez créer des hyperliens un peu plus comme vous le feriez avec HTML, en utilisant la classe Link .

Il ne s'agit en fait pas d'un ajout à Flutter lui-même, mais d'un ajout récent à Package de Google url_launcher . Vous pouvez trouver une description complète et des exemples d'utilisation de la classe Link dans la référence officielle de l'API .

La sélection de texte a été améliorée comme maintenant le point de pivot correspond à l'endroit où l'utilisateur a commencé à sélectionner du texte et non le bord gauche du SelectableText en question. De plus, les options Copier / Couper / Coller existent maintenant et fonctionnent correctement.

Néanmoins, la sélection de texte n'est toujours pas de premier ordre car il n'est pas possible de sélectionner du texte dans différents widgets SelectableText et le texte sélectionnable n'est toujours pas Ce n'est pas par défaut, mais nous en parlerons ainsi que d'autres inconvénients exceptionnels du Web Flutter (manque de support SEO, avant tout) dans la conclusion de cet article.

Flutter Desktop Changes

When I writing à propos du développement Web et de bureau avec Flutter l'année dernière je me suis principalement concentré sur la création d'applications Web avec Flutter, étant donné que le développement de bureau était encore considéré comme très expérimental (même pas sur le canal beta ). Maintenant, cependant, le support de bureau Flutter suivra bientôt le support Web et deviendra stable.

Les performances et la stabilité ont été considérablement améliorées, et les améliorations de la convivialité générale pour les appareils plus gros fonctionnant avec une souris et les claviers qui profitent tellement aux applications Web signifient également que les applications de bureau Flutter sont désormais plus utilisables.

Il y a encore un manque d'outils pour les applications de bureau et il y a encore de nombreux bogues assez graves, alors n'essayez pas de les utiliser pour votre prochain projet d'application de bureau destiné à une distribution publique.

Exemple d'application de bureau construite avec Flutter

Le support de bureau Flutter est maintenant assez stable et utilisable, et il s'améliorera sûrement à l'avenir tout autant que Flutter dans son L'ensemble s'est amélioré jusqu'à présent, alors essayons-le pour le voir en action !

L'application que nous allons créer est l'application très simple suivante. Nous avons une barre latérale de navigation avec quelques éléments de contenu pour chacune des sections de navigation.

La première chose à faire est de déterminer vos dépendances .

Tout d'abord, vous devez activer le développement de bureau Flutter, en utilisant la commande [19659040] flutter config –enable – $ {OS_NAME} -desktop

où vous remplaceriez $ {OS_NAME} par le système d'exploitation de votre choix, soit windows linux ou macos . Pour cet exemple, j'utiliserai Linux étant donné que nous allons utiliser le thème Ubuntu.

Il existe également d'autres dépendances nécessaires pour créer des applications natives pour chaque plate-forme, par exemple sur Windows, vous avez besoin de Visual Studio 2019, sur macOS vous avez besoin de Xcode et de CocoaPods et vous pouvez trouver une liste à jour des dépendances Linux sur le site officiel de Flutter .

Ensuite, créez un projet Flutter, exécutant:

 flutter create flutter_ubuntu_desktop_example

Ensuite, nous devons obtenir le thème lui-même (la seule dépendance de notre application) en ajoutant yaru aux dépendances de votre application dans pubspec.yaml (dans le racine de l'arborescence source):

 dépendances:
  yaru: ^ 0.0.0-dev.8
  battement:
    sdk: scintillement

Ensuite, passons à lib / main.dart où réside le code de notre application.

Premièrement, nous importons les éléments dont nous avons besoin. Dans ce cas, nous allons simplement importer la bibliothèque standard Flutter Material Design et le thème Yaru (nous n'utiliserons que le thème clair pour cet exemple, nous allons donc montrer seulement cet objet dans le package Yaru):

 import 'package: flutter / material.dart';
import 'package: yaru / yaru.dart' show yaruLightTheme;

Au lieu d'avoir une classe d'application distincte, nous allons appeler les constructeurs MaterialApp directement dans main lors de l'appel runApp c'est donc là que nous définissons le le thème de l'application, qui sera le thème Yaru, plus précisément le thème léger appelé yaruLightTheme :

 void main () =>
  runApp (MaterialApp (
    thème: yaruLightTheme,
    accueil: HomePage (),
  ));

Le HomePage va être un StatefulWidget contenant les données que nous allons montrer étant donné qu'il est immuable (rappelez-vous, les widgets sont toujours immuables, la mutabilité est gérée dans le État d'un StatefulWidget ):

 classe HomePage étend StatefulWidget {
  final dataToShow = {
    "Premier exemple de données": [
      "First string in first list item",
      "Second in first",
      "Example",
      "One"
    ],
    "Deuxième exemple": [
      "This is another example",
      "Check",
      "It",
      "Out",
      "Here's other data"
    ],
    "Troisième exemple": [
      "Flutter is",
      "really",
      "awesome",
      "and",
      "it",
      "now",
      "works",
      "everywhere,",
      "this",
      "is",
      "incredible",
      "and",
      "everyone",
      "should",
      "know",
      "about",
      "it",
      "because",
      "someone",
      "must",
      "be",
      "missing",
      "out",
      "on",
      "a lot"
    ]
  } .entries.toList ();

  @passer outre
  createState () => HomePageState ();
}

Le HomePageState est l'endroit où nous définissons l'interface utilisateur et le comportement de l'application. Tout d'abord, regardons l'arbre des widgets que nous voulons construire (éléments de liste et de grille et widgets d'espacement exclus):

Nous allons restreindre le ] Colonne sur la gauche (celle montrant les contrôles pour les widgets à afficher sur le côté droit de l'application) à une certaine largeur (400 pixels par exemple) en utilisant un Container alors que le GridView à droite doit être Expanded pour remplir la vue.

Sur le côté gauche de la Row (dans la Column ) , la ListView doit s'étendre jusqu'à remplir l'espace vertical sous la rangée de boutons en haut. Dans la ligne en haut, nous devons également développer le TextButton (le bouton de réinitialisation) pour remplir l'espace à droite des chevrons gauche et droit IconButton ] s.

Le résultat HomePageState qui fait tout cela, avec la logique nécessaire pour afficher le bon élément à droite en fonction de ce que l'utilisateur sélectionne à gauche, est le suivant: [19659059] la classe HomePageState étend l'état {
int sélectionné = 0;

ScrollController _gridScrollController = ScrollController ();

incrementSelected () {
if (sélectionné! = widget.dataToShow.length – 1) {
setState (() {
sélectionné ++;
});
}
}

decrementSelected () {
si (sélectionné! = 0) {
setState (() {
choisi–;
});
}
}

@passer outre
Construction du widget (contexte BuildContext) {
retour échafaudage (
corps: Row (
enfants: [
Container(
color: Colors.black12,
width: 400.0,
child: Column(
children: [
Row(
children: [
IconButton(
icon: Icon(Icons.chevron_left),
onPressed: decrementSelected,
),
IconButton(
icon: Icon(Icons.chevron_right),
onPressed: incrementSelected,
),
Expanded(
child: Center(
child: TextButton(
child: Text(« Reset »),
onPressed: () => setState(() => selected = 0),
),
))
],
),
Étendu(
enfant: ListView.builder (
itemCount: widget.dataToShow.length,
itemBuilder: (_, i) => ListTile (
title: Texte (widget.dataToShow [i] .key),
leader: i == sélectionné
? Icône (Icons.check)
: Icône (Icons.not_interested),
en fût: () {
setState (() {
sélectionné = i;
});
},
),
),
),
],
)),
Étendu(
enfant: Barre de défilement (
isAlwaysShown: vrai,
contrôleur: _gridScrollController,
enfant: GridView.builder (
contrôleur: _gridScrollController,
itemCount: widget.dataToShow [selected] .value.length,
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent (
maxCrossAxisExtent: 200,0),
itemBuilder: (_, i) => Conteneur (
largeur: 200,0,
hauteur: 200,0,
enfant: Rembourrage (
remplissage: const EdgeInsets.all (8.0),
enfant: Carte (
enfant: Centre (
enfant:
Texte (widget.dataToShow [selected] .valeur [i])),
),
),
)),
),
),
],
),
);
}
}