This is simple and yet fancy textform field component which can be used in any form validation or login page.


This TextFormField offers wide range support with beautiful fill in color and border without loosing any property of TextField.


There are number of textfield property that you can use and modify:

  • secure text(Secure Text)
  • suffix widget
  • prefix widget
  • selected border color
  • filled color
  • line height for normal text field and detail description field

class MyAppCard extends StatefulWidget {
  const MyAppCard({Key? key}) : super(key: key);
  _MyAppCardState createState() => _MyAppCardState();
class _MyAppCardState extends State<MyAppCard> {
  Widget build(BuildContext context) {
    return Scaffold(
      body: ElegantInputField(
        hintText: 'Enter username',
        labelText: 'Username',
        filledColor: Colors.grey.shade200,
        onChange: (String st) {},
        prefixWidget: const Icon(Icons.person),
        onDone: () {},

Additional information