CODEWITHSUNDEEP
flutterdart
thecoder.co
thecoder.co

Reputation: 27

ClipRRect doesn't clip it's child widget, what am I doing wrong?

I am clipping an image with ClipRRect, it initially worked, I changed nothing of consequence in the code and the image still displays, but the image no longer clips. This is the code, please tell me what is wrong.

ClipRRect(
              borderRadius: BorderRadius.circular(20.0),
              child: InkWell(
                  child: Image(
                    image: AssetImage(
                      _images[index]['image'],
                    ),
                    fit: BoxFit.contain,
                  ),
                  onTap: () =>
                      Navigator.pushNamed(context, _images[index]['route'])),
            ),

Upvotes: 0

Views: 2032

Answers (4)

JCKödel
JCKödel

Reputation: 770

I had a similar issue where ClipOval and CircleAvatar was not clipping a image.

Pay attention to the final widget size (which is NOT obvious).

For instance, this code won't work when placed in the actions of an AppBar:

SizedBox(
  width: size,
  height: size,
  child: ClipOval(
    clipBehavior: Clip.antiAliasWithSaveLayer,
    child: SizedBox(
      width: size,
      height: size,
      child: userProfile.photoURL.startsWith("http")
          ? CachedNetworkImage(
              userProfile.photoURL,
              width: iSize,
              height: iSize,
            )
          : Image.file(
              File(userProfile.photoURL),
              cacheWidth: siSize,
              cacheHeight: siSize,
              scale: mediaQuery.devicePixelRatio,
            ),
    ),
  ),
)

because the AppBar has 56 pixels high, the SizedBox will have 56 pixels high (no matter if you specify the height). To check this, insert all widgets inside a Container(color: Colors.red) and, if you see true widget size in red.

For the above example, you would need to remove the inner SizedBox (as is redundant) and insert all that tree inside a Center, so, no matter the available size, it will obey the SizedBox size and center the content.

Upvotes: 0

Moaid ALRazhy
Moaid ALRazhy

Reputation: 1744

Works for me fine in dartpad.dev try reinstalling your app

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;
  MyHomePage({Key? key, required this.title}) : super(key: key);



  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 
 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ClipRRect(
              borderRadius: BorderRadius.circular(20.0),
              child: InkWell(
                  child:Image.network('https://picsum.photos/250?image=9',fit: BoxFit.contain,),
                  onTap: () => null),
            ),
   
    );
  }
}

you can check this for more also https://educity.app/flutter/how-to-clip-images-in-flutter

and mainly the problem is in BoxFit.contain cahnge it to BoxFit.cover cause that make the parent choose one of the dimensions which makes the other not clipped.

you can also try specifying image width and height this will work also , and finally you can try

 CircleAvatar( radius: 20, backgroundImage:NetworkImage('via.placeholder.com/140x100') )

Upvotes: 1

Jim
Jim

Reputation: 7601

change fit: BoxFit.contain to cover:

ClipRRect(
              borderRadius: BorderRadius.circular(20.0),
              child: InkWell(
                  child: Image(
                    image: AssetImage(
                      _images[index]['image'],
                    ),
                    fit: BoxFit.cover,
                  ),
                  onTap: () =>
                      Navigator.pushNamed(context, _images[index]['route'])),
            ),

Upvotes: 0

Thaanu
Thaanu

Reputation: 85

Try this code, It perfectly works for me

    ClipRRect(
      borderRadius: BorderRadius.circular(20.0),
      child: InkWell(
        child: Image.asset(
          _images[index]['image'],
          fit: BoxFit.contain,
        ),
         onTap: () =>
            Navigator.pushNamed(context, _images[index]['route'])),
      ),
    ),

Upvotes: 0

Related Questions