Want to format the background color for a positioned block of text? Just nest the Text element as a child within the Container that has the BoxDecoration the Container will stretch to fit the Text inside. Additionally, one can specify padding for that Container, which eliminates the need to hardcode a width/height for the box.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | 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, ), ] ); |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
