Le widget Expanded pour remplir les espaces

Le widget Expanded s’utilise souvent avec les widgets Row et Column, il permet d’étendre les widgets enfants afin de remplir les espaces disponibles.

En fait, ce widget peut occuper tout l’espace disponible à l’écran si vous ne spécifiez pas la largeur et la hauteur des widgets enfants.

Nous utiliserons la propriété child pour spécifier le widget qui remplit l’espace vide entre les colonnes (Column) et les lignes (Row). (l’axe Y pour la colonne et l’axe X pour la ligne).

Si vous utilisez plusieurs widgets avec Expanded dans la même colonne ou la même ligne, vous pouvez utiliser la propriété flex pour spécifier le pourcentage du remplissage des marges sur l’axe principal.

Le widget Expanded peut être utilisé pour afficher un contenu plus large que l’écran. Cela force simplement le contenu du widget à rester dans l’espace disponible.

Expanded avec le widget Column

Le widget Expanded est un widget de mise en page qui prend un seul widget enfant.

Parfois, il est nécessaire de remplir l’espace entre les widgets. Par exemple, lorsque vous travaillez avec une ligne ou une colonne et que vous utilisez MainAxisAlignment.spaceBetween, vous aurez un espace vide entre les widgets enfants. Donc, pour remplir l’espace disponible, nous avons besoin du widget Expanded.

Nous allons créer un widget Column contenant trois widget Container.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(debugShowCheckedModeBanner: false, home: MyHomePage());
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
            backgroundColor: Colors.lightGreen, title: Text("Le widget Expanded")),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(20.0),
              child: Text(
                "1",
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
              color: Colors.indigo,
            ),
            Container(
              padding: EdgeInsets.all(20.0),
              child: Text(
                "This is Expanded",
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
              color: Colors.purple,
            ),
            Container(
              padding: EdgeInsets.all(20.0),
              child: Text(
                "2",
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
              color: Colors.indigo,
            ),
          ],
        ));
  }
}

Sans le widget Expanded vous aurez ce qui suit :

Expanded

Maintenant, enveloppons chaque widget Container dans un widget Expanded. En fait, tous les widgets enfants vont s’étendre dans la direction de l’axe principal, qui est vertical dans ce cas.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(debugShowCheckedModeBanner: false, home: MyHomePage());
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
            backgroundColor: Colors.lightGreen,
            title: Text("Le widget Expanded")),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(
                child: Container(
              padding: EdgeInsets.all(20.0),
              child: Text(
                "Container du haut",
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
              color: Colors.indigo,
            )),
            Expanded(
                child: Container(
              padding: EdgeInsets.all(20.0),
              child: Text(
                "Container du milieu",
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
              color: Colors.red,
            )),
            Expanded(
                child: Container(
              padding: EdgeInsets.all(20.0),
              child: Text(
                "Container du bas",
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
              color: Colors.indigo,
            )),
          ],
        ));
  }
}

Le résultat est le suivant :

Expande

Nous allons à présent utiliser la propriété flex.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(debugShowCheckedModeBanner: false, home: MyHomePage());
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(backgroundColor: Colors.lightGreen, title: Text("Le widget Expanded")),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(
                flex: 1,
                child: Container(
                  padding: EdgeInsets.all(20.0),
                  child: Text(
                    "Container du haut",
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                  color: Colors.indigo,
                )),
            Expanded(
                flex: 3,
                child: Container(
                  padding: EdgeInsets.all(20.0),
                  child: Text(
                    "Container du milieu",
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                  color: Colors.red,
                )),
            Expanded(
                flex: 2,
                child: Container(
                  padding: EdgeInsets.all(20.0),
                  child: Text(
                    "Container du bas",
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                  color: Colors.indigo,
                )),
          ],
        ));
  }
}

Nous aurons un résultat un peut différent.

Expanded

Le principe ici est le suivant :

total_flex = 1+3+2 = 6

Par conséquent :

Container du haut occupera 1/6 de l’écran.

Container du milieu occupera 3/6 de l’écran.

Container du bas occupera 2/6 de l’écran.

Vous pouvez remplacez Container par Row dans les exemples précédents. C’est le même principe, mais en horizontal.

Le widget Expanded pour remplir les espaces

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Retour en haut