Search code examples
flutterimageflutter-layoutcontainers

How to have a container fit it's child flutter


I'm trying to replicate a feature I like in twitter.

example 1

example 2

example 3

As you can see from the images above Twitter images are always the exact same width but the height are in respect to the image. I have been able to semi replicate this idea using BoxFit.contain but the Container doesn't fit the image.

What I have implemented]

What I have implemented

Container(
  width: 290.0,
  // height: 400,
  constraints: const BoxConstraints(
    maxHeight: 350,
    minHeight: 150,
  ),
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: BorderRadius.circular(27.5),
    image: DecorationImage(
      image: AssetImage(image[itemIndex]),
      fit: BoxFit.fitWidth,
    ),
    boxShadow: const [
      BoxShadow(
        color: Color(0x80000000),
        offset: Offset(0, 2.5),
        blurRadius: 5,
      ),
    ],
  ),
),

I tried a FittedBox with no luck. I attempted a FractionallySizedBox but kept on getting an error! If anybody could lead me in the right direction I would appreciate it!


Solution

  • This is the config that worked for me. It's a combo of the 2.

    ClipRRect(
                                        borderRadius:
                                            BorderRadius.circular(27.5),
                                        child: Container(
                                          //width: 290.0,
                                          constraints: const BoxConstraints(
                                            maxHeight: 350,
                                            minHeight: 150,
                                          ),
                                          decoration: const BoxDecoration(
                                            color: Colors.red,
    
                                            /*image: DecorationImage(
                                              
                                              image: AssetImage(image[itemIndex]),
                                              
                                              fit: BoxFit.cover,
                                            ),*/
                                            boxShadow: [
                                              BoxShadow(
                                                color: Color(0x80000000),
                                                offset: Offset(0, 2.5),
                                                blurRadius: 5,
                                              ),
                                            ],
                                          ),
                                          child: Image.asset(
                                            image[itemIndex],
                                            width: 290,
                                            fit: BoxFit.cover,
                                          ),
                                        ),
                                      ),