Posts: 0
Threads: 0
Joined: Nov 2022
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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: <Widget>[
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
[![enter image description here][1]][1]
[1]:
|
Posts: 0
Threads: 0
Joined: May 2022
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
You can also use `CircleAvatar`, which comes with flutter
CircleAvatar(
radius: 20,
backgroundImage: NetworkImage('https://via.placeholder.com/140x100')
)
|
Posts: 0
Threads: 0
Joined: Sep 2016
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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,
),
)
|
Posts: 0
Threads: 0
Joined: Feb 2019
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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',
),
)
|
Posts: 0
Threads: 0
Joined: Aug 2016
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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,
),
),
)
|
Posts: 0
Threads: 0
Joined: Nov 2022
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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,
),
),
|
Posts: 0
Threads: 0
Joined: May 2019
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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,
),
),
),
);
|
Posts: 0
Threads: 0
Joined: Feb 2023
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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',
),
),
),
),
|
Posts: 0
Threads: 0
Joined: Aug 2019
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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,
),
),
|
Posts: 0
Threads: 0
Joined: Sep 2018
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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")
)
)),
|
|