How remove white space between image border radius and it s parent container border radius

0 votes

I'm a beginner with Flutter and after test many solutions, I am blocked. I want to remove the space between my border container and his child image. Both have border radius. Below, my code snippet end the image. Thanks for your precious help.

    Container(
                    height: 100,
                    width: double.infinity * screenWidthRatio,
                    margin: const EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 20.0),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                      border: Border.all(color: blueColor, width: 3),
                      gradient: const LinearGradient(
                        begin: Alignment.centerRight,
                        end: Alignment.centerLeft,
                        colors: [
                          Colors.black,
                          Colors.black87,
                          Colors.black54,
                          Colors.transparent,
                        ],
                      ),
                    ),
                    child: Row(
                      children: [
                        ClipRRect(
                          borderRadius: const BorderRadius.only(
                              topLeft: Radius.circular(20),
                              bottomLeft: Radius.circular(20)),
                          child: Image.network(
                            'https://img.lemde.fr/2022/02/06/0/0/0/0/580/0/75/0/a8d87fe_5475999-01-06.jpg',
                          ),
                        ),
                        // Future column
                      ],
                    ),
                  )
Mar 14, 2023 in Android by anonymous
• 780 points
2,258 views

1 answer to this question.

0 votes

To remove the space between the border radius of the container and its child image, wrap the Image widget with a Container widget and apply the same borderRadius value as the parent Container. This creates a nested border radius effect that removes the space between the two.

answered Mar 18, 2023 by Tej

Related Questions In Android

0 votes
0 answers

What are the differences between C, C# and C++ in terms of real-world applications?

As I stated in an earlier article, ...READ MORE

Sep 20, 2022 in Android by Edureka
• 13,620 points
480 views
0 votes
0 answers

What is the difference between C# and .NET?

May I know what is the difference ...READ MORE

Sep 20, 2022 in Android by Edureka
• 13,620 points
392 views
0 votes
0 answers

How to get current time and date in Android?

How can I get the current time ...READ MORE

Nov 22, 2022 in Android by Edureka
• 12,690 points
521 views
0 votes
0 answers

How to put a border around an Android TextView?

Is it possible to draw a border ...READ MORE

Nov 23, 2022 in Android by Ashwini
• 5,430 points
826 views
0 votes
1 answer

What is the future of flutter?

Hi@MD, Flutter is a rather new cross-platform framework ...READ MORE

answered Jul 17, 2020 in Others by akhtar
• 38,260 points
1,165 views
0 votes
1 answer

What is Flutter?

Hi@akhtar, Flutter is an app SDK for building ...READ MORE

answered Jul 17, 2020 in Others by MD
• 95,460 points
1,474 views
0 votes
1 answer

How to install Flutter in Windows system?

Hi@akhtar, You can follow the below-given steps to ...READ MORE

answered Jul 17, 2020 in Others by MD
• 95,460 points
1,795 views
0 votes
1 answer

How can I add a border to a widget in Flutter?

To add a border to a widget ...READ MORE

answered Mar 1, 2023 in Android by vishalini
11,597 views
0 votes
1 answer

Create a rounded button / button with border-radius in Flutter

To create a rounded button with border-radius ...READ MORE

answered Mar 1, 2023 in Android by vishalini
31,810 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP