I am trying to implement gridview with image and a text inside it. where i want text at the bottom of image with black background. Here is my code for ListItem
class ListItem extends StatelessWidget {
String url;
String name;
ListItem(this.url, this.name);
@override
Widget build(BuildContext context) {
return new Container(
child: new Column(
children: <Widget>[
new Image.network('${url}', fit: BoxFit.cover),
new Positioned(
child: new Container(
child: new Text('${name}',
style: new TextStyle(fontSize: 20.0, color: Colors.white)),
decoration: new BoxDecoration(color: Colors.black),
padding: new EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0)),
left: 0.0,
bottom: 108.0,
)
],
));
}
}
With this code it is showing error
Positioned widgets must be placed directly inside Stack widgets.
Positioned(no depth, dirty) has a Stack ancestor, but there are other widgets between them:
- Column(direction: vertical, mainAxisAlignment: start, crossAxisAlignment: center)
Issue was with Column
, after changing few lines from here and there i finally found that it was because of Column
Once i change Column
to Stack
, it works fine.
return new Container(
child: new Stack(