devstory

Le Tutoriel de Flutter Container

View more Tutorials:

Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles. Facebook

1- Flutter Container

Dans Flutter, Container est une boîte utilisée pour contenir un widget enfant. En même temps, il est possible de définir son style grâce à des propriétés telles que padding, margin, alignment, etc. Container surligne le contenu ou le sépare des autres.
Container Constructor:
Container Constructor

Container(
    {Key key,
    AlignmentGeometry alignment,
    EdgeInsetsGeometry padding,
    Color color,
    Decoration decoration,
    Decoration foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    EdgeInsetsGeometry margin,
    Matrix4 transform,
    Widget child,
    Clip clipBehavior: Clip.none}
)
Il y a beaucoup de paramètres impliqués dans la création de Container, tels que width, height, child, alignment, etc. En plus, il est influencé par les contraintes du widget parent, donc le comportement de mise en page est relativement complexe. Observer certains exemples ci-dessous:
Case 1:
Si les paramètres de width et height sont précisés, et si le widget parent est limité (bounded), Container déterminera sa taille en fonction des paramètres fournis.
Par exemple, si un Container précisé (width, height)=(200,200) est l'enfant d'un objet Center, sa taille sera de 200x200.

Center (
  child:  Container (
      color: Colors.greenAccent[100],
      padding: EdgeInsets.fromLTRB(10, 5, 50, 5),
      width: 200,
      height: 200
  )
)
Case 2:
Si les paramètres child, width, height, constraints ne sont pas précisés (ou null) et si le widget parent est illimité (unbounded), Container essaiera de déterminer sa taille aussi petite que possible.
Prenons un exemple: un Container avec des paramètres width, height, child, constraints non précisés, et est un enfant d'une Row, il essaiera de déterminer sa taille horizontale aussi petite que possible.
Remarque: Row est un widget délimité verticalement mais illimité (unbounded) horizontalement.

Row (
    children: [
      Container (
        color: Colors.greenAccent[100],
        padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
        margin: EdgeInsets.fromLTRB(30, 55, 50, 70),
      )
    ]
)
Case 3:
Si les paramètres child, width, height, constraints ne sont pas précisés (ou null) et si le widget parent est limité (bounded), Container essaiera de définir sa taille aussi grande que possible.
Exemple: Un Container avec des paramètres child, width, height, constraints non précisés, et est un enfant d'un Center, la taille de Container sera aussi grande que possible.

Center (
    child:   Container (
      color: Colors.greenAccent[100],
      padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
      margin: EdgeInsets.fromLTRB(30, 55, 50, 70)
    )
)
Case 4:
Si child est spécifié, mais les paramètres width, height, constraints et alignment non précisés, Container sera aussi petit que possible et se conformera aux contraintes du widget parent.
Par exemple:

Center (
    child: Container (
        color: Colors.greenAccent[100],
        padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
        margin: EdgeInsets.fromLTRB(30, 55, 50, 70),
        child: ElevatedButton (
          child: Text("Button"),
          onPressed: () {},
        )
    )
)
Par exemple:

ConstrainedBox (
    constraints: BoxConstraints (
        maxWidth: 300,
        maxHeight: 200
    ),
    child: Container (
        color: Colors.greenAccent[100],
        padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
        margin: EdgeInsets.fromLTRB(30, 55, 50, 70),
        child: ElevatedButton (
          child: Text("Button"),
          onPressed: () {},
        )
    )
)
Case 5:
Si child et alignment sont précisé, mais les paramètres width, height, constraints ne le sont pas, Container sera aussi grand que possible.
Voir plus d'exemple dans la section alignment ci-dessous.

2- alignment

La propriété alignment est utilisée pour aligner la position de child à l'intérieur de Container.

AlignmentGeometry alignment
Si Container précise child, et ne précise pas width, height, constraints et alignment, il définira sa dimension aussi petite que possible. Cependant, si Container précise child et alignment mais ne précise pas width, height, constraints, il déterminera sa taille aussi grande que possible.

Container (
    alignment: Alignment.bottomRight,
    color: Colors.greenAccent[100],
    padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
    margin: EdgeInsets.fromLTRB(30, 55, 50, 70),
    child: ElevatedButton (
      child: Text("Button"),
      onPressed: () {},
    )
)
  • TODO Link?

3- padding

La propriété padding est utilisée pour créer un espace vide à l'intérieur de Container et autour de child (s'i ce dernier existe).

EdgeInsetsGeometry padding

4- color

La propriété color est utilisée pour définir la couleur de l'arrière-plan de Container, et derrière child.

Color color

5- decoration

La propriété decoration est utilisée pour dessiner quelque chose sur l'arrière-plan de Container et derrière child. Si vous voulez dessiner une couleur sur l'arrière-plan de Container (et derrière child), il vaut mieux d'utiliser la propriété color.

Decoration decoration

Container (
    alignment: Alignment.center,
    decoration: BoxDecoration(
      color: const Color(0xff7c94b6),
      image: const DecorationImage(
        image: NetworkImage('https://s3.o7planning.com/images/tom-and-jerry.png'),
        fit: BoxFit.cover,
      ),
      border: Border.all( color: Colors.black, width: 8),
      borderRadius: BorderRadius.circular(12),
    ),
    margin: EdgeInsets.all(30),
    child: ElevatedButton(
        child: Text("I am a Long Button"),
        onPressed: () {}
    )
)
  • TODO Link?

6- foregroundDecoration

La propriété foregroundDecoration est utilisée pour dessiner quelque chose sur l'arrière-plan de Container et devant child. Elle peut couvrir et rendre child invisible, cependant, vous pouvez toujours interragir avec child.

Decoration foregroundDecoration
Par exemple:

Container (
    alignment: Alignment.center,
    foregroundDecoration: BoxDecoration(
      image: const DecorationImage(
        image: NetworkImage('https://s3.o7planning.com/images/smile-64.png'),
        fit: BoxFit.none,
      ),
      border: Border.all( color: Colors.black, width: 8),
      borderRadius: BorderRadius.circular(12),
    ),
    margin: EdgeInsets.all(30),
    child: ElevatedButton(
        child: Text("I am a Long Button"),
        onPressed: () {}
    )
)

7- width


double width

8- height


double height

9- constraints

La propriété constraints est utilisée pour ajouter des contraintes supplémentaires à Container.

BoxConstraints constraints
Par exemple:

Container (
    color: Colors.greenAccent[100],
    padding: EdgeInsets.all(30),
    width: 200,
    height: 200,
    constraints: BoxConstraints(
        maxHeight: 80
    ),
    child:ElevatedButton(
      child: Text("Button"),
      onPressed: (){},
    )
)
  • TODO Link?

10- margin

La propriété margin est utilisée pour créer un espace vide autour de Container.

EdgeInsetsGeometry margin

11- transform


Matrix4 transform

12- child


Widget child

13- clipBehavior


Clip clipBehavior: Clip.none

View more Tutorials:

Peut-être que vous êtes intéressé

Voici des leçons en ligne à part du site web o7planning que nous recommandons. La liste comprend des leçons en ligne et celles en promo.