Le widget Container permet de modifier l’apparence et la mise en page. d’une application. En fait, il encapsule plusieurs widgets.
Lors de la création d’une application, la mise en page est une partie très importante. La création d’une mise en page dans Flutter permet de placer et de positionner des objets, tels que du texte et des boutons ou d’autres composants.
Si vous souhaitez ajouter une hauteur, une largeur, des marges, des bordures et des couleurs d’arrière-plan à un widget, vous utiliserez surement le widget Container.
En effet, il est utilisé par de nombreux widgets pour ajouter des propriétés de style.
Nous avons déjà vu le constructeur du widget Text. Voyons à présent à quoi ressemble le constructeur de la classe Container.
Container(
{Key? key,
AlignmentGeometry? alignment,
EdgeInsetsGeometry? padding,
Color? color,
Decoration? decoration,
Decoration? foregroundDecoration,
double? width,
double? height,
BoxConstraints? constraints,
EdgeInsetsGeometry? margin,
Matrix4? transform,
AlignmentGeometry? transformAlignment,
Widget? child,
Clip clipBehavior}
)Le widget Container dans flutter est un widget qui ne peut avoir qu’un seul widget enfant. De plus, il ne doit pas être utilisé directement sans widget parent. Par défaut, Container occupe toute la largeur et la hauteur du widget enfant donné.
La propriété child
La principale caractéristique de ce type de widget (avec un seul enfant) est qu’il possède une propriété child. Cette propriété est utilisée pour charger un enfant, qui à son tour peut charger d’autres widgets tels que Text, ListView, etc.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
centerTitle: true,
title: const Text('Le widget Container'),
),
body: Container(child: Text("La propriété child",
style: TextStyle(fontSize: 40)))));
}
}Les propriétés d’alignement
En utilisant le widget Container, nous pouvons ajuster la position du widget enfant à l’aide des propriétés d’alignement :
bottomCenter, en bas et au milieu.bottomLeft, c’est en bas à gauche.bottomRight, en bas à droite.center, au centre.centerLeft, c’est au centre à gauche.centerRight, au centre à droite.topCenter, en haut au centre.topLeft, c’est en haut à gauche.topRight, en haut à droite.
La propriété color dans le widget Container
La propriété Color vous donne la possibilité de donner une couleur à un widget particulier du widget Container. Voici les trois façons différentes pour le faire :
color : Colors.orangeAccent.color : color(0xFFFFFFFF).Color c = const Color.fromRGBO(66, 165, 245, 1.0).
RGBO signifie R = Rouge, G = Vert, B = Bleu, O = Opacité, ou chaque couleur correspond à un nombre.
La plupart des IDE vous permettent d’afficher les couleurs lorsque vous tapez Colors., ce qui vous donnera la possibilité de choisir.
Si vous souhaitez une couleur personnalisée, vous pouvez utiliser le code suivant :
color: Color(0xFF42A5F5);color: Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5);color: Color.fromARGB(255, 66, 165, 245);color: Color.fromRGBO(66, 165, 245, 1.0);La hauteur et la largeur
De plus, nous pouvons définir, la hauteur et la largeur du widget Container en utilisant les propriétés height pour la hauteur et width pour la largeur.
Les marges du widget Container – margin
La marge est utilisée pour créer une distance entre Container et les autres widgets. La propriété margin peut être appliquée aux 4 côtés de Container à l’aide de la fonction EdgeInsets.all().
Cependant, si vous souhaitez modifier la marge d’un seul côté, vous pouvez utiliser le code suivant :
margin: EdgeInsets.only(left: 20)Les marges intérieurs – padding
On les utilise pour ajouter une distance entre Container et le widget qu’il contient. Comme avec les marges, vous pouvez utiliser la fonction EdgeInsets.all() pour définir le padding sur les quatre côtés.
Les bordures du widget Container
La propriété border permet de connaître les limites de l’objet en cours de construction. Cette propriété contribue également à simplifier le processus de mise en page car elle sert de ligne directrice.
La propriété Transform
Elle sert à pivoter Container, en utilisant divers axes de rotation tels que X, Y et Z où nous utilisons la fonction Matrix4 pour effectuer la rotation.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
centerTitle: true,
title: const Text('Le widget Container'),
),
body: Container(
padding: EdgeInsets.all(20),
margin: EdgeInsets.all(20),
transform: Matrix4.rotationZ(0.1),
height: 200,
width: 200,
alignment: Alignment.bottomCenter,
color: Colors.purpleAccent,
child: Text("La propriété child",
style: TextStyle(color: Colors.white, fontSize: 40)))));
}
}
La propriété Decoration
Vous pouvez décorer Container avec divers effets de décoration, tels que changer la couleur de la bordure, fournir une image ou créer un effet d’ombre. Il existe de nombreux autres effets que vous pouvez ajouter avec decoration : BoxDecoration().
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
centerTitle: true,
title: const Text('Le widget Container'),
),
body: Container(
decoration: new BoxDecoration(
gradient: const LinearGradient(colors: [
Colors.lightBlue,
Colors.greenAccent,
Colors.purple
])),
height: 280,
width: 200,
margin: EdgeInsets.all(20))));
}
}
0 commentaire