CODEWITHSUNDEEP
imageflutterassets
Shammah
Shammah

Reputation: 87

How to center a not centered png file inside a container in flutter?

Hello I have an app where I want to put the female image {X/Y image at the top is not part of the female pic, it's a separate widget} in the bottom center of the app. However, as I was using the image.asset the image is not centered. How to manually center the image without cropping the image itself?

Here is my code:

Container(
        child: Center(
          child: Image.asset(
            'assets/images/XYicon1.png',
            fit: BoxFit.fitHeight,
            height: 250,
            width: SizeConfig.screenWidth,
          ),
        ),
      ),

Here is my output and the not centered image itself (2nd pic)

enter image description here

enter image description here

Upvotes: 0

Views: 359

Answers (1)

Jim
Jim

Reputation: 7601

Use Stack to fine tune the position of you widget:

Stack(
  children:[
    Container(
        child: Center(
          child: Image.asset(
            'assets/images/XYicon1.png',
            fit: BoxFit.fitHeight,
            height: 250,
            width: SizeConfig.screenWidth,
          ),
        ),
      ),
    Positioned(
      bottom: 0,
      left: -50,
      child: Image.asset(
            'assets/images/2nd.png',
            fit: BoxFit.fitHeight,
            height: 250,
            width: SizeConfig.screenWidth,
          ),
    ),
  ],
),

Upvotes: 1

Related Questions