Can I custom TextField suffixIcon with background? - flutter

Question

I want the text field search icon (suffix) to have a green background, then my text field using shadow not border. Can u help me with this? or this one cannot implement in flutter?
Here my code:
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15),
borderSide: BorderSide(
width: 0,
style: BorderStyle.solid,
),
),
contentPadding: EdgeInsets.only(left: 25),
hintText: "Bandung, Jawa Barat",
hintStyle: TextStyle(fontSize: 15, color: Colors.black45),
filled: true,
fillColor: Colors.white,
prefixIcon: Image.asset('assets/img/map.png', height: 15),
suffixIcon: Image.asset('assets/img/search.png', color: Colors.green),
suffixIconConstraints: BoxConstraints(
minWidth: 50,
)
),
)
to

Answer 1

To obtain shadow for your TextField widget, one option is Material widget. Wrap your Textfield with Material widget which has properties like elevation, shadowColor, borderRadius. It is cleaner option for shadow than Container widget which has property decoration.
Output
Copy paste this below code to see the effect:
class CustomTextField extends StatefulWidget {
#override
_CustomTextField State createState() => _CustomTextField State();
}
class _CustomTextField State extends State<CustomTextField > {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(height: 25),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 10.0),
child: Material(
elevation: 5.0,
shadowColor: Colors.green,
borderRadius: BorderRadius.circular(15.0),
child: TextFormField(
obscureText: true,
autofocus: false,
decoration: InputDecoration(
hintText: 'Search here',
hintStyle:
TextStyle(fontSize: 16, color: Colors.black45),
fillColor: Colors.white,
filled: true,
prefixIcon: Icon(Icons.person, color: Colors.green),
suffixIcon: Material(
elevation: 5.0,
color: Colors.green,
shadowColor: Colors.green,
borderRadius: BorderRadius.only(
topRight: Radius.circular(15.0),
bottomRight: Radius.circular(15.0),
),
child: Icon(Icons.search, color: Colors.white),
),
contentPadding:
EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(15.0),
borderSide:
BorderSide(color: Colors.white, width: 3.0))),
),
),
),
],
),
),
),
),
);
}
}