I'm having trouble removing the vertical space around the 'ClipOval' widgets within this Column. My goal (at this moment) is to have no space between them but I can't seem to figure out how to accomplish that.
Column(
mainAxisSize: MainAxisSize.max,
children: [
ClipOval(
child: SizedBox.fromSize(
size: const Size.fromRadius(100), // Image radius
child: Image.asset('assets/images/home_logo.png', fit: BoxFit.cover),
),
),
ClipOval(
child: SizedBox.fromSize(
size: const Size.fromRadius(100), // Image radius
child: Image.asset('assets/images/home_logo.png', fit: BoxFit.cover),
),
)
],
)
I tried creating a custom clipper but it would have the image removed entirely. Here's the code I tried for the clipper. My approach here was having the top margin set to 0 in hopes of having the top margin removed.
class MyClip extends CustomClipper<Rect> {
Rect getClip(Size size) {
return Rect.fromLTWH(100, 0, 100, 100);
}
bool shouldReclip(oldClipper) {
return false;
}
}
Try using CircleAvatar with ClipRRect instead.
Sample Code
Column(
mainAxisSize: MainAxisSize.max,
children: [
CircleAvatar(
radius: 100,
child: ClipRRect(
child: Image.asset('assets/images/home_logo.png'),
),
),
CircleAvatar(
radius: 100,
child: ClipRRect(
child: Image.asset('assets/images/home_logo.png'),
),
),
],
),
Hope this help.
Explanation
On your current approach you have a Sizebox with
size: const Size.fromRadius(100) while you have a small image less than the Sizebox size
You could also try to replace BoxFit.contain to BoxFit.fill but this will stretch your image
Column(
mainAxisSize: MainAxisSize.max,
children: [
ClipOval(
child: SizedBox.fromSize(
size: const Size.fromRadius(100), // Image radius
child: Image.asset('assets/images/home_logo.png',
fit: BoxFit.fill),
),
),
ClipOval(
child: SizedBox.fromSize(
size: const Size.fromRadius(100), // Image radius
child: Image.asset('assets/images/home_logo.png',
fit: BoxFit.fill),
),
),
],
),
Have you tried changing the value of mainAxisAlignment: to mainAxisAlignment: MainAxisAlignment.start and crossAxisAlignment: CrossAxisAlignment.start
Related
I have a flutter image that is not shrinking as the window shrinks:
Widget build(BuildContext context) {
return Expanded(
flex: 1,
child: Column(
//mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ConstrainedBox(
constraints: const BoxConstraints(maxHeight: 500, maxWidth: 600),
child: ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Image.asset(
'images/DontForgetTheSpoon-largeLogo.jpg',
),
),
),
I tried to use boxFit.contain in the Image.Asset but that didn't seem to work out for me. Anything else I should be looking into?
This widget is inside other widgets just for SA.
Try to use fit property of image Widget, inorder to have image shrink try use value BoxFit.contain:
ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Image.asset(
'images/DontForgetTheSpoon-largeLogo.jpg',
fit: BoxFit.contain,
),
),
I want to create a responsibility for the CircleAvatar widget, but I am not sure how.
Here is my code:
body: Container(
padding: const EdgeInsets.all(10),
width: MediaQuery.of(context).size.width,
child: Row(children: [
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(...),
if (_isAvatar)
Container(
padding: const EdgeInsets.all(15),
child: CircleAvatar(
maxRadius: MediaQuery.of(context).size.width -
MediaQuery.of(context).size.width +
78, // Here is a problem, how to calc width to fit on any device?
backgroundImage: NetworkImage(
_pageContent['acf']['doctor']['avatar']),
),
),
Container(...),
],
)),
])));
I want to make the widget responsive and fittable on any device or resolutio.
I am Flutter's newbie, please help!
Thanks!
You should use radius, not maxRadius. Here's the code:
CircleAvatar(
radius: MediaQuery.of(context).size.width * 0.3, //change 0.3 to any value you want
backgroundImage: NetworkImage(
_pageContent['acf']['doctor']['avatar']),
),
),
I want to achieve this
This is my code
Row(
children: [
Expanded(
flex: 1,
child: Text(
"somethinig here..."),
),
Expanded(
child: ClipRect(
child: Wrap(
children: [
SvgPicture.asset(
"assets/3958830.svg",
width: autoHeight(550),
allowDrawingOutsideViewBox: true,
fit: BoxFit.fitHeight,
),
],
),
),
),
],
),
Result:
You can see how the image is clipped, I just want to clip all sides except the left side.
You can wrap the image widget with an Align widget to easily position the image inside the clipper. The widthFactor and heightFactor properties are used to decide the size of the clipper and alignment is used to decide the position of the `clipper
A Nice Example to use the Align Widget with ClipRect will be
ClipRect(
child: Container(
child: Align(
alignment: Alignment.centerLeft,
widthFactor: 0.6,
heightFactor: 1.0,
child: Image.network(
'https://images.unsplash.com/photo-1473992243898-fa7525e652a5'
),
),
),
);
To Know More about the Clippers see This Article
Just wrap your Text widget with Center.
And SvgPicture with Align. (I realize this later.)
Row(
children: [
Expanded(
flex: 1,
child: Center(child: Text("somethinig here...")),
),
Expanded(
child: ClipRect(
child: Wrap(
children: [
Align(
alignment: Alignment.centerRight,
child: SvgPicture.asset(
"assets/3958830.svg",
width: autoHeight(550),
allowDrawingOutsideViewBox: true,
fit: BoxFit.fitHeight,
)),
],
),
),
),
],
)
I'm new to Flutter and ran into this slight problem. So I've created a Card widget and placed an image in it. Originally the image was horizontal, so I rotated it to be vertical. However after doing so, the image overflowed out of my card. Any help would be much appreciated. Thanks :)
See image here
Card(
color: Colors.green,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("My Boat"),
Transform.rotate(
angle: -.9,
child: Image(
image: AssetImage('images/boat.png',),
height: 140,
),
)
],
)),
you have two choices
first, remove its height
Card(
color: Colors.green,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("My Boat"),
Transform.rotate(
angle: -.9,
child: Image(
image: AssetImage('images/boat.png',),
),
)
],
)),
second, you can wrap it in Expanded like
Card(
color: Colors.green,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("My Boat"),
Expanded(
child: Transform.rotate(
angle: -.9,
child: Image(
image: AssetImage('images/boat.png',),
),
)
)
],
)),
So, I have to display an image in a container and some description at the bottom of the container. The image is supposed to fill the entire screen. The image is being fetched from the network.
This is my intial approach
Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
child: ClipRRect(
child: Image.network(category.imageURL,
height: maxHeight * 1, fit: BoxFit.cover),
),
),
Align(
alignment: Alignment.bottomLeft,
child: getNameAndDeleteSection(context),
)
],
),
),
where getNameAndDeleteSection is basically this
return Container(
color: Colors.yellow,
margin: EdgeInsets.fromLTRB(5, 0, 5, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
category.name,
maxLines: 1,
style: TextStyle(color: Colors.white),
),
Spacer(),
IconButton(
icon: Icon(Icons.delete, size: 18.0, color: Colors.white,),
onPressed: () {
deleteTap(category);
},
)
],
),
);
}
When the network image is loaded, it hides the yellow container , but keeps the children. What I want is the image to remain at the background and the yellow container to remain above it. The idea is that the yellow container will have a transparent color of sorts , to make it look floating on the image.
The max height is the height provided by the listView. I'm trying to make the UI adaptive. Any help?
Why not puting your image as a BoxDecoration in your container like this:
Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(url), fit: BoxFit.cover,
),
),
),
Align(
alignment: Alignment.bottomLeft,
child: getNameAndDeleteSection(context),
)
],
),
Instead of using a Container that always seems to get hidden by the Network Image, I decided to use Card that will envelop the container. And it worked.
So, the change was done in the getNameAndDeleteSection and basically wrapped the entire code in a Card. And bingo, it worked.