Home > Net >  flutter image fit lefts space at left and right
flutter image fit lefts space at left and right

Time:11-19

I have a question about images in a flutter. I have a Column and inside of it I have an image, I need to stretch it at full width but I could not. There are a few spaces left on the left and right for the white circle at the end of the screen. Where is the wrong statement in my code?

Thanks,

home: Scaffold(
    backgroundColor: HexColor(primary),
    body: SafeArea(
      bottom: false,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          // Header text & Pawline image
          Row(
            ...
          ),
          // Banner image
          Row(...
          ),
          // Circle
          // TODO: Stretch circle image to the both ends
          Expanded(
            child: Image.asset(
              "assets/images/circle.png",
              fit: BoxFit.contain,
            ),
          ),
        ],
      ),
    ),
  ),
);

enter image description here

Edit: Circle image:

enter image description here

CodePudding user response:

Try using fit: BoxFit.fill

 Image.asset(
     "assets/images/circle.png",
     fit: BoxFit.fill,
     width: MediaQuery.of(context).size.width

CodePudding user response:

you are setting an image with specific sized to smaller size, this is cause your issue. try remove the Expanded widget and set Image's fit to fitWidth and wrap other part of widget with Expanded, like Banner image, to avoid RenderFlex overflowed issue.

  • Related