'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:
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.
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 |