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

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

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
                      ],
                    ),
                  )

Here the example

Tags:

2

Answers


  1. 0

    if you can use your image from image assets then use this code in container decoration

      image: DecorationImage(image: AssetImage("Enter Your Image Path here")),

    if you don’t want to use AssetImage then here is the code —->

     Container(
            height: 100,
            width: Get.width,
            margin: const EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 20.0),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              border: Border.all(color: Colors.blue, width: 1),
              gradient: const LinearGradient(
                begin: Alignment.centerRight,
                end: Alignment.centerLeft,
                colors: [
                  Colors.black,
                  Colors.black87,
                  Colors.black54,
                  Colors.transparent,
                ],
              ),
            ),
            child: Row(
              children: [
                ClipRRect(
                  borderRadius:  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',
                    fit: BoxFit.fill,
                  ),
                ),
                // Future column
              ],
            ),
          )

    i have reduced the width of the container in this and use box fit . if you can use AssetsImage always use image in container decoration as i used in above code

    Login or Signup to reply.
  2. 0

    it is because of Border.all(color: Colors.blue, width: 3) that pushes the image. in my idea if you use Stack you can reach to your idea.

          Stack(
          children: [
            Container(
              height: 100,
              margin: const EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 20.0),
              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
                ],
              ),
            ),
            Container(
            height: 100,
            margin: const EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 20.0),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              border: Border.all(color: Colors.blue, width: 3),
              gradient: const LinearGradient(
                begin: Alignment.centerRight,
                end: Alignment.centerLeft,
                colors: [
                  Colors.black,
                  Colors.black87,
                  Colors.black54,
                  Colors.transparent,
                ],
              ),
            ),
      ),
          ],
        )

    enter image description here
    happy coding…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search