How to design this to be responsive on Flutter

Question

What is the best practice to design this in Flutter and to be responsive on all devices.enter image description here

I am trying to design it but I don't get it as expected, not responsive on all devices

Answer 1

Try below code, hope its help to you.just change your images with my image refer layout

  Column(
          children: [
            Card(
              color: Colors.white,
              elevation: 5,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              child: Container(
                margin: const EdgeInsets.all(10),
                width: 350,
                child: Column(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Container(
                          padding: const EdgeInsets.all(10),
                          height: 220,
                          width: 230,
                          decoration: BoxDecoration(
                            color: Colors.blue.shade200,
                            borderRadius: BorderRadius.circular(20),
                          ),
                          child: Image.network(
                              'https://img.icons8.com/ios/500/flutter.png'),
                        ),
                        Column(
                          children: [
                            Container(
                              padding: const EdgeInsets.all(10),
                              margin: const EdgeInsets.only(left: 10),
                              height: 100,
                              width: 110,
                              decoration: BoxDecoration(
                                color: Colors.blue.shade200,
                                borderRadius: BorderRadius.circular(20),
                              ),
                              child: Image.network(
                                  'https://img.icons8.com/ios/500/flutter.png'),
                            ),
                            Container(
                              padding: const EdgeInsets.all(10),
                              margin: const EdgeInsets.only(left: 10, top: 15),
                              height: 100,
                              width: 110,
                              decoration: BoxDecoration(
                                color: Colors.blue.shade200,
                                borderRadius: BorderRadius.circular(20),
                              ),
                              child: Image.network(
                                  'https://img.icons8.com/ios/500/flutter.png'),
                            ),
                          ],
                        ),
                      ],
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Container(
                          padding: const EdgeInsets.all(10),
                          margin: const EdgeInsets.only(top: 10),
                          height: 100,
                          width: 110,
                          decoration: BoxDecoration(
                            color: Colors.blue.shade200,
                            borderRadius: BorderRadius.circular(20),
                          ),
                          child: Image.network(
                              'https://img.icons8.com/ios/500/flutter.png'),
                        ),
                        Container(
                          padding: const EdgeInsets.all(10),
                          margin: const EdgeInsets.only(top: 10),
                          height: 100,
                          width: 110,
                          decoration: BoxDecoration(
                            color: Colors.blue.shade200,
                            borderRadius: BorderRadius.circular(20),
                          ),
                          child: Image.network(
                              'https://img.icons8.com/ios/500/flutter.png'),
                        ),
                        Container(
                          padding: const EdgeInsets.all(10),
                          margin: const EdgeInsets.only(top: 10),
                          height: 100,
                          width: 110,
                          decoration: BoxDecoration(
                            color: Colors.blue.shade200,
                            borderRadius: BorderRadius.circular(20),
                          ),
                          child: Image.network(
                              'https://img.icons8.com/ios/500/flutter.png'),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),

Result->