Développement d'interface utilisateur avec Flutter

Bonjour, Habr! Présentant à votre attention la traduction de l'article " Building Layouts ".

Aujourd'hui, nous découvrons:

• Fonctionnement des générateurs d'interface utilisateur Flutter
• Comment disposer les écrans horizontalement et verticalement
• Comment faire l'écran avec Flutter

Le résultat de la leçon d'aujourd'hui sera la disposition d'écran suivante

Étape 0: Configuration du projet

Tout d'abord, créez un nouveau fichier de projet -> Nouveau projet Flutter -> suivant, suivant, suivant ...
Ensuite, créez le répertoire d'images à la racine du projet et placez-y un fichier avec le nom lake.jpg - vous pouvez télécharger le fichier ici - lien

Il est également nécessaire de corriger le fichier de configuration pubspec.yaml (quelque chose comme gradle pour android et cacao pods dans iOS, nous pouvons y ajouter des dépendances externes). Le texte du fichier lui-même peut être téléchargé ici.

La source du projet peut être téléchargée ici - elle doit être placée dans le fichier main.dart

Étape 1: Graphique d'écran

Tout d'abord, divisez la mise en page en éléments simples

• Définir des lignes et des colonnes
• Déterminer si la mise en page comprend une grille?
• Y a-t-il des éléments qui se chevauchent
• Ai-je besoin d'onglets pour l'interface utilisateur?
• Faites attention aux zones nécessitant un alignement ou une indentation

Tout d'abord, nous identifions les principaux grands éléments. Dans cet exemple, 4 éléments sont disposés dans une colonne: une image, deux lignes et un bloc de test



Ensuite, nous analyserons chaque ligne. La première ligne, appelée «Titre», a 3 enfants - une colonne de texte, une icône étoile et un nombre. La première colonne contient 2 lignes. La première colonne prend beaucoup d'espace, vous devez donc l'envelopper dans un widget extensible.



La rangée suivante, appelée la section des boutons, a également 3 enfants. Chacun d'eux contient une image et du texte.



Enfin, nous avons présenté la disposition en éléments simples. Le moyen le plus simple consiste à utiliser l'approche ascendante pour la disposition de l'affichage. Afin d'éviter une structure complexe, divisez l'interface utilisateur en variables et fonctions.

Étape 2: créer une rangée d'en-têtes

Tout d'abord, nous devons créer la colonne de gauche de la section d'en-tête. L'insertion d'une colonne à l'intérieur d'un widget extensible développe la colonne pour utiliser tout l'espace restant dans la ligne. Définissez la propriété crossAxisAlignment sur CrossAxisAlignment.start pour aligner la colonne au début de la ligne.

Placer une ligne de texte à l'intérieur d'un conteneur vous permet d'activer le remplissage. Le deuxième enfant de la colonne est également du texte, il est grisé. Les deux derniers éléments sont marqués d'une icône «étoile» en rouge et d'un texte avec une valeur de «41». Placez la ligne entière dans le conteneur et ajoutez une indentation de 32 pixels de chaque côté. Le code pour effectuer ces étapes est présenté ci-dessous.

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { Widget titleSection = Container( padding: const EdgeInsets.all(32.0), child: Row( children: [ Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( padding: const EdgeInsets.only(bottom: 8.0), child: Text( 'Oeschinen Lake Campground', style: TextStyle( fontWeight: FontWeight.bold, ), ), ), Text( 'Kandersteg, Switzerland', style: TextStyle( color: Colors.grey[500], ), ), ], ), ), Icon( Icons.star, color: Colors.red[500], ), Text('41'), ], ), ); //... } 

Étape 3: créer une série de boutons

La section des boutons se compose de 3 colonnes, qui sont construites selon un principe similaire - une icône au-dessus d'une ligne de texte. La colonne de cette ligne est uniformément remplie et le texte et les icônes sont dessinés dans la couleur principale, qui est sélectionnée en bleu dans notre projet dans la méthode build ().

 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { //... return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), //... } 

Étant donné que le code de construction pour chaque ligne sera presque identique, il sera plus efficace d'utiliser une fonction imbriquée telle que buildButtonColumn (), qui comprend une icône et du texte et renvoie une colonne avec ce widget.

 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { //... Column buildButtonColumn(IconData icon, String label) { Color color = Theme.of(context).primaryColor; return Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, children: [ Icon(icon, color: color), Container( margin: const EdgeInsets.only(top: 8.0), child: Text( label, style: TextStyle( fontSize: 12.0, fontWeight: FontWeight.w400, color: color, ), ), ), ], ); } //... } 

La fonction de construction ajoute une icône directement à la colonne. Placez le texte dans le conteneur pour ajouter un remplissage et séparez-le de l'icône. Nous construisons chaque ligne de ces colonnes en appelant une fonction et en passant l'icône et le texte à l'intérieur de la colonne. Alignez la colonne le long de l'axe principal à l'aide de MainAxisAlignment.spaceEvenly, en organisant l'espace libre avant, entre et après chaque colonne.

 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { //... Widget buttonSection = Container( child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ buildButtonColumn(Icons.call, 'CALL'), buildButtonColumn(Icons.near_me, 'ROUTE'), buildButtonColumn(Icons.share, 'SHARE'), ], ), ); //... } 

Étape 4: créer la section Description

Définissez une section de description assez longue. Placez le texte dans le conteneur et ajoutez un retrait de 32 pixels de chaque bord.

 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { //... Widget textSection = Container( padding: const EdgeInsets.all(32.0), child: Text( ''' Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese Alps. Situated 1,578 meters above sea level, it is one of the larger Alpine Lakes. A gondola ride from Kandersteg, followed by a half-hour walk through pastures and pine forest, leads you to the lake, which warms to 20 degrees Celsius in the summer. Activities enjoyed here include rowing, and riding the summer toboggan run. ''', softWrap: true, ), ); //... } 

Étape 5: créer la section d'image

Trois des quatre colonnes ont déjà été construites, il ne reste plus qu'à faire la colonne image. L'image utilisée dans ce projet est disponible en ligne sous la licence Creative Commons. Mais il est gros et il se chargera lentement. À l'étape 0, nous avons ajouté une image à notre projet et mis à jour le fichier de configuration, nous allons maintenant ajouter un lien vers celle-ci dans notre code.

 return MaterialApp( //... body: ListView( children: [ Image.asset( 'images/lake.jpg', height: 240.0, fit: BoxFit.cover, ), // ... ], ), //... ); 

BoxFit.cover indique au framework Flutter que l'image doit être aussi petite que possible, mais couvrir toute la zone de rendu.

Étape 6: Assembler le tout

Dans la dernière étape, nous collecterons tous les morceaux de notre code ensemble. Le widget est organisé dans un ListView, pas une colonne car le ListView défilera automatiquement lors du défilement sur un petit appareil.

 //... return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( appBar: AppBar( title: Text('Top Lakes'), ), body: ListView( children: [ Image.asset( 'images/lake.jpg', width: 600.0, height: 240.0, fit: BoxFit.cover, ), titleSection, buttonSection, textSection, ], ), ), ); //...