Flutter: Add Drop Shadow to TextField OR TextFormField [Solved]

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 TextField or TextFormField shadows in flutter?

You can use a Material widget provided by the flutter framework.

OR

You can use a Container widget that has a shadow set in the decoration parameter.

Here, you’ll understand both methods. You can use any method according to your requirement which solves your problem.

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 TextField or TextFormField you can use the Material widget. Just wrap TextField or TextFormField with 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

The Container is the most common flutter layout widget. You normally use it to layout different parts of your flutter UI.

You can set padding, color, and different things using a Container. But when you go one step ahead with the Container you start using the decoration parameter for TextField elevation.

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.

So in Decoration, you can pass different kinds of widgets like BoxDecoration, FlutterLogoDecoration, ShapeDecoration, UnderlineTableIndicator, etc.

Here in this example, your main purpose is to add shadow effect behind your TextField.

TextField visually represents a box and for that purpose, you use a BoxDecoration widget as a child. BoxDecoration supports different properties like border, color, gradient, etc.

But our concern for example is the use of the boxShadow property which will take a list of BoxShadow objects.

BoxShadow

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 offset value, blurRadius and spreadRadius.

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),
          ),
        ],
      ),
    );

Conclusion

You learn about the ways to add material elevation or shadow for TextField or TextFormField in your flutter app.

Read More:

• How to use Hex Colors in Flutter
• Create gradient screen background
• How to show loading dialog
• FLutter Stepper widget

Thanks