配置されたテキストブロックの背景色をフォーマットするにはどうすればよいですか？

Question

私はStackのImage要素の上に置かれた配置されたText要素を持っています。私はそのスタック内の別の位置の子としてコンテナを挿入することにより、これを行うことができ

：それはキャプションボックスのようなテキストフレームように私は、そのテキスト要素に、単純な背景色を適用したいのですが。しかし、テキストの文字列が変わるたびに幅を再計算する必要があります。これは準最適です。より良い方法がありますか？

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

だけネスト子 BoxDecoration（すなわち背景色）を有する容器内にテキスト要素とコンテナはテキストを内側に収めるように伸びます。さらに、そのコンテナのパディングを指定することができます。これにより、ボックスの幅/高さをハードコードする必要がなくなります。

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