Question 80104 in Flutter Question posted in
The official Flutter documentation can be found here.

flutter image fit lefts space at left and right

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

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    Try using fit: BoxFit.fill

     Image.asset(
     "assets/images/circle.png",
     fit: BoxFit.fill,
     width: MediaQuery.of(context).size.width
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search