Flutter image container, images next to each other

Question

I'm trying to make a home page and create this image container, of three images next to each other. I tried doing it like this:

Container(
     height: 100.0,
     width: 150.0,
     child: Row(
         children:[
             Image(image: AssetImage('')),
         Column(
         children:[
             Image(image: AssetImage('')), 
             Image(image: AssetImage('')), 
             ],
            ),
          ],
        ), 
      ),

what I get looks like this

while what I want is this

Although the results are nothing like this. Any ideas on how to recreate my figma image?

Solution

On your Image widget, provide height and weight and also use fit: BoxFit.cover, for better view, then it will be good to go.

Your fine Container will be

 Container(
              height: 100.0,
              width: 150.0 + 4, //for padding
              color: Colors.green,
              child: Row(
                children: [
                  Padding(
                    // for rounded border
                    padding: const EdgeInsets.only(right: 2.0),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(12),
                      child: const Image(
                        image: AssetImage('assets/images/p7_image_asset.jpeg'),
                        width: 150 / 2,
                        height: 100.0,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  Column(
                    children: [
                      Padding(
                        // space between items
                        padding: const EdgeInsets.only(left: 2.0, bottom: 2),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(12),
                          child: Image(
                            image:
                                AssetImage('assets/images/p8_image_asset.jpeg'),
                            fit: BoxFit.cover,
                            height: 100 / 2 - 2, //-2 for padding
                            width: 150 / 2,
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(left: 2.0, top: 2),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(12),
                          child: Image(
                            image:
                                AssetImage('assets/images/p9_image_asset.jpeg'),
                            fit: BoxFit.cover,
                            height: 100 / 2 - 2, //-2 for padding
                            width: 150 / 2,
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),

I will encourage to go flutter.dev and learn about these widgets. If you are wanting GridView checkflutter_staggered_grid_view

Comments

[tomerpacific]

Please don't share your code as an image. If you would like the community's help, edit your question with the a snippet of code that illustrates what you are trying to do, what you see happening now and what you would like to happen.

[Elena Soteriou]

im sorry, first time asking a question here that requests a code and i have no idea how to add it in a code form.

[Elena Soteriou]

thank you, that works. and also flutter_staggered_grid_view works pretty well too.

[Yeasin Sheikh]

yes use that only if you needed for GridView. also for inner text check stack widget