I am trying to put Container color as Stack above circle avatar but the problem is that color go out the circle borer
I have the following code,
IntrinsicWidth(
child: Stack(
alignment: Alignment.bottomCenter,
children: [
const CircleAvatar(
radius: 50,
),
Container(
color: Colors.yellowAccent,
height: 30,
)
],
),
)
I get the following output
But I need the output looks like following
How Can I prevent my color from expanding to the circle width
thanks
try this:
CircleAvatar(
backgroundColor: Colors.yellow,
radius: 100,
child: Container(
alignment: Alignment.bottomCenter,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(shape: BoxShape.circle),
child: Container(
height: 40,
width: double.infinity,
color: Colors.red,
),
),
)
Related
I want to add a border color around an oval shaped image that doesn't have a constant height value.
My code example:
Align(
child: ConstrainedBox(
constraints: const BoxConstraints(
maxHeight: 220.0,
),
child: Container(
height: null,
width: 150.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.blueAccent,
width: 2.0,
),
),
child: ClipOval(
child: Image.network(
'https://images.unsplash.com/photo-1606122017369-d782bbb78f32?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cG9ydHJhaXRzfGVufDB8fDB8fA%3D%3D&w=1000&q=80',
),
),
),
),
),
This is the result of having a border shape: BoxShape.circle:
and this is the result without any border shape at all
However I want the border to be properly and evenly around the corners of the image.
The only attribute left is boxshape.value but I cant find examples on how to use it. Also the container has a null value, making it harder to insert specific value
Try this:
ClipOval(
child: Container(
height: 150.0,
width: 150.0,
color: Colors.blueAccent,
padding: const EdgeInsets.all(2),
child: ClipOval(
child: Image.network(
fit:BoxFit.cover,
'https://images.unsplash.com/photo-1606122017369-d782bbb78f32?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cG9ydHJhaXRzfGVufDB8fDB8fA%3D%3D&w=1000&q=80',
),
),
),
)
I am trying a demo for understanding stack,
setting position to green at bottom 0 right 0 , it set at stack's parent container's right bottom,
I want to move green container to red's bottom right corner
return Scaffold(
body: Center(
child: Container(
height: 500,
width: 350,
color: Colors.grey,
child: Stack(
alignment: Alignment.topRight,
children: [
Container(
height:300,
width: 300,
color: Colors.red,
),
Container(
height: 100,
width: 100,
color: Colors.green,
),
],
),
),
),
);
You need to set red box as parent for green box. The quick fix would be to add Stack() as child for red box and then giving green box inside that.
Scaffold(
body: Center(
child: Container(
height: 500,
width: 350,
color: Colors.grey,
child: Stack(
alignment: Alignment.topRight,
children: [
Container(
height:300,
width: 300,
color: Colors.red,
// Here new stack inside red box
child: Stack(
alignment: Alignment.bottomRight,
children:[
// green box
Container(
height: 100,
width: 100,
color: Colors.green,
),
]
),
),
],
),
),
),
),
I want to center the camera icon but i couldnt do it. I tried to use an image instead of an icon but this still didnt work. I think it doesnt work because it is not possible to place an icon on a CircleAvatar but there must be a way to this.
Here is my Code:
return SizedBox(
height: 115,
width: 115,
child: Stack(
clipBehavior: Clip.none,
fit: StackFit.expand,
children: [
CircleAvatar(
backgroundImage: AssetImage("assets/images/Profile Image.png"),
),
Positioned(
right: -16,
bottom: 0,
child: SizedBox(
height: 46,
width: 46,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50),
side: BorderSide(color: Colors.white),
),
color: Color(0xFFF5F6F9),
onPressed: () {},
// TODO: Icon not centered.
child: Center(child: Icon(Icons.camera_alt_outlined)),
)))
],
),
);
Widget build(BuildContext context) {
return SizedBox(
height: 115,
width: 115,
child: Stack(
clipBehavior: Clip.none,
fit: StackFit.expand,
children: [
CircleAvatar(
backgroundImage: AssetImage("assets/images/Profile Image.png"),
),
Positioned(
bottom: 0,
right: -25,
child: RawMaterialButton(
onPressed: () {},
elevation: 2.0,
fillColor: Color(0xFFF5F6F9),
child: Icon(Icons.camera_alt_outlined, color: Colors.blue,),
padding: EdgeInsets.all(15.0),
shape: CircleBorder(),
)),
],
),
);
}
I've removed the SizedBox and used a RawMaterialButton instead.
Instead of using CircleAvatar prefer using a Container like this:
Container(
height: 46,
width: 46,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.green,
),
child: Icon(Icons.camera, color: Colors.white,),
alignment: Alignment.center,
),
Try this
CircleAvatar(
radius: 58,
backgroundImage: AssetImage("assets/images/Profile Image.png"),
child: Stack(
children: [
Align(
alignment: Alignment.bottomRight,
child: CircleAvatar(
radius: 18,
backgroundColor: Colors.white70,
child: Icon(CupertinoIcons.camera),
),
),
]
),
)
Try this two things
You can wrap your Icon with Positioned widget then set top left right sizes for it.
again another way wrap with Align widget then set alignment: Alignment.center
Where should the red oval be
Hello, my question is how can I get the red oval in the picture above to the position marked below? Does anyone know? I thank you in advance.
This is my code:
return Scaffold(
backgroundColor: const Color(0xffffffff),
body: Stack(
children: <Widget>[
Container(
child: Align(
alignment: Alignment.bottomCenter,
),
width: 436.0,
height: 207.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(29.0),
image: DecorationImage(
image: const AssetImage('assets/images/vorlage.png'),
fit: BoxFit.cover,
),
),
),
Container(
child: Align(
alignment: Alignment.bottomCenter,
),
width: 265.0,
height: 20.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(14.0),
color: const Color(0xffff0000),
),
),
You might need to look into painting a Canvas. It's fairly well developed, and quite a bit of tutorial information on it (even how to animate things!). Everything is a widget, but some of those widgets are RenderObjects. :)
If you want to red oval to always be fixed at a position in it's parent widget, you can use Positioned widget to fix the distance from top, then use Center to place it in the middle. You will have to tweak the top value (I put 300 arbitrarily).
return Scaffold(
backgroundColor: const Color(0xffffffff),
body: Stack(
children: <Widget>[
Container(
child: Align(
alignment: Alignment.bottomCenter,
),
width: 436.0,
height: 207.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(29.0),
image: DecorationImage(
image: const AssetImage('assets/images/vorlage.png'),
fit: BoxFit.cover,
),
),
),
Positioned(
top: 300 // <----tweak this till it's where you want it (distance from top)
child: Center(
child: Container(
child: Align(
alignment: Alignment.bottomCenter,
),
width: 265.0,
height: 20.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(14.0),
color: const Color(0xffff0000),
),
),
),
),
I am using a stack, where the save 60% off widget is on top of the container with white background. I am using gradient on the discount container. I want the gradient to be solid , but as you can see in the image, it is semi-transparent and we can see the white background under it.
My stack code is:
Container(
width: width * 0.38,
height: 250,
child: Stack(
children: [
Positioned(
top: 20,
child: InkWell(
onTap: () {},
child: Container(
width: width * 0.38,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(height: 35.h),
buildProductPrice(product, _intros),
buildCheckMark(product),
],
),
),
),
),
Align(
alignment: Alignment.topCenter,
child: buildDiscountText(product, _intros)),
],
),
);
buildDiscountText widget:
return Container(
height: 40,
width: 100,
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.lightBlue.withOpacity(0.8),
Color(0xffCE41FD),
],
end: Alignment.centerRight,
begin: Alignment.centerLeft,
),
borderRadius: BorderRadius.circular(20)),
child: Text(
'SAVE $_rounded %',
style: _saveTextStyle,
),
);
To get solid background I could wrap buildDiscountTextWidget with Container and provide same gradient and do this 2,3 times but I don't think that is the proper way.
here is the screen shot of the widget
You just need to remove .withOpacity(0.8) from the end of Colors.lightBlue.withOpacity(0.8)
Change buildDiscountText widget as follows:
return Container(
height: 40,
width: 100,
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.lightBlue, //remove opacity
Color(0xffCE41FD),
],
end: Alignment.centerRight,
begin: Alignment.centerLeft,
),
borderRadius: BorderRadius.circular(20)),
child: Text(
'SAVE $_rounded %',
style: _saveTextStyle,
),
);