Flutter Widget of the Day: Container

Nde Dilan

Bienvenue dans notre série "Flutter Widget of the Day" ! Aujourd'hui, nous continuons avec l'un des widgets les plus fondamentaux et polyvalents de Flutter : le Container. Que vous soyez débutant ou expérimenté, le Container est un élément de base essentiel dans la construction de vos interfaces utilisateur.

Qu'est-ce qu'un Container ?

Le Container est un widget polyvalent qui peut être utilisé pour créer une boîte rectangulaire avec une variété de propriétés de personnalisation. Il peut contenir un seul widget enfant(child) et est souvent utilisé pour ajouter du padding, des marges, des bordures, une décoration et plus encore.

Utilisation dans Columns et Rows

Le Container est souvent utilisé à l'intérieur des widgets Column et Row(lignes) pour organiser les éléments de manière verticale ou horizontale respectivement. Voici quelques exemples montrant comment le Container peut être utilisé avec ces widgets :

Exemple de Container dans une Column

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Container in Column Example')),
        body:
//Début de notre Column
 Column(
          children: [
            Container(
              color: Colors.red,
              padding: EdgeInsets.all(16.0),
              margin: EdgeInsets.only(bottom: 10.0),
              child: Text('First Container'),
            ),
            Container(
              color: Colors.green,
              padding: EdgeInsets.all(16.0),
              margin: EdgeInsets.only(bottom: 10.0),
              child: Text('Second Container'),
            ),
            Container(
              color: Colors.blue,
              padding: EdgeInsets.all(16.0),
              margin: EdgeInsets.only(bottom: 10.0),
              child: Text('Third Container'),
            ),
          ],
        ),

//Fin de notre Column
      ),
    );
  }
}

Exemple de Container dans une Row

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Container in Row Example')),
        body: Row(
          children: [
            Container(
              color: Colors.red,
              padding: EdgeInsets.all(16.0),
              margin: EdgeInsets.only(right: 10.0),
              child: Text('First Container'),
            ),
            Container(
              color: Colors.green,
              padding: EdgeInsets.all(16.0),
              margin: EdgeInsets.only(right: 10.0),
              child: Text('Second Container'),
            ),
            Container(
              color: Colors.blue,
              padding: EdgeInsets.all(16.0),
              margin: EdgeInsets.only(right: 10.0),
              child: Text('Third Container'),
            ),
          ],
        ),
      ),
    );
  }
}

Propriétés Utilisées

Voici quelques-unes des propriétés du Container que nous avons utilisées dans les exemples ci-dessus :

• color: Définit la couleur de fond du Container.
• padding: Ajoute de l'espace à l'intérieur du Container, autour de son enfant.
• margin: Ajoute de l'espace à l'extérieur du Container.
• child: Le widget contenu à l'intérieur du Container.

Ces propriétés vous permettent de créer des interfaces visuellement agréables et bien organisées.

Conclusion

Le Container est un élément de base essentiel pour la mise en page dans Flutter. Que vous l'utilisiez dans une Column ou une Row, il offre une flexibilité incroyable pour personnaliser l'apparence et la disposition de vos widgets.

Restez à l'écoute pour plus de widgets Flutter dans notre série "Flutter Widget of the Day" !

Vous avez des questions ou des suggestions pour le prochain widget ? Faites-le nous savoir dans les commentaires ! 🛠✨

#Flutter #WidgetOfTheDay #FlutterDev #MobileDevelopment

4o