How to resize the width of the image in flutter?

Question

Hello! The width of the image is same as the width of the phone screen. What's the problem and how can I reduce the size of the width? Thank you!

class _SignupProfileImageState extends State<SignupProfileImage> {
  bool isUploadImage = false;
  var selectedImage;

  @override
  Widget build(BuildContext context) {
    return Positioned(
        top: 140,
        right: 0,
        left: 0,
        child: SizedBox(
          height: 100,
          width: 100,
          child: Stack(
            clipBehavior: Clip.none,
            fit: StackFit.expand,
            children: [
              Container(
      width: 50,
      child: ClipOval(
        child: Image.asset(
          'assets/face.jpg',
          height: 50.0,
          width: 50.0,
          fit: BoxFit.fill              
            ],
          ),
        )
    );
  }
}

Solution

You can use CircleAvatar instead of ClipOval like below and it will be a better choice.

CircleAvatar class you can check

Container(
  width: 50,
  child: CircleAvatar(
    backgroundColor: Colors.transparent,
    radius: 90.0,
    child: Image.asset(
      "assets/face.jpg",
      height: 50.0,
      width: 50.0,
      fit: BoxFit.fill
    ),
  )
)

Comments

[Paweł]

You set positioned right and left, so image is streetch to full width, remove it and check what happend :)

[황희윤]

Thank you for your advice. However, if I remove it, then I can't put the image in center :( I wrapped the image with Center widget, but didn't work. How can I fix this problem?

[rasityilmaz]

try BoxFit.contain

[황희윤]

I just tried it now and the image is in the squared box not circled box

[Paweł]

put it to the row?