Positioned widgets must be placed directly inside Stack widgets

Question

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)

Solution 1

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(

Solution 2

We were just discussing this yesterday. Positioned can actually be used in more than just a Stack, so the docs aren't exactly right about that. It can't be used in anything that renders, and the docs are very specific about RenderObjectWidget:

"A Positioned widget must be a descendant of a Stack, and the path from the Positioned widget to its enclosing Stack must contain only StatelessWidgets or StatefulWidgets (not other kinds of widgets, like RenderObjectWidgets).

Source: https://docs.flutter.io/flutter/widgets/Positioned-class.html

Column is descended from RenderObjectWidget: ... Widget > RenderObjectWidget > MultiChildRenderObjectWidget > Flex > Column

Most people starting out in Flutter are only aware of StatelessWidget and StatefulWidget, but there are others and knowing them can be very important at times.

Widget:
     StatefulWidget
     StatelessWidget
     RenderObjectWidget
     ProxyWidget
     PreferredSizeWidget

More at: https://docs.flutter.io/flutter/widgets/Widget-class.html