I am using a Stack to recreate this effect :
But for some reason, using the Ink widget to be able to get the gradient effect, this is what I have :
This is my code :
Stack(
children: [
SizedBox(
height: 100.0,
width: 100.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: CachedNetworkImage(
imageUrl:
'https://images.unsplash.com/photo-1570296767266-60ccc88974a5',
fit: BoxFit.cover,
placeholder: (context, url) => MC_Shimmer(),
),
),
),
Positioned(
right: -5.0,
bottom: -5.0,
child: SizedBox(
height: 30.0,
width: 30.0,
child: Ink(
decoration: BoxDecoration(
gradient: gradient,
borderRadius:
BorderRadius.all(Radius.circular(5.0)),
),
child: Icon(
OMIcons.cameraAlt,
color: Colors.white,
size: 15.0,
),
),
),
)
],
),
you can use Container instead of Ink and able to use gradient effect.
Positioned(
right: -5.0,
bottom: -5.0,
child: SizedBox(
height: 30.0,
width: 30.0,
child: Container(
decoration: BoxDecoration(
gradient: gradient,
borderRadius:
BorderRadius.all(Radius.circular(5.0)),
),
child: Icon(
OMIcons.cameraAlt,
color: Colors.white,
size: 15.0,
),
),
),
)
I tried this in dart pad it worked alright.
Positioned(
right: -5.0,
bottom: -5.0,
child: SizedBox(
height: 30.0,
width: 30.0,
child: Material(
child: Ink(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.pink, Colors.yellow]),
borderRadius: BorderRadius.all(Radius.circular(5.0)),
),
child: Icon(
Icons.camera,
color: Colors.white,
size: 15.0,
),
),
),
),
)
Related
I am trying to make the display feature for my app, but I am having a hard time making these outer circles, any input is appreciated
There is a way to draw using coordinates.
You can set the ratio using MediaQuery.of(context).size.
return Scaffold(
body: SafeArea(
child: Stack(
children: <Widget>[
Positioned(
top: 200,
left: 80,
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(128.0),
border: Border.all(color: Colors.blue),
),
),
),
Positioned(
top: 225,
left: 105,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(128.0),
border: Border.all(color: Colors.blue),
),
),
),
],
),
),
);
Use this:
Container(
color: Colors.white,
child: Center(
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [Colors.white,Colors.white, Colors.red, Colors.red, Colors.white,Colors.white],
transform: GradientRotation(pi / 2),
),
borderRadius: BorderRadius.circular(128.0),
),
child: Center(
child: Container(
width: 198,
height: 198,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(120.0),
),
),
),
),
),
),
It leads to this output:
use stack widget and put 2 circle containers with different size as children in stack widget
I want to show container on top right of other container but its showing inside of it.
My code
Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Color(0xffd1e6f5),
borderRadius: BorderRadius.all(Radius.circular(10))
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: SvgPicture.asset(
"assets/icon/notification.svg",
),
),
),
new Positioned( // draw a red marble
top: 0.0,
right: 0.0,
child: Container( decoration: BoxDecoration(
color: Color(0xff009fe1),
borderRadius: BorderRadius.all(Radius.circular(10))
),
child: Padding(
padding: const EdgeInsets.all(3.0),
child: Text('01'),
),),
)
]
)
I want to show it outside a light container like this
You need an external container to simulate the overlap effect.
Check the behavior of that component and try replicate your desired behavior.
Container(
height: 140.0,
width: 140.0,
color: Colors.amber, // set as transparent.
child: Stack(
children: [
Align(
alignment: Alignment.center,
child: Container(
height: 100.0,
width: 100.0,
decoration: const BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(10))
),
),
),
Align(
alignment: Alignment.topRight,
child: Container(
width: 40.0, height: 40.0,
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(10))
)
),
),
],
),
),
In addition to the answer of Marcos. I would like to tell you about this package badges
Example Usage
Badge(
badgeContent: Text('3'),
child: Icon(Icons.settings),
)
Try below code hope its helpful to you.
Container(
height: 100.0,
width: 100.0,
child: Stack(
children: [
Align(
alignment: Alignment.center,
child: Container(
height: 50.0,
width: 50.0,
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
child: Icon(
Icons.notifications,
color: Colors.white,
),
),
),
Positioned(
top: 17,
right: 17,
child: Container(
width: 25.0,
height: 25.0,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blue[200],
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
child: Text(
'01',
),
),
),
],
),
),
Your result screen ->
You can also use Badge package here
Badge(
badgeColor: Colors.blue,
animationType: BadgeAnimationType.slide,
toAnimate: true,
position: BadgePosition.topEnd(
top: -10,
end: -10,
),
badgeContent: Text(
'01',
),
child: Container(
height: 50.0,
width: 50.0,
decoration: const BoxDecoration(
color: Color(0xffd1e6f5),
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
child: Icon(
Icons.notifications,
color: Colors.white,
),
),
),
Your result screen using package ->
I want to create a view like below.
I tried adding a RadialGradient but it doesn't exact like this image.
Container(
height: 50,
width: 50,
decoration: const BoxDecoration(
color: Color(0xff2DD485),
shape: BoxShape.circle,
gradient: RadialGradient(colors: [Color(0xff42CF8C), Color(0xff1DAE69)], center: Alignment(0, -0.7), stops: [0, 1]),
),
child: const Icon(Icons.done_rounded, color: Colors.white),
)
a bit ugly, but do the trick:
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(25)),
child: Container(
height: 50,
width: 50,
color: const Color(0xff2DD485),
child: Stack(
alignment: AlignmentDirectional.center,
children: [
Positioned(
bottom: 22,
child: Container(
height: 50,
width: 50,
decoration: const BoxDecoration(
color: Color(0xff56dc9d),
shape: BoxShape.circle,
),
),
),
const Icon(Icons.done_rounded, color: Colors.white),
],
),
),
)
I'm new to flutter and not that experienced when it comes to programming in general. So I'm trying to do something like this
But I just can't seem to do it, I tried align properties, padding to make it move left and right, I also tried stacks but I don't have any idea how to do it.
This is my code for the image
Widget buildImage() {
return Padding(
padding: EdgeInsets.only(right: 10, left: 10, top: 20),
child: Align(
alignment: Alignment.bottomLeft,
child: Container(
height: 100,
width: 130,
decoration: BoxDecoration(
image: new DecorationImage(
image: new AssetImage(
"assets/images/profile-image.jpeg",
),
fit: BoxFit.cover,
),
shape: BoxShape.circle,
border: Border.all(
color: Colors.white,
width: 5.0,
),
),
),
));
}
This is my current progress
I would appreciate any help.
Here is the working code
Stack(
alignment: Alignment.bottomRight,
children: <Widget>[
Container(
height: 200,
width: 200,
child: InkWell(
onTap: () => {},
child: ClipRRect(
borderRadius: BorderRadius.circular(100),
child: Container(
height: 200,
width: 200,
color: Colors.grey[200],
child: Icon(Icons.person),
),
),
),
),
Container(
height: 60,
width: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
padding: EdgeInsets.all(5),
child: Container(
decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.grey[200]),
child: IconButton(
icon: Icon(Icons.edit),
onPressed: () {},
),
),
),
],
);
This can be achieved with the Stack widget check the docs it has a video explaining it really well.
It lets you positions its children relative to the edges of its box.
You can use Stack to place widget over widget. Here is the working example
Stack(
alignment: Alignment.bottomRight,
children: <Widget>[
Container(
decoration: BoxDecoration(
image: new DecorationImage(
image: new AssetImage(
"assets/images/profile-image.jpeg",
),
fit: BoxFit.cover,
),
shape: BoxShape.circle,
border: Border.all(
color: Colors.white,
width: 5.0,
)),
height: 100,
width: 130,
),
Container(
height: 50,
width: 50,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
padding: EdgeInsets.all(5),
child: Container(
decoration:
BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
child: Center(
child: IconButton(
icon: Icon(Icons.edit),
onPressed: () {},
),
),
),
),
],
)
I want to make a custom container/card that looks like:
How can I achieve overlapping/overlaying layout in flutter?
Use the Stack widget & the Positioned widget that helps to put the widgets where ever you want inside the stack
Code:
Container(
width: 135.0,
height: 80.0,
margin: EdgeInsets.only(right: 5.0),
child: Stack(
children: [
Align(
alignment: Alignment.centerLeft,
child: Container(
width: 110.0,
height: 150.0,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
child: Align(
alignment: Alignment.bottomLeft,
child: Padding(
padding: EdgeInsets.only(left: 15.0, bottom: 20.0),
child: Text(
text,
style: TextStyle(
fontSize: 15.0,
fontFamily: 'PlayfairDisplay',
color: kInactiveSearchPageTextColor,
),
),
),
),
),
),
Align(
alignment: Alignment.topLeft,
child: Image.asset(
image,
width: 110,
height: 110,
),
),
Positioned(
top: 162,
left: 90,
child: Container(
width: 41.0,
height: 41.0,
child: RawMaterialButton(
fillColor: Colors.white,
shape: CircleBorder(),
elevation: 12.0,
child: Icon(
Icons.add,
color: kActiveSearchPageButtonColor,
),
onPressed: onPressed,
),
),
),
],
),
);