Rounded corners Image inside PageView keeping ratio Flutter

Question

I have a PageView with images list inside. I want to keep the image ratio and set a rounded corners to them.

Usually I had no problem to clip image inside simple list or single image.

But in this case, the ClipRRect is not wrapping the image and when I'm setting size to red Container nothing happened.

Result :

Code :

double maxiHeight = 250;
  List<Widget> postList = [];

  @override
  void initState() {
    for(Post p in Model.instance.postList) {
      postList.add(post(p));
    }
    super.initState();
  }


  @override
  Widget build(BuildContext context) {
    return Container(
      height: maxiHeight,
      child: PageView(
          controller: PageController(viewportFraction: 0.5),
          children: postList
      ),
    );
  }


  Widget post(Post post) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(20),
        child: Container(
            margin: EdgeInsets.only(right: 10),
            color: Colors.red,
            child: Image.network(post.thumb, height: 50)
        )
    );
  }

I want to keep my image ratio.

What am I missing here ?

Md. Yeasin Sheikh · Accepted Answer · 2021-09-17T13:30:13.073

2

About your code snippet, you are providing margin right 1st then wrapping with ClipRRect. Here the main Container is getting its size and then using margin, after wrapping with ClipRRect it is avoiding 10px from right to Clip. And this is how we are getting current output.

But we want padding outside The Container and without border radius. Means after decorating the image, just provide some padding. You can follow this and using fit: BoxFit.cover will cover the widget size.

      Center(
              child: Padding(
                padding: EdgeInsets.only(right: 10),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(20),
                  child: Container(
                    // margin: EdgeInsets.only(right: 10),// not here
                    color: Colors.red,
                    child: Image.network(
                      // post.thumb,
                      "https://unsplash.it/1440/3040?random",
                      // fit: BoxFit.fitHeight,
                      height: 150,
                    ),
                  ),
                ),
              ),
            ),

edited Sep 17 '21 at 13:30

answered Sep 17 '21 at 13:21

Md. Yeasin Sheikh

54,221
7
29
56

Agree for the margin I was writing this sample quickly . But , I don't want to use Boxfit.cover , as I said in my question I want to keep the initial image ratio. with this box fit ratio is broken – nicover Sep 17 '21 at 13:25
Means the image will get exact size and have corner border? – Md. Yeasin Sheikh Sep 17 '21 at 13:27
Yes like in my screen shot but with rounded corners. it's working fine in simple list but not here and don't know why – nicover Sep 17 '21 at 13:28
You are using `height: 50`, does it mean you like to have fit height ? – Md. Yeasin Sheikh Sep 17 '21 at 13:32
I've updated the widget, does it solve your issue now? – Md. Yeasin Sheikh Sep 17 '21 at 13:34
I wrote ```height: 50``` to prove that image size or container size doesn't affect the image at all. In my screen shot , you'll see that the first image almost fill the available PageView height whereas the second is 2x less , and both have ```height: 50``` . I just want the image match its ratio according pageView height and get rounded corners – nicover Sep 17 '21 at 13:40
Working with center. Thanks for reply – nicover Sep 17 '21 at 14:09

Mäddin · Answer 2 · 2021-09-17T13:54:09.887

2

With the following modified code it should work:

@override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        height: 500.0,
        child: ListView(scrollDirection: Axis.horizontal, children: postList),
      ),
    );
  }

  Widget post(String uri) {
    return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 5.0),
       child: ClipRRect(
         borderRadius: BorderRadius.circular(20),
         child: Image.network(uri, fit: BoxFit.fitHeight)
      ),
    );
  }

edited Sep 17 '21 at 13:54

answered Sep 17 '21 at 13:45

Mäddin

1,070
6
11

Sorry can't use listView in this case – nicover Sep 17 '21 at 13:46
Why? PageView does not work with dynamic widths. – Mäddin Sep 17 '21 at 13:47
What exactly do you want to achieve? With PageView you already define the width through the `viewportFraction` and then the height. PageView is not able to dynamically adjust the width of the children. – Mäddin Sep 17 '21 at 13:52
1

I already know about this and this is a good solution when using list. I need here to have the snap effect and a slow swiping control for a use case. I also know that plugins exist to mimic PageView behavior for lists but I had conflicts with this in my app. Thanks for reply – nicover Sep 17 '21 at 14:01

score 0 · Answer 3 · answered Sep 17 '21 at 13:20

0

Try to add BoxFit.cover to Image.network widget

Widget post(Post post) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(20),
        child: Container(
            margin: EdgeInsets.only(right: 10),
            color: Colors.red,
            child: Image.network(post.thumb, height: 50, fit: BoxFit.cover,),
        )
    );
  }

answered Sep 17 '21 at 13:20

Yair Chen

917
6
10

I need to keep my image ratio I can't use box fit – nicover Sep 17 '21 at 13:28

Rounded corners Image inside PageView keeping ratio Flutter

3 Answers3