How to add following decoration to TextFormField in flutter?

Question

Following is my code where I am trying to add form TextFormField with decoration as seen in mock:

• Rounded border
• Background colour to grey
• First email and then password with text not visible
• Where password field will have show button to make password visible
• finally a rounded submit button

MOCK:

CODE:

class MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    // Build a Form widget using the _formKey created above.
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          TextFormField(
            decoration: InputDecoration(
              fillColor: Colors.grey,
              focusColor: Colors.grey
            ),
            validator: (value) {
              if (value.isEmpty) {
                return 'Your email';
              }
              return null;
            },
          ),
          TextFormField(
            decoration: InputDecoration(
              fillColor: Colors.grey,
              focusColor: Colors.grey
            ),
            validator: (value) {
              if (value.isEmpty) {
                return 'Your password';
              }
              return null;
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: RaisedButton(
              onPressed: () {
                // Validate returns true if the form is valid, or false
                // otherwise.
                if (_formKey.currentState.validate()) {
                  // If the form is valid, display a Snackbar.
                  Scaffold.of(context)
                      .showSnackBar(SnackBar(content: Text('Processing Data')));
                }
              },
              child: Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}

EDIT:

How to change color of this label ?

Popple

Answer 1

You can use borderRadius in OutlineInputBorder to make it roundable.

 @override
  Widget build(BuildContext context) {
    // Build a Form widget using the _formKey created above.
    return Scaffold(
        appBar: AppBar(
          title: Text('Testing'),
        ),
        body: Form(
          child: Column(
            key: _formKey,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Padding(
                  padding: EdgeInsets.all(10),
                  child: Container(
                      decoration: BoxDecoration(
                        color: Colors.grey,
                        borderRadius: new BorderRadius.circular(10.0),
                      ),
                      child: Padding(
                          padding: EdgeInsets.only(left: 15, right: 15, top: 5),
                          child: TextFormField(
                              decoration: InputDecoration(
                            border: InputBorder.none,
                            labelText: 'Email',
                          ))))),
              Padding(
                padding: EdgeInsets.all(10),
                child: Stack(
                  alignment: const Alignment(0, 0),
                  children: <Widget>[
                    Container(
                        decoration: BoxDecoration(
                          color: Colors.grey,
                          borderRadius: new BorderRadius.circular(10.0),
                        ),
                        child: Padding(
                            padding:
                                EdgeInsets.only(left: 15, right: 15, top: 5),
                            child: TextFormField(
                                obscureText: true,
                                decoration: InputDecoration(
                                  border: InputBorder.none,
                                  labelText: 'Your password',
                                )))),
                    Positioned(
                        right: 15,
                        child: RaisedButton(
                            onPressed: () {
                              // _controller.clear();
                            },
                            child: Text('SHOW')))
                  ],
                ),
              ),
              Padding(
                  padding: const EdgeInsets.all(10),
                  child: Container(
                    height: 50,
                    width: double.infinity,
                    child: RaisedButton(
                      color: Colors.green,
                      onPressed: () {
                        // Validate returns true if the form is valid, or false
                        // otherwise.
                        if (_formKey.currentState.validate()) {
                          // If the form is valid, display a Snackbar.
                          Scaffold.of(context).showSnackBar(
                              SnackBar(content: Text('Processing Data')));
                        }
                      },
                      child: Text(
                        'Submit',
                        style: TextStyle(color: Colors.white),
                      ),
                      shape: RoundedRectangleBorder(
                          borderRadius: new BorderRadius.circular(18.0),
                          side: BorderSide(color: Colors.green)),
                    ),
                  )),
            ],
          ),
        ));
  }

Output

Edit

You can change the border color when it is clicked

     @override
  Widget build(BuildContext context) {
    // Build a Form widget using the _formKey created above.
    return Scaffold(
        appBar: AppBar(
          title: Text('Testing'),
        ),
        body: Form(
          child: Column(
            key: _formKey,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.all(10),
                child: TextField(
                  autofocus: false,
                  style: TextStyle(fontSize: 15.0, color: Colors.black),
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    hintText: 'Username',
                    filled: true,
                    fillColor: Colors.grey,
                    contentPadding: const EdgeInsets.only(
                        left: 14.0, bottom: 6.0, top: 8.0),
                    focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.red),
                      borderRadius: BorderRadius.circular(10.0),
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.grey),
                      borderRadius: BorderRadius.circular(10.0),
                    ),
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.all(10),
                child: Stack(
                  alignment: const Alignment(0, 0),
                  children: <Widget>[
                    TextField(
                      obscureText: true,
                      autofocus: false,
                      style: TextStyle(fontSize: 15.0, color: Colors.black),
                      decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: 'password',
                        filled: true,
                        fillColor: Colors.grey,
                        contentPadding: const EdgeInsets.only(
                            left: 14.0, bottom: 6.0, top: 8.0),
                        focusedBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.red),
                          borderRadius: BorderRadius.circular(10.0),
                        ),
                        enabledBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: Colors.grey),
                          borderRadius: BorderRadius.circular(10.0),
                        ),
                      ),
                    ),
                    Positioned(
                        right: 15,
                        child: Container(
                            width: 65,
                            height: 30,
                            child: RaisedButton(
                                onPressed: () {
                                  // _controller.clear();
                                },
                                child: Text(
                                  'SHOW',
                                  style: TextStyle(fontSize: 8),
                                ))))
                  ],
                ),
              ),
              Padding(
                  padding: const EdgeInsets.all(10),
                  child: Container(
                    height: 50,
                    width: double.infinity,
                    child: RaisedButton(
                      color: Colors.green,
                      onPressed: () {
                        // Validate returns true if the form is valid, or false
                        // otherwise.
                        if (_formKey.currentState.validate()) {
                          // If the form is valid, display a Snackbar.
                          Scaffold.of(context).showSnackBar(
                              SnackBar(content: Text('Processing Data')));
                        }
                      },
                      child: Text(
                        'Submit',
                        style: TextStyle(color: Colors.white),
                      ),
                      shape: RoundedRectangleBorder(
                          borderRadius: new BorderRadius.circular(18.0),
                          side: BorderSide(color: Colors.green)),
                    ),
                  )),
            ],
          ),
        ));
  }

Output

Splenic

Yeah this works but why does it not shown when typing inside the text field – Popple

the oultine border – Popple

Hi, do you how to change the color of label text after clicking. i.e as it gets small – Popple

I can't change the label text color, only border color will do – Splenic

Answer 2

Just Use this 2 properties inside InputDecorationTheme

filled: true,
fillColor: //your color,

Curriculum

Answer 3

I have recreated the components of the question.

Many features like RaisedButton, Scaffold.of have changed in the flutter. I have updated the code and used FilledButton, ScaffoldMessendger.

Here is dartpad display

https://dartpad.dev/cb428c2ac6d9427d4ca5330ec7ceb0bc

View Image here.

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool obscurePassword = true;
  TextEditingController controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    final formKey = GlobalKey<FormState>();
    return Scaffold(
      appBar: AppBar(title: const Text('Fun'), centerTitle: true),
      body: Center(
        child: SizedBox(
          width: 300,
          height: 400,
          child: Card(
            color: Colors.white,
            surfaceTintColor: Colors.white,
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Form(
                key: formKey,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    TextFormField(
                      decoration: InputDecoration(
                        fillColor: Colors.grey.shade300,
                        filled: true,
                        labelText: 'Your Email',
                        floatingLabelBehavior: FloatingLabelBehavior.never,
                        border: OutlineInputBorder(borderRadius: BorderRadius.circular(12.0), borderSide: BorderSide.none),
                      ),
                      keyboardType: TextInputType.emailAddress,
                      validator: (value) {
                        if (value!.isEmpty) return 'Your email';
                        return null;
                      },
                    ),
                    const SizedBox(height: 16),
                    TextFormField(
                      controller: controller,
                      decoration: InputDecoration(
                        fillColor: Colors.grey.shade300,
                        filled: true,
                        labelText: 'Your Password',
                        floatingLabelBehavior: FloatingLabelBehavior.never,
                        border: OutlineInputBorder(borderRadius: BorderRadius.circular(12.0), borderSide: BorderSide.none),
                        suffixIcon: TextButton(
                          onPressed: () {
                            if (obscurePassword == false) {
                              setState(() => obscurePassword = true);
                            } else {
                              setState(() => obscurePassword = false);
                            }
                          },
                          child: Container(
                            decoration: BoxDecoration(borderRadius: BorderRadius.circular(4), color: Colors.grey.shade200),
                            child: Padding(padding: const EdgeInsets.all(4.0), child: Text(obscurePassword == true ? 'SHOW' : 'HIDE', style: TextStyle(fontSize: 8, color: Colors.grey.shade500))),
                          ),
                        ),
                      ),
                      obscureText: obscurePassword,
                      validator: (value) {
                        if (value!.isEmpty) return 'Your password';
                        return null;
                      },
                    ),
                    const SizedBox(height: 8),
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 16.0),
                      child: Container(
                        decoration: BoxDecoration(gradient: const LinearGradient(colors: [Colors.green, Colors.greenAccent], begin: Alignment.bottomCenter, end: Alignment.topCenter), borderRadius: BorderRadius.circular(36)),
                        child: FilledButton(
                          style: FilledButton.styleFrom(minimumSize: const Size(double.infinity, 48), backgroundColor: Colors.transparent, foregroundColor: Colors.white),
                          onPressed: () {
                            if (formKey.currentState!.validate()) ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Processing Data')));
                          },
                          child: const Text('SIGN IN', style: TextStyle(fontSize: 11, letterSpacing: 2)),
                        ),
                      ),
                    ),
                    const Expanded(child: SizedBox(height: 16)),
                    const Align(alignment: Alignment.centerRight, child: Text('CREATE ACCOUNT', style: TextStyle(fontSize: 9, letterSpacing: 2))),
                    const Divider(),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Geny

Answer 4

Container(
        padding:EdgeInsets.only(top:20,right:10,left:10),
        child:Card(
          shape:RoundedRectangleBorder(
            borderRadius:BorderRadius.circular(20),
          ),
          color:Colors.grey,
          child: Container(
            padding:EdgeInsets.only(left:12),
            child: TextFormField(
                  decoration:InputDecoration(
                    hintText:"You phone number here...",
                    border:InputBorder.none,
                    fillColor:Colors.white,
                  ),
                ),
          ),
        ),
      ),

Recession