Your designer gives you a design with a lot of text input fields for login and contact forms.
That is OK.
But the problem is there is a shadow effect below these text fields.
How can you add these
TextFormField shadows in flutter?
You can use a
Material widget provided by the flutter framework.
You can use a
Container widget that has a shadow set in the
Here, you’ll understand both methods. You can use any method according to your requirement which solves your problem.
In this Article
Add Shadow Using Material
Material widget is useful when you have to add clipping behavior, elevation, and Ink effect to the children.
Material has an
elevation property that takes
double as an input. And add the shadow effect beneath the material based on that input value.
For changing the shadow color you use the
shadowColor property of the material. Which takes the
Color object as input.
For adding a drop shadow to flutter
TextFormField you can use the
Material widget. Just wrap TextField or
Material widget and set elevation and shadow color.
Material( elevation: 18, shadowColor: Colors.purple, child: TextField( decoration: InputDecoration( fillColor: Colors.white, filled: true, ), ), ), )
Add Shadow Using Container
Container is the most common flutter layout widget. You normally use it to layout different parts of your flutter UI.
You can set
color, and different things using a
Container. But when you go one step ahead with the
Container you start using the
decoration parameter for
decoration property is useful when you want to paint behind the child widget. The
decoration is a type of flutter painting abstract class of Decoration.
Decoration, you can pass different kinds of widgets like
Here in this example, your main purpose is to add shadow effect behind your
TextField visually represents a box and for that purpose, you use a
BoxDecoration widget as a child.
BoxDecoration supports different properties like
But our concern for example is the use of the
boxShadow property which will take a list of
Create a shadow that is displayed behind the box. According to docs.
This class is similar to CSS box-shadow.
You can pass
color and set the
Let’s see the code
Container( child: TextField( decoration: InputDecoration( fillColor: Colors.white, filled: true, ), ), decoration: BoxDecoration( boxShadow: [ BoxShadow( color: Colors.black38, blurRadius: 25, offset: const Offset(0, 10), ), ], ), );
You learn about the ways to add material elevation or shadow for
TextFormField in your flutter app.
- How to use Hex Colors in Flutter
- Create gradient screen background
- How to show loading dialog
- FLutter Stepper widget