I have a textfield that has a kind of transparent background with border and then some kind of glow on the inside that makes it pop.
I need help as I don't know how to achieve this glow. I have tried wrapping the textfield in a container with a linear gradient, but it only makes the glow appear at one edge.
Here is a picture of what I have currently and what I want, side by side.
left is what I have, and the right is what I'm trying to achieve
You are trying to add inner shadow with blur. Use BoxDecoration in Container and tweak spreadRadius and blurRadius as per your need.
Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.blue[500]!,
),
BoxShadow(
color: Colors.blue[900]!,
spreadRadius: -5.0,
blurRadius: 5.0,
),
],
),
child: TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
),
),
),
Related
I want to use this icon on my Flutter app, unfortunately I do not know the name. Someone could tell me what's the name?
the three points icon is:
Icon(Icons.more_horiz)
and you can reach the same shape over it like this:
Container(
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
border: Border.all(
color: Colors.black,
width: 1,
),
),
child: Icon(Icons.more_horiz),
),
this will result in something like this, I didn't compare them, so changing just the padding and border, and border radius values will get you there
I want to display a numerical text in a circle. I tried the following, but it looks fuzzy
Container(child: Text(len),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(width: 2)))
This is how it looks 👇. BTW it's number 2 in a circle.
CircleAvatar(
radius: 20,
child: Text('$value'),
),
If you want add spacing between the border and the Edge of the border, you can either add a Padding with EdgeInsets or reduce the fontSize of the Text
Visit the Flutter Docs for more information and an example.
Answer is somewhat obvious. Add this property to container padding: EdgeInsets.all(5)
Container(
width:40.0,
height:40.0,
child: Center(child:Text(len)),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(width: 2))),
i have tried many solution but i couldn't get what i want.
https://stackoverflow.com/a/56744034/4862911 i applied in this answer but couldn't get correct response. There is still shadow top of container. How can i achieve it?
and also i have tried to surround my widget with Material . but still can't solve the problem.
Material(
elevation: 5,
child: Container(
height: 50,
child: _buildEloAndLevel(),
),
),
Material(
elevation: 5,
child: Container(
height: 50,
child: _buildEloAndLevel(),
// add boxShadow
decoration: BoxDecoration(
boxShadow: [
color: Colors.black54,
blurRadius: 15.0,
],
),
),
),
This will create a shadow of 15 units arounds the Container. Now, the shadow can be moved with the offset property. Since, we don't want shadow on top, we can move it down by 15 units.
Material(
elevation: 5,
child: Container(
height: 50,
child: _buildEloAndLevel(),
// add boxShadow
decoration: BoxDecoration(
boxShadow: [
color: Colors.black54,
blurRadius: 15.0,
offset: Offset(0, 15), // horizontally move 0, vertically move 15,
],
),
),
),
I don't know if other examples are really setting a shadow for only bottom, but here is a know solution:
Container(
height: 50.0,
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black54,
blurRadius: 20.0,
spreadRadius: -20.0,
offset: Offset(0.0, 25.0),
)
],
color: Colors.red,
),
),
Set the blur of the shadow with blurRadius and then set the spreadRadius to negative the blurRadius then use the dy property of the Offset() constructor, you set it to positive values to control the shadow bottom.
All you need to do is playing around with your offset's value. And I think you don't need to wrap it with Material.
Offset is the displacement of the shadow from the box. It requires 2 double-types values, Offset(x, y);
Example:
Container(
height: 50.0,
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black54,
offset: Offset(15.0, 20.0),
blurRadius: 20.0,
)
],
color: Colors.red,
),
),
TIPS FROM ME: To make sure the shadow doesn't show up in the top of your container, make sure your blur radius is not bigger than your Offset's y-value.
I wonder how to achieve the following effect. A circle with an inset shadow that also has a gradient.
I managed to get an inset shadow but with even color. I would need a gradient on the inset I think.
Container(
height: 300,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Color(0xffa3b1c6), // darker color
),
BoxShadow(
color: Color(0xffe0e5ec), // background color
spreadRadius: -12.0,
blurRadius: 12.0,
),
],
),
),
Gives the following:
Design like that is called Neumorphic design.
The central point of Neumorphism are shadows, which are giving the interface this feel of a surface carefully carved with a spherical drill.
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(bevel),
color: Colors.grey.shade200,
boxShadow: [
BoxShadow(
blurRadius: bevel,
offset: -blurOffset,
color: Colors.white,
),
BoxShadow(
blurRadius: bevel,
offset: blurOffset,
color: Colors.grey.shade400
)
]),
child: child,
);
The above code creates a white bevel for light and a dark one for shadow.
But this medium article shows how you can do it better.
There's also this nifty library that I use called the neumorphic container library that helps to handle this for me.
EDIT: #nilsi shared a much better library that makes neumorphic design simple in flutter: flutter_neumorphic
Bottom Shadow
Hi I am new to flutter and trying to create this design from Shakuro of dribble. I am getting trouble trying to create elevation for the clipper because the whole rectangle is getting the shadow instead of the clipper only.
Is there a way to put elevation or similar effect like shadow underneath the clipper?
You can wrap your child inside a Container with Circle shape in your BoxDecoration like this:
new Container(
height: 300.0,
width: 300.0,
child: Center(child: Text("Your child here")),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 5.0,
offset: Offset(5.0, 5.0),
spreadRadius: 5.0)
],
),
)
Result: