Dans la section précédente, nous avons vu comment fonctionne le Container Widget. Cependant, pour créer une bonne mise en page, nous devons utiliser d’autres widgets de mise en page tels que Colonne et Card. Parallèlement à cela, dans de nombreux cas, nous avons besoin d’une ou plusieurs images.
Nous avons déjà appris un concept clé. Les Widgets de mise en page sont de deux types. Un seul enfant et plusieurs enfants.
Le Container est un widget enfant unique. Mais, dans la plupart des cas, nous devons placer les widgets soit verticalement, soit horizontalement.
Par conséquent, Flutter est livré avec des widgets multi-enfants comme Column.
Avant de commencer, jetons un coup d’œil à l’application Flutter que nous allons créer.
Pour commencer, nous avons besoin d’un MaterialApp () qui agira comme la racine de l’arborescence Widget.
Nous devons nous souvenir du diagramme d’arbre Widget que nous avons vu précédemment.
Notre page d’accueil de l’application étend un widget sans état et utilise une méthode build () qui renvoie le widget Scaffold en premier.
Scaffold a de nombreuses propriétés qui attendent d’autres widgets, comme AppBar, la couleur d’arrière-plan, etc.
Par conséquent, initialement, la partie supérieure de l’arborescence Widget ressemble à ce qui suit.
class AppHomePage extends StatelessWidget {
const AppHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
backgroundColor: Colors.pink[900],
),
backgroundColor: Colors.pink[300],
body: Center(
child: Column(
children: []
),
),
);
}
}
Comme nous le voyons, nous devons placer tous les widgets à l’intérieur du widget de colonne.
Et cela inclut un widget d’image.
Par conséquent, nous devons d’abord savoir comment nous pouvons utiliser le widget d’image.
Comment utiliser une image dans Column in flutter ?
La première chose d’abord.
Nous devrions d’abord nous diriger vers le fichier “pubspec.yaml” et les dépendances nécessaires.
Si nous voulons utiliser l’image localement, nous devons créer un dossier “images” dans le répertoire du projet.
Deuxièmement, nous mentionnons le chemin dans le fichier pubspec.yaml.
# The following section is specific to Flutter.
flutter:
uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets: [images/]
Ici, l’indentation est extrêmement importante. Par conséquent, soyez prudent à ce sujet.
Maintenant, nous pouvons conserver autant d’images dans notre dossier “images” et mentionner le chemin dans notre Image Widget.
const Image(
image: AssetImage('images/fig3.5.jpg'),
),Comme nous pouvons le voir, le widget Image a la propriété “image” qui attend le widget AssetImage.
Le widget AssetImage transmet une donnée de chaîne qui mentionne réellement le chemin.
Maintenant, nous pouvons placer le widget Image dans le widget Column.
body: Center(
child: Column(
children: [
const Image(
image: AssetImage('images/fig3.5.jpg'),
),
]
),Le modèle de l’arborescence Widget se développe de cette manière.
Nous pouvons certainement placer cette image dans un conteneur et contrôler la largeur et la hauteur.
Sous le Widget Image, nous avons utilisé deux Widgets SizedBox et Divider pour créer une jolie petite ligne.
SizedBox(
height: 6.0,
width: 60.0,
child: Divider(
color: Colors.orange.shade300,
thickness: 2.0,
),
),
Mais le Card Widget rend ce design unique.
Comment créer de Card Widget dans Flutter ?
Le widget de carte est une feuille de matériel utilisée pour représenter certaines informations connexes. Nous avons peut-être conçu la même chose en utilisant le widget conteneur.
Mais pourquoi devrions-nous?
Premièrement, ce serait fastidieux.
Deuxièmement, le widget Carte apparaît sous la forme d’un panneau avec des coins légèrement arrondis et une ombre d’élévation.
Enfin, l’équipe Flutter l’a déjà fait pour un tel usage. De plus, nous pouvons le personnaliser avec un widget ListTile.
Les tuiles de liste sont disposées en colonnes dans des tiroirs et des cartes.
Notre carte ressemble à ce qui suit.
Card(
margin: const EdgeInsets.fromLTRB(40.0, 5.0, 40.0, 5.0),
color: Colors.orange.shade100,
child: const ListTile(
title: Text('Ask yourself why you are fighting for?'),
trailing: Icon(Icons.question_answer_outlined),
),
),
Grâce à la propriété margin, nous avons contrôlé l’espace autour. Cela commence par la gauche. Ensuite, le haut, la droite et le bas suivent.
Passez simplement le type de données “double”.
Le Widget ListTile a deux propriétés – le « titre » et la « fin ». La propriété de fin renvoie un Icon Widget.
Flutter fournit automatiquement des centaines d’icônes matérielles.
L’extrait de code complet
import 'package:flutter/material.dart';
main() {
runApp(const App());
}
class App extends StatelessWidget {
const App({Key? key}) : super(key: key);
static const title = 'How to be Peaceful?';
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: title,
home: AppHomePage(
title: title,
),
);
}
}
class AppHomePage extends StatelessWidget {
const AppHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
backgroundColor: Colors.pink[900],
),
backgroundColor: Colors.pink[300],
body: Center(
child: Column(
children: [
const SizedBox(
height: 6.0,
width: 60.0,
child: Divider(
thickness: 6.0,
),
),
const Image(
image: AssetImage('images/fig3.5.jpg'),
),
SizedBox(
height: 6.0,
width: 60.0,
child: Divider(
color: Colors.orange.shade300,
thickness: 2.0,
),
),
Card(
margin: const EdgeInsets.fromLTRB(40.0, 5.0, 40.0, 5.0),
color: Colors.orange.shade100,
child: const ListTile(
title: Text('Ask yourself why you are fighting for?'),
trailing: Icon(Icons.question_answer_outlined),
),
),
SizedBox(
height: 6.0,
width: 60.0,
child: Divider(
color: Colors.orange.shade300,
thickness: 2.0,
),
),
Card(
margin: const EdgeInsets.fromLTRB(40.0, 5.0, 40.0, 5.0),
color: Colors.orange.shade100,
child: const ListTile(
title: Text('The reason? In most cases, Trivial.'),
trailing: Icon(Icons.sms_failed),
),
),
SizedBox(
height: 6.0,
width: 60.0,
child: Divider(
color: Colors.orange.shade300,
thickness: 2.0,
),
),
Card(
margin: const EdgeInsets.fromLTRB(40.0, 5.0, 40.0, 5.0),
color: Colors.orange.shade100,
child: const ListTile(
title: Text('Remember, Dialogue is the Key.'),
trailing: Icon(Icons.mobile_friendly),
),
),
SizedBox(
height: 6.0,
width: 60.0,
child: Divider(
color: Colors.orange.shade300,
thickness: 2.0,
),
),
],
)),
);
}
}Vous pouvez exécuter le code. Cependant, vous devez placer l’image dans le dossier image.
Ou, vous pouvez télécharger le code complet à partir du référentiel GitHub.
Et Ensuite?
Books at Leanpub Books in Apress My books at Amazon Courses at Educative GitHub repository Technical blog Twitter
Leave a Reply