Row et Column dans Flutter
Row et Column dans Flutter
-
Objectif
- Apprendre à organiser les widgets en lignes et en colonnes sur l’écran en Flutter
-
Présentation
- Row et Column sont des widgets dans Flutter et la plupart du temps, chaque mise en page peut être décomposée en ligne et en colonne.
- La ligne et la colonne sont les deux widgets essentiels de Flutter qui permet aux développeurs d’aligner les child horizontalement et verticalement selon nos besoins.
- Ces widgets sont très nécessaires lorsque nous concevons l’interface utilisateur de l’application dans Flutter.
-
Row
- Une ligne est un widget de mise en page multi-enfant qui prend une liste de widgets comme ses enfants.
- Une ligne affiche les widgets dans la vue visible, c’est-à-dire qu’elle ne défile pas.
- Nous pouvons contrôler la façon dont un widget de ligne aligne ses enfants en fonction de notre choix en utilisant la propriété
crossAxisAlignmentetmainAxisAlignment. - L’axe transversal de la ligne s’exécutera verticalement , et l’axe principal s’exécutera horizontalement .
- Voir la représentation visuelle ci-dessous pour le comprendre plus clairement.
-
Définir l’alignement de l’axe transversal
- L’alignement des ‘child’ dans l’axe transversal peut être défini en passant un
crossAxisAlignmentargument. Si vous ne transmettez pas l’argument, l’alignement par défaut de l’axe transversal est centré. Les valeurs possibles sont : start: Placez les enfants aussi près que possible du début de l’axe transversal.end: Placez les enfants le plus près possible de l’extrémité de l’axe transversal.center: Placez les enfants de manière à ce que leurs centres soient alignés avec le milieu de l’axe transversal.stretch: Demander aux enfants de remplir l’axe transversal.baseline: placez les enfants le long de l’axe transversal de sorte que leurs lignes de base correspondent.-
mainAxisAlignment - Le
mainAxisAlignmentcontrôle les ‘child’ à afficher dans la direction horizontale de la ligne ‘Row‘, mais contrôle la direction verticale du Colonne ‘column‘ -
Column
- Le widget de colonne comme la ligne est un widget de mise en page multi-enfant qui prend une liste de widgets comme ses enfants.
-
Comparaison entre Row et Column
-
Application
-
Énoncé
- Utiliser les widgets row et column pour réaliser la figure suivante:
|
Récipient |
Colonne/Ligne |
|---|---|
| Prend exactement un widget enfant | Prend plusieurs widgets enfants (illimités) |
| Options d’alignement et de style riches disponibles | Options d’alignement disponibles, mais il n’y a pas d’options de style |
| Largeur flexible (ex. largeur enfant, largeur disponible, …) | Prend toujours la pleine hauteur (colonne) / largeur (ligne) disponible |
| Parfait pour un style et un alignement personnalisés | Indispensable si les widgets sont placés les uns à côté des autres |
Solution
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Home(),
);
}
}
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Formation apcpedagogie.com'),
backgroundColor: const Color.fromARGB(190, 24, 255, 255),
),
body: Column(
//Tous les éléments sont emballés
children: [
//Dans cette colonne
const SizedBox(
height: 15,
),
const SizedBox(
height: 20,
child: Text('Démonstration de Row',
style: TextStyle(
color: Color.fromRGBO(69, 235, 18, 1),
fontWeight: FontWeight.bold)),
),
Row(
children: [
/////////////Premier élément
Card(
margin: const EdgeInsets.all(10),
elevation: 8,
child: Container(
padding: const EdgeInsets.all(25),
child: const Text(
'apcpedagogie',
style: TextStyle(color: Colors.blue),
),
),
),
const SizedBox(
width: 2,
),
//////////////////Deuxsième élément
Card(
margin: const EdgeInsets.all(10),
elevation: 8,
child: Container(
padding: const EdgeInsets.all(25),
child: const Text(
'apcpedagogie',
style: TextStyle(color: Colors.blue),
),
),
),
const SizedBox(
width: 2,
),
/////////////////Troisième élément
Card(
margin: const EdgeInsets.all(10),
elevation: 8,
child: Container(
padding: const EdgeInsets.all(25),
child: const Text(
'apcpedagogie',
style: TextStyle(color: Colors.blue),
),
),
),
],
),
const SizedBox(
height: 30,
),
const SizedBox(
height: 20,
child: Text(
'Démonstration de Column',
style: TextStyle(
color: Color.fromARGB(255, 18, 50, 235),
fontWeight: FontWeight.bold),
),
),
Column(
children: [
/////////////Premier élément
Card(
margin: const EdgeInsets.all(10),
elevation: 8,
child: Container(
padding: const EdgeInsets.all(25),
child: const Text(
'apcpedagogie',
style: TextStyle(color: Color.fromARGB(255, 18, 50, 235)),
),
),
),
const SizedBox(
width: 4,
),
//////////////////Deuxsième élément
Card(
margin: const EdgeInsets.all(10),
elevation: 8,
child: Container(
padding: const EdgeInsets.all(25),
child: const Text(
'apcpedagogie',
style: TextStyle(color: Color.fromARGB(255, 18, 50, 235)),
),
),
),
/////////////////Troisième élément
Card(
margin: const EdgeInsets.all(10),
elevation: 8,
child: Container(
padding: const EdgeInsets.all(25),
child: const Text(
'apcpedagogie',
style: TextStyle(color: Color.fromARGB(255, 18, 50, 235)),
),
),
),
],
)
],
),
);
}
}
