devstory

Le Tutoriel de Flutter EdgeInsets

View more Tutorials:

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

1- Flutter EdgeInsets

EdgeInsets permet de créer outer padding (le rembourrage extérieur) ou inner padding (le rembourrage intérieur) pour un Widget en fonction des paramètres visuels, left , top , right et bottom. Cela ne dépend pas de la direction du texte (text direction).
Pour supporter les dispositions left-to-right (de gauche à droite) et right-to-left (de droite à gauche), penser à utiliser EdgeInsetsDirectional.
  • TODO Link?

2- EdgeInsets.all

Le constructeur EdgeInsets.all est utilisé pour créer un objet EdgeInsets avec la même valeur pour les quatre propriétés left, top, right et bottom.

const EdgeInsets.all(
   double value
)
EdgeInsets.all (ex1)

Container (
    margin: EdgeInsets.all(80),
    color: Colors.greenAccent,
    child:Text(
        "Hi There!",
        style: TextStyle(fontSize: 28)
    )
)

3- EdgeInsets.fromLTRB

Le constructeur EdgeInsets.fromLTRB est utilisé pour créer un objet EdgeInsets basé sur les valeurs left, top, right et bottom.

const EdgeInsets.fromLTRB(
    double left,
    double top,
    double right,
    double bottom
)
EdgeInsets.fromLTRB (ex1)

Padding (
    padding: EdgeInsets.fromLTRB(80, 100, 70, 50),
    child: ElevatedButton (
        child: Text("Button"),
        onPressed: (){}
    )
)

4- EdgeInsets.only

Le constructeur EdgeInsets.only crée un objet EdgeInsets à partir des paramètres facultatifs left, top, right et bottom. Les paramètres non spécifiés auront la valeur de 0.

const EdgeInsets.only(
    {double left: 0.0,
    double top: 0.0,
    double right: 0.0,
    double bottom: 0.0}
)
EdgeInsets.only (ex1)

Container (
    color: Colors.greenAccent,
    padding: EdgeInsets.only(left: 120, top: 50, right: 80),
    child: ElevatedButton (
        child: Text("Button"),
        onPressed: (){}
    )
)

5- EdgeInsets.symmetric

Le constructeur EdgeInsets.symmetric crée un objet EdgeInsets symétrique à partir des deux paramètres horizontal et vertical. Il signifie que:
  • left = right = horizontal
  • top = bottom = vertical

const EdgeInsets.symmetric(
    {double vertical: 0.0,
    double horizontal: 0.0}
)
EdgeInsets.symmetric (ex1)

Container (
    color: Colors.greenAccent,
    padding: EdgeInsets.symmetric(horizontal: 120, vertical: 50),
    child: ElevatedButton (
        child: Text("Button"),
        onPressed: (){}
    )
)

6- EdgeInsets.fromWindowPadding


const EdgeInsets.fromWindowPadding(
    WindowPadding padding,
    double devicePixelRatio
)

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.