I have a simple Figma design which contains two layers
First layer with solid color: background: #003274;
Second layer with gradient:
position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 0%;
background: radial-gradient(100% 245.99% at 0% 0%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
border-radius: 0px;
Now I'm trying to implement this in Flutter code like this:
return new Container(
decoration: new BoxDecoration(
color: Color(0xff003274),
gradient: new RadialGradient(
colors: [Color.fromARGB(102, 255, 255, 255), Color.fromARGB(0, 255, 255, 255)],
radius: 2.5,
center: Alignment(-1.0, -1.0),
),
),
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
)
);
As result I got grey gradient in stead of blue gradient
Could you suggest me how to translate this Figma design whiht gradient to Flutter code?
Don't know whether this is the best way, but it works. Just wrap your Container within another Container, and set its color to the bottom layer solid color.
#override
Widget build(BuildContext context) {
return Container(
color: Color(0xff003274),
child: new Container(
decoration: new BoxDecoration(
gradient: new RadialGradient(
colors: [
Color.fromARGB(102, 255, 255, 255),
Color.fromARGB(0, 255, 255, 255)
],
radius: 2.5,
center: Alignment(-1.0, -1.0),
),
),
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
),
),
);
}
Related
ave wrapped the Dividers with Containers and trying to provide border radius to clipoff the diveder edge. Edges are not circular as expected.
Container(
width: 135,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
),
child: Divider(
height: 25
thickness: 5,
color: Color(0xFFFFFFFF),
),
),
as provided in below design:
position: absolute;
width: 134px;
height: 5px;
left: calc(50% - 134px/2 + 0.5px);
bottom: 8px;
/* #White */
background: #FFFFFF;
border-radius: 100px;
You can try to wrap Divider in Container and then do the clipping things but it would be great if you directly create a Container that behaves like Divider like this.
You can use this divider widget:
class DividerWidget extends StatelessWidget {
const DividerWidget({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: 10,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
color: Colors.red,
),
);
}
}
Just simply add clipBehavior: Clip.hardEdge in Container as shown below .
Container(
width: 135,
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
),
child: Divider(
height: 20,
thickness: 5,
color: colorwhite,
),
),
How do I make the icon in showModalBottom above the middle, like the picture above, I made it using a container and set the position to positioned but it was cut off when I set the top to negative, like the following picture
Instead of using Positioned you can actually use Transform.translate to shift the Container. Consider that you use half the height of the container as y-Offset and multiply it with -1.
Example:
Transform.translate(
offset: const Offset(0,-50), // <- use half the height of the container
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.white,
border: Border.all(
color: const Color.fromRGBO(251, 202, 191, 1),
width: 4
)
),
width: 100,
height: 100, // Container has height 100
),
)
I really need your help to create or paint this kind of container in a flutter,
What I Want is below pic as a result
this is to show user profiles or different users inside this container like this, please help me out with how to do this I would really like you to appreciate your help, thanks in advance
What I did so far:
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Color(0XFF8134AF),
Color(0XFFDD2A7B),
Color(0XFFFEDA77),
Color(0XFFF58529),
],
),
shape: BoxShape.circle),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage(
IconAssets.user_icon,
),
fit: BoxFit.cover,
),
),
margin: EdgeInsets.all(AppMargin.m2),
padding: const EdgeInsets.all(AppPadding.p3),
),
),
Result:
please help me out how to create like above picture , thank you
I am using PathOperation.difference to paint the moon.
class MoonPainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
final center = Offset(size.width / 2, size.height / 2);
final paint = Paint()
..shader = const LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Color(0XFF8134AF),
Color(0XFFDD2A7B),
Color(0XFFFEDA77),
Color(0XFFF58529),
],
).createShader(Rect.fromLTRB(0, 0, size.width, size.height));
Path path1 = Path()
..addOval(Rect.fromCenter(
center: center, width: size.width, height: size.height));
Path path2 = Path()
..addOval(
Rect.fromCenter(
center: Offset(
center.dx - 10,
center.dy - 10,
),
width: size.width - 10,
height: size.height - 10,
),
);
canvas.drawPath(
Path.combine(PathOperation.difference, path1, path2),
paint,
);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}
SizedBox(
width: 300,
height: 300,
child: CustomPaint(
painter: MoonPainter(),
),
),
You can include another oval inside paint. Change the color and decorate the way you like
Is this what you want?
child: Container(
width: 400,
height: 400,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Color(0XFF8134AF),
Color(0XFFDD2A7B),
Color(0XFFFEDA77),
Color(0XFFF58529),
],
),
shape: BoxShape.circle),
child: Align(
child: Container(
width: 350,
height: 350,
decoration: BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle,
),
),
),
),
This gives you a basic idea of how you can draw an arc using paint and place it over another widget.
https://dartpad.dev/?null_safety=true&id=0cc9f5ad27e13bc76b8cee125dabfd71
see below image
I want create a container(or other widget) with custom shape that like same as image.
I don't want create content in that, just shape of that.
This isn't BorderRadius, because those sides is curved.(I want create this sides like that image).
I prefer that implemented without CustomPaint.
Thank you
It totally border radius bro just try The width & height
Align(
child: Container(
height: 50,
width: 100,
margin: EdgeInsets.only(top: 40, left: 40, right: 40),
decoration: new BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.black, width: 0.0),
borderRadius: new BorderRadius.all(Radius.elliptical(100, 50)),
),
child: Text(' '),
),
),
I have a Divider widget with a solid color but I want to set it to a gradient color. Is there a way to do this?
Divider(
height: 20,
thickness: 2.5,
indent: 0,
endIndent: 100,
)
Just use a Container() with [BoxDecoration][1] to create a gradient.
SizedBox(
width: 200,
height: 4,
child: Container(
decoration: BoxDecoration(
gradient: //...
),
),
),
The pre-defined divider is good but not powerful when it comes to customization.
[1]: https://api.flutter.dev/flutter/painting/BoxDecoration-class.html
If you wish to use the exact same parameters as the official Divider and yet have the possibility to gradient AND to round these nasty square sides, you can use this ds is my DividerStyle containing the parameters:
return SizedBox(
height: ds.heigth,
child: Center(
child: Container(
height: ds.thickness,
margin: EdgeInsetsDirectional.only(start: ds.indent, end: ds.endIndent),
decoration: BoxDecoration(
color: ds.color.getColor(),
gradient: ds.color.getGradient(),
borderRadius: ds.roundEdge
? BorderRadius.all(Radius.circular(ds.thickness))
: null,
border: Border.all(color: Colors.transparent, width: 1),
),
),
),
);