DecorationImage/Image as Child going outside of Container?

Question

I have tried these 1. DecorationImage 2. Image 3. CircleAvatar

I have used Stack as there will be a background image. But I am not able to understand why the image is expanding like that.

I need a circular image for the profile pic.

If I use Column instead of ListView then the images doesn't expand like this ...but I need a ListView.

The code:-

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          ListView(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  height: 80.0,
                  width: 80.0,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    image: new DecorationImage(
                      image: AssetImage(Assets.cool),
                      fit: BoxFit.cover,
                    ),
                    color: Colors.red,
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  height: 50.0,
                  width: 50.0,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                  ),
                  child: Image(
                    image: AssetImage(Assets.cool),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: CircleAvatar(
                  radius: 50.0,
                  backgroundImage: AssetImage(Assets.cool),
                ),
              )
            ],
          )
        ],
      ),
    );
  }

Answer 1

To get a circular image, Just wrap all your widget of ListView in a Column widget and place the Column in ListView. You'll get a scrollable column.

ListView(
    children: <Widget>[
      Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              height: 80.0,
              width: 80.0,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                image: new DecorationImage(
                  image: AssetImage(Assets.cool),
                  fit: BoxFit.cover,
                ),
                color: Colors.red,
              ),
            ),
          ),
          //.....
        ],
      )
    ],
  ),s

Answer 2

From my understanding you want the image in a circle not a ellipse. You can achieve that by wrapping the items in your listview with a Row element.

return Scaffold(
  body: Stack(
    children: <Widget>[
      ListView(
        children: <Widget>[
          // Wrap with a row
          Row(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  height: 80.0,
                  width: 80.0,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    image: new DecorationImage(
                      image: AssetImage("a.jpg"),
                      fit: BoxFit.cover,
                    ),
                    color: Colors.red,
                  ),
                ),
              ),
              //...
            ],
          ),
        ],
      )
    ],
  ),
);