devstory

Le Tutoriel de Flutter Positioned

View more Tutorials:

1- Positioned

Le widget Positioned est utilisé pour positionner un widget enfant d'une Stack.
Positioned est uniquement utilisé comme widget enfant direct (ou descendant) de Stack. Sur le chemin de Positioned à Stack, il ne comprend que les widgets StatelessWidget ou StatefulWidget, les autres widgets ne sont pas autorisés (par exemple RenderObjectWidget).
Positioned constructor
const Positioned(
    {Key key,
    double left,
    double top,
    double right,
    double bottom,
    double width,
    double height,
    @required Widget child}
)
Par exemple:
(ex1)
SizedBox (
    width: double.infinity,
    height: double.infinity,
    child: Stack(
      alignment: Alignment.centerLeft,
      children: <Widget>[
        Positioned (
           left: 100,
          top: 70,
          child: Container(
            width: 200,
            height: 100,
            color: Colors.green,
          ),
        )
      ],
    )
)
La taille de Positioned et de son enfant est toujours la même.
Observer cet exemple: Un Positioned avec un top et un bottom non null force la hauteur du widget enfant à changer pour s'adapter à cette contrainte.
(ex2)
SizedBox (
    width: double.infinity,
    height: double.infinity,
    child: Stack(
      alignment: Alignment.centerLeft,
      children: <Widget>[
        Positioned (
          top: 100,
          bottom: 70,
          child: Container (
            width: 200,
            height: 30, // !!
            color: Colors.green,
          ),
        )
      ],
    )
)
Si les trois paramètres left, right et width sont null, la propriété Stack.alignment sera utilisée pour positionner le widget enfant horizontalement. De même, si les trois paramètres top, bottom et height sont null, la propriété Stack.alignment sera utilisée pour positionner le widget enfant verticalement.

2- Positioned.directional constructor

Positioned.directional est utilisé pour créer un Positioned basé sur la direction du texte.
Positioned.directional constructor
Positioned.directional(
  {Key key,
  @required TextDirection textDirection,
  double start,
  double top,
  double end,
  double bottom,
  double width,
  double height,
  @required Widget child}
)
Le paramètre textDirection est obligatoire et non null. Il accepte la valeur TextDirection.ltr (Left to Right) (de gauche à droite) ou TextDirection.rtl (Right to Left) (de droite à gauche).
Si textDirection vaut TextDirection.ltr, les paramètres (start, end) correspondront à (left, right). Sinon (start, end) correspondra à (right, left).

3- Positioned.fill constructor

Positioned.fill est un constructeur avec des paramètres left, right, top et bottom ayant les valeurs par défaut de 0.
Positioned.fill constructor
const Positioned.fill(
  {Key key,
  double left: 0.0,
  double top: 0.0,
  double right: 0.0,
  double bottom: 0.0,
  @required Widget child}
)

4- Positioned.fromRect constructor

Positioned.fromRect crée un objet Positioned avec les valeurs affectées par l'objet Rect.
Positioned.fromRect constructor
Positioned.fromRect(
  {Key key,
  Rect rect,
  @required Widget child}
)
  • TODO Link!

5- Positioned.fromRelativeRect constructor

Positioned.fromRelativeRect crée un objet Positioned avec les valeurs affectées par l'objet object RelativeRect.
Positioned.fromRelativeRect constructor
Positioned.fromRelativeRect(
  {Key key,
  RelativeRect rect,
  @required Widget child}
)
  • TODO Link!

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.