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

Trouble with BoxFit while trying to fit an Image to a Stack – Flutter

I am currently facing a problem with trying to fit an Image asset into a Stack widget in Flutter. I am using the BoxFit.cover property to make the image fit the Stack’s dimensions, but unfortunately, it’s not working as expected.

Here’s the code snippet that I’m working with:

Stack(
    alignment: AlignmentDirectional.bottomCenter,
    children: [
      Image.asset(
        onboardingContents[index].image,
        fit: BoxFit.cover,
      ),
      Padding(
        padding: EdgeInsets.all(32.0),
        child: GestureDetector(
          onTap: () => controller.nextPage(
              duration: Duration(milliseconds: 500),
              curve: Curves.easeIn),
          child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(50), color: Colors.white),
            height: sizeV * 6,
            width: sizeH * 60,
            child: const Center(
              child: Text(
                'Next',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
            ),
          ),
        ),
      )
    ],
  );
Tags:

2

Answers


  1. 0

    You set alignment in your Stack. That means an Image should be aligned to bottom center if it’s smaller than a screen. Remove alignment. If you need to align your container, do it separately.

    Login or Signup to reply.
  2. 0

    first thing your image is behind the container, to bring it to front you should write it below your container,then in order to make image fit the container, you should use positioned.fill()

    Stack(
    children:[
    //container(),
    Positioned.fill(child:Image()),
])
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search