SizedBox est défini comme une boite utile lorsque vous avez un objet avec une largeur et une hauteur connues et que vous voulez l’afficher directement à l’écran. Donc, Flutter utilise SizedBox pour créer rapidement un widget avec des dimensions spécifiés à l’avance.

En fait, le widget SizedBox est une boîte transparente dont vous ne pouvez pas définir le style (par exemple, la couleur d’arrière-plan, la marge, le remplissage, etc.).

Donc, le widget n’est utilisé que pour dimensionner le widget passé en tant qu’enfant. Vous pouvez utiliser ce widget pour créer une zone vide en définissant uniquement les propriétés width et/ou height.

De plus, s’il n’a pas d’enfant et que la largeur ou la hauteur sont nulles, le widget essaie d’être aussi grand que son parent le permet.

Vous pouvez utiliser le widget SizedBox pour imposer à ses widgets enfants d’avoir une largeur et une hauteur définies. Sachez également que ce widget ne peut prendre qu’un seul widget enfant.

Afin de rendre la largeur et la hauteur plus efficaces, utilisez le widget Center comme contrainte, ajoutez un container, puis spécifiez la couleur pour voir l’effet.

body: Center(
        child: SizedBox(
          child: Container(
            height: 100,
            width: 100,
            color: Colors.lime,
          ),
        ),
      ),

Il est principalement utilisé pour ajuster l’espacement entre les widgets lors de l’utilisation de Column. Vous pouvez le faire avec du padding ou autre chose, mais c’est plus simple car vous n’avez besoin de saisir la hauteur que dans SizedBox.

Les propriétés du widget SizedBox

Les propriétés sont facultatives.

child : cette propriété prend un widget enfant comme objet pour l’afficher dans SizedBox dans l’arborescence des widgets ou à l’intérieur de SizedBox à l’écran.
height : une propriété qui spécifie la hauteur de SizeBox en pixels. C’est une valeur double.
width : cette propriété contient également une valeur double en tant qu’objet pour donner de la largeur à SizedBox .

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SizedBox'),
      ),
      body: Center(
        child: SizedBox(
          height: 100,
          width: 100,
          child: RaisedButton(
            color: Colors.blue,
            child: Text(
              'SizedBox',
              style: TextStyle(
                color: Colors.white,
              ),
            ),
            onPressed: () {},
          ),
        ),
      ),
    );
  }
}
SizedBox

Dans de nombreux cas, vous savez exactement combien d’espace (largeur et hauteur) un certain widget doit prendre dans votre application. par exemple si vous voulez lui donner une largeur et une hauteur fixes ou n’importe laquelle de ces propriétés.

Catégories : Flutter

0 commentaire

Laisser un commentaire

Emplacement de l’avatar

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *