'How do I add shadow to a TextField when having a maxLength or minLength property?

I have a normal TextField that I want some shadow on it but I haven't found the solution to this problem. My TextField has the maxLength property so I have a small character count below it that I want to keep.

Whenever I wrap this TextField in a Material or Container widget and use the shadow properties, the shadow is applied to the whole area of the TextField and the result is a disaster like you can see:

enter image description here

How can I add some shadow to only the Input bar like the Google search bar?

I removed many properties to make the example more clear:

TextField(
              maxLength: 40,
              decoration: InputDecoration(
                filled: true,
                fillColor: kSomeColor,
                border: OutlineInputBorder(borderRadius: BorderRadius.all(
                    Radius.circular(80),
                  ),
                ),
              ),
            ),

EDIT: If you add some errorText or labelText you will have the same problem



Solution 1:[1]

I have achieved the same effect using a stack and adding shadow to another container.

enter image description here

          Stack(
            children: [
              Container(
                height: 60,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(
                    Radius.circular(80),
                  ),
                  boxShadow: [
                    BoxShadow(
                        color: Colors.grey, blurRadius: 5, spreadRadius: 5),
                  ],
                ),
              ),
              Container(
                height: 80,
                child: TextFormField(
                  maxLength: 40,
                  decoration: InputDecoration(
                    filled: true,
                    fillColor: Colors.lightBlue[900],
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(80),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nehal