Jak sformatować kolor tła dla umieszczonego bloku tekstu?

Question

Mam umieszczony element Tekst, który znajduje się na górze elementu Obraz w stosie. Chciałbym zastosować prosty kolor tła do tego elementu tekstowego, tak, że ramki tekstu jak pudełko podpisem:

mogę to zrobić poprzez wstawienie pojemnika jak innego dziecka umieszczonego w tym stosie . Ale musiałbym przeliczyć szerokość za każdym razem, gdy zmienia się ciąg tekstowy, co jest nieoptymalne. Czy istnieje lepszy sposób?

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, 
    ) 
    ] 
); 

Answer 1

Wystarczy gniazdo element tekstowy jako dziecko ciągu pojemnika, który ma BoxDecoration (czyli koloru tła); Kontener rozciągnie się, aby dopasować Tekst do środka. Dodatkowo można określić dopełnienie dla tego kontenera, co eliminuje konieczność kodowania na sztywno szerokości/wysokości pudełka.

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, 
    ), 
    ] 
);