Rounded Corners Image in Flutter

Question

I am using Flutter to make a list of information about movies  Now I want the cover image on the left to be a rounded corners picture  I did the following  but it didn   t work  Thanks       getItem var subject        var row   Container        margin  EdgeInsets all 8 0         child  Row          children   lt Widget gt             Container              width  100 0              height  150 0              decoration  BoxDecoration                borderRadius  BorderRadius all Radius circular 8 0                  color  Colors redAccent                             child  Image network                subject  images    large                  height  150 0                width  100 0                                                             return Card        color  Colors blueGrey        child  row               as follows

User · Answer

Using ClipRRect you need to hardcode BorderRadius  so if you need complete circular stuff  use ClipOval instead    ClipOval    child  Image network       image url       height  100      width  100      fit  BoxFit cover

User · Answer

Output   Using BoxDecoration Container                margin  EdgeInsets all 8                 width  86                height  86                decoration  BoxDecoration                  shape  BoxShape circle                  image  DecorationImage                      image  NetworkImage  https   i stack imgur com 0VpX0 png                        fit  BoxFit cover

User · Answer

This is the code that I have used  Container        width  200 0        height  200 0        decoration  BoxDecoration          image  DecorationImage           image  NetworkImage  Network Image Link             color  Colors blue     borderRadius  BorderRadius all Radius circular 25 0                     Thank you

User · Answer

With new version of flutter and material theme u need to use the  Padding  widgett too in order to have an image that doesn t fill its container   For example if you want to insert a rounded image in the AppBar u must use padding or your image will always be as high as the AppBar   Hope this will help someone  InkWell          onTap                   print   Click Profile Pic                       child  Padding              padding  const EdgeInsets all 8 0               child  ClipOval                  child  Image asset                       assets images profile1 jpg

User · Answer

Use ClipRRect it will resolve your problem         ClipRRect                borderRadius  BorderRadius all Radius circular 10 0                  child  Image network                  Constant SERVER LINK   model userProfilePic                  fit  BoxFit cover

User · Answer

Try this instead  worked for me  Container    width  100 0    height  150 0    decoration  BoxDecoration      image  DecorationImage          fit  BoxFit cover  image  NetworkImage  Path to your image         borderRadius  BorderRadius all Radius circular 8 0        color  Colors redAccent

User · Answer

Try This it works well   Container    height  220 0    width  double infinity    decoration  BoxDecoration      borderRadius  new BorderRadius only        topLeft  Radius circular 10          topRight  Radius circular 10              image  DecorationImage        fit  BoxFit fill        image  NetworkImage          photoUrl

User · Answer

You can use CircleAvatar Widget with radius  CircleAvatar               radius  50 0               backgroundImage  AssetImage  quot assets img1 jpeg quot

User · Answer

user decoration Image for a container     override   Widget build BuildContext context        final alucard   Container          decoration  new BoxDecoration          borderRadius  BorderRadius circular 10             image  new DecorationImage                image  new AssetImage  quot images logo png quot                  fit  BoxFit fill

User · Answer

Container        width  48 0        height  48 0        decoration  new BoxDecoration          shape  BoxShape circle          image  new DecorationImage              fit  BoxFit fill              image  NetworkImage  path to your image

User · Answer

For image use this  ClipOval      child  Image network           https   url to your image           fit  BoxFit fill              While for Asset Image use this  ClipOval      child  Image asset           Path to your image           fit  BoxFit cover

User · Answer

You can also use CircleAvatar  which comes with flutter  CircleAvatar    radius  20    backgroundImage  NetworkImage  https   via placeholder com 140x100

User · Answer

Use ClipRRect it will work perfectly  ClipRRect      borderRadius  BorderRadius circular 8 0       child  Image network          subject  images    large            height  150 0          width  100 0

User · Answer

you can use ClipRRect like this      Padding                    padding  const EdgeInsets all 8 0                     child  ClipRRect                      borderRadius  BorderRadius circular 25                       child  Image asset                         assets images pic13 jpeg                         fit  BoxFit cover                                                                  you can set your radius  or user for only for topLeft or bottom left like    Padding                padding  const EdgeInsets all 8 0                 child  ClipRRect                  borderRadius  BorderRadius only                      topLeft  Radius circular 25                   bottomLeft  Radius circular 25                    child  Image asset                     assets images pic13 jpeg                     fit  BoxFit cover

User · Answer

Use ClipRRect with set image property of fit  BoxFit fill  ClipRRect            borderRadius  new BorderRadius circular 10 0             child  Image              fit  BoxFit fill              image  AssetImage  images image png                width  100 0              height  100 0

User · Answer

Use this Way in this circle image is also working   you have preloader also for network image    new ClipRRect       borderRadius  new BorderRadius circular 30 0        child  FadeInImage assetNetwork            placeholder  asset loader gif             image   Your Image Path

[flutter] Rounded Corners Image in Flutter

Examples related to flutter

Examples related to flutter-layout