The images I have been adding are not fitting properly in the circular shape.
This is the image for reference
And this is the code for reference
Container(
child:Material(
shape: CircleBorder(),
clipBehavior: Clip.antiAliasWithSaveLayer,
child: InkWell(
splashColor: Colors.black26,
onTap: (){},
child: Ink.image(
image: AssetImage('assets/'+ Name),
height: 60 ,
width: 60,
),
),
)
),Text(String),
Use fit property of Ink.child
1st way : Use fit: BoxFit.cover, for center cropped image
Or else
2nd way : Use fit: BoxFit.fill, to stretch the image
Container(
child:Material(
shape: CircleBorder(),
clipBehavior: Clip.antiAliasWithSaveLayer,
child: InkWell(
splashColor: Colors.black26,
onTap: (){},
child: Ink.image(
image: AssetImage('assets/'+ Name),
fit: BoxFit.cover, //Add this line for center crop or use 2nd way
height: 60 ,
width: 60,
),
),
)
),Text(String),
I guess you can use
CircleAvatar
here is the demo code
CircleAvatar(
radius: 20.0,
child: ClipOval(
child: Image.network(
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0sCAvrW1yFi0UYMgTZb113I0SwtW0dpby8Q&usqp=CAU')),
),
though I can't open your example image, I guess if you use Circle Avatar it will work
Related
goal: display an image picked inside a circle.
issue: the image picked is clipped on the sides.
Here is the one that I am using to display the image:
CircleAvatar(
radius: 50.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(100),
child: Image.file(_photo!,
width: 100, height: 100, fit: BoxFit.fitHeight),
),
)
the code above is used to display the image after I take a picture from the phone
this is what it looks like
The image should look like this ::
this is the code snip for when the image is being displayed correctly:
Widget _buildProfileImage() => CachedNetworkImage(
imageUrl: _cloudUser.userImage,
imageBuilder: (context, imageProvider) => CircleAvatar(
backgroundColor: Colors.grey.shade800,
radius: 50,
backgroundImage: NetworkImage(_cloudUser.userImage),
),
);
the code above is used to display the image that was stored on firebase
I am pretty sure that the issue is with the widget 'ClipRRect' but I dont know what other widget I can use. or maybe thats not the issue at all idk.
use FittedBox widget
Change this:
CircleAvatar(
radius: 50.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(100),
child: Image.file(_photo!,
width: 100, height: 100, fit: BoxFit.fitHeight),
),
)
to this code below:
ClipRRect(
borderRadius: BorderRadius.circular(100),
child: FittedBox(
alignment: Alignment.center,
fit: BoxFit.cover,
child: Image.file(_photo!)),
),
),
I use stack to place images, my back image is drawn on top of the other one, how can i fix the posterpath to be on top, also top image doesn't round the edges:
return Stack(
children: [
Positioned(
child: AspectRatio(
aspectRatio: 390 / 220,
child: ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.3),
BlendMode.dstATop,
),
child: backdropPath != null
? Image.network(ImageDownloader.imageUrl(backdropPath))
: Image.asset(AppImages.noImageBig),
),
),
),
Positioned(
child: Center(
child: Padding(
padding: const EdgeInsets.only(top: 110.0),
child: Container(
clipBehavior: Clip.antiAlias,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(12)),
),
height: 212.0,
width: 174.0,
child: posterPath != null
? Image.network(ImageDownloader.imageUrl(posterPath))
: Image.asset(AppImages.noImageBig),
),
),
),
),
The ordering of children in a Stack is determined by their order in the source code - later items in the list are drawn on top. If you want to switch the z-order of the two children, swap them in the source code.
For your second question, you can achieve "rounded corner" with ClipRRect widget.
I have a Container with a Row inside.
Container(
width: MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
//mbx
Container(
width: 40.0,
height: 40.0,
decoration: new BoxDecoration(
color: AppColors.grisMovMap,
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: AssetImage(
'assets/sports/MBX.png')))),
SizedBox(
width: 5,
),
//motocross
Container(
width: 40.0,
height: 40.0,
decoration: new BoxDecoration(
color: AppColors.grisMovMap,
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: AssetImage(
'assets/sports/motocross.png')))),
],
),
)
The Row contains two other Containers with a circular asset image inside.
The issue is that both image are not filling the circle space, they are cut on some parts of the border.
I would like to put both images completely inside the circles, just as adding a padding value.
EDIT:
Here you have both full images to compare with the app output:
CircleAvatar(
radius: 100,
child: Padding(
padding: EdgeInsets.all(10),
child: Image.asset(
"assets/images/w3lk3.png",
),
),
backgroundColor: Colors.purple,
),
Output:
Use fit:BoxFit.contain to fit the image fully inside the container.
Since you are using circle image I would suggest using the native flutter solution for circle images as found here in the official documentation. https://api.flutter.dev/flutter/material/CircleAvatar-class.html
In terms of code:
CircleAvatar(
backgroundImage: NetworkImage(userAvatarUrl),
)
If I understood correctly you want a certain color around the circle?
Use double CircleAvatar widget. It may not be the correct way but it accomplishes the task.
CircleAvatar(
radius: 70,
backgroundColor: Colors.red,
child: CircleAvatar(
backgroundImage:
AssetImage('assets/sports/motocross.png'),
radius: 50,
),
),
Since it creates two circles just make sure the first one is bigger than the second one and set the color of your choice.
I am trying to overlay a title on images in Card widget. I am trying to achieve this using Stack widget, it seems to be messing with my constraints. My original widget:
When I add Stack:
As you can see, the text appears but it destroys the layouts. Any idea to why is this happening? to my knowledge Stack is not supposed to affect any constraints(?), it should be floating on top of the existing widget.
My code:
return Card(
clipBehavior: Clip.antiAlias,
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(kDefaultPadding / 2)),
child: Stack(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(kDefaultPadding / 2),
child: FittedBox(
fit: BoxFit.cover,
child: Image.network(widget.data.imageUrl),
),
),
Text("Test")
],
),
);
Add fit: StackFit.expand to the Stack:
Card(
clipBehavior: Clip.antiAlias,
elevation: 3,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(kDefaultPadding / 2)),),
child: Stack(
fit: StackFit.expand, // this is new
children: [
ClipRRect(
...
Note: Instead of Stack you can use a Container with the image set as its decoration image and the text set as its child:
Card(
clipBehavior: Clip.antiAlias,
elevation: 3,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(kDefaultPadding / 2)),),
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(widget.data.imageUrl),
),
),
child: Center(child: Text("Test"))),
),
...
In my code, there is this CircleAvtar which I want to replace it with a big rectangular box. I am new to flutter I am finding it difficult to achieve this.
child: Card(
elevation: 3,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
child: Container(
margin: EdgeInsets.all(5),
padding: EdgeInsets.all(5),
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(
10,
),
// border: Border.all(width: 0.5),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
color: whiteColor,
),
child: expertiseSearchModel.userImageURL.isEmpty
? CircleAvatar(
radius: 35,
child: SvgPicture.asset(
'assets/images/default_user_image.svg',
// height: screenUtil.setSp(80),
// width: screenUtil.setSp(80),
fit: BoxFit.contain,
),
)
: CircleAvatar(
radius: 35,
backgroundImage:
NetworkImage(expertiseSearchModel.userImageURL),
),
),
I want it to look like this :
If you can show us what your current code is giving the output maybe I can help you more. But As far as i understood this, you can simple use Image.Network() to show the image and remove the circular avatar
Try this, if it works if not lemme know I will edit it accordingly
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
color: whiteColor,
),
child: expertiseSearchModel.userImageURL.isEmpty
? CircleAvatar(
radius: 35,
child: SvgPicture.asset(
'assets/images/default_user_image.svg',
// height: screenUtil.setSp(80),
// width: screenUtil.setSp(80),
fit: BoxFit.contain,
),
)
: Image.network(expertiseSearchModel.userImageURL)
),
Inside your main container use the column as a child and put another container as a child and use the Image decoration property of the container to display pictures. You can change the border-radius of the child container to have those circular edges.