web-dev-qa-db-fra.com

Comment formater la couleur d'arrière-plan d'un bloc de texte positionné?

J'ai un élément Text positionné qui se trouve au-dessus d'un élément Image dans une pile. Je voudrais appliquer une couleur d'arrière-plan simple à cet élément Text, afin qu'il encadre le texte comme une zone de légende:

desired output

Je peux le faire en insérant un conteneur comme un autre enfant positionné dans cette pile. Mais je devrais recalculer la largeur à chaque fois que la chaîne de texte change, ce qui n'est pas optimal. Y a-t-il une meilleure façon?

one poor approach

var stack = new Stack(
  children: <Widget>[
    new Image.asset ( // background photo
      "assets/texture.jpg",
      fit: ImageFit.cover,
      height: 600.0,
    ),
    new Positioned ( // headline
      child: new Container(
        decoration: new BoxDecoration (
          backgroundColor: Colors.black
        ),
      ),
      left: 0.0,
      bottom: 108.0,
      width: 490.0,
      height: 80.0,
    ),
    new Positioned (
      child: new Text (
        "Lorem ipsum dolor.",
        style: new TextStyle(
          color: Colors.blue[500],
          fontSize: 42.0,
          fontWeight: FontWeight.w900
        )
      ),
      left: 16.0,
      bottom: 128.0,
    )
  ]
);
dartflutter
13
bkobash

Imbriquez simplement l'élément Text en tant qu'enfant dans le conteneur qui a la BoxDecoration (c'est-à-dire la couleur d'arrière-plan); le conteneur s'étirera pour s'adapter au texte à l'intérieur. De plus, on peut spécifier un rembourrage pour ce conteneur, ce qui élimine la nécessité de coder en dur une largeur/hauteur pour la boîte.

var stack = new Stack(
  children: <Widget>[
    new Image.asset ( // background photo
      "assets/texture.jpg",
      fit: ImageFit.cover,
      height: 600.0,
    ),
    new Positioned ( // headline
      child: new Container(
        child: new Text (
          "Lorem ipsum dolor.",
          style: new TextStyle(
            color: Colors.blue[500],
            fontSize: 42.0,
            fontWeight: FontWeight.w900
          )
        ),
        decoration: new BoxDecoration (
          backgroundColor: Colors.black
        ),
        padding: new EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0),
      ),
      left: 0.0,
      bottom: 108.0,
    ),
  ]
);
13
bkobash

Depuis Flutter 0.10.3 a changé BoxDecoration. backgroundColor: n'est plus une propriété valide. C'est maintenant la couleur :.

5
James A. White