hxdef
hxdef

Reputation: 413

How to add an extra label within TextFormField?

Is there a way to position "Forget password" label inside a TextFormField?

sample

On a sample picture put forget password? right inside the input

new TextFormField(
                    decoration: InputDecoration(labelText: 'Password',
                      labelStyle: TextStyle(
                        color: Colors.black87,
                        fontSize: 17,
                        fontFamily: 'AvenirLight'
                      ),
                      focusedBorder: UnderlineInputBorder(      
                        borderSide: BorderSide(color: Colors.purple),   
                      ),
                      enabledBorder: new UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.grey, 
                          width: 1.0)
                      ),
                    ),
                    style: TextStyle(
                      color: Colors.black87,
                      fontSize: 17,
                      fontFamily: 'AvenirLight'
                    ),
                    controller: _passwordController,
                    obscureText: true,
                  ),

Upvotes: 8

Views: 16652

Answers (1)

anmol.majhail
anmol.majhail

Reputation: 51176

use the Suffix: property of - InputDecoration:

TextFormField(
            decoration: InputDecoration(
              suffix: GestureDetector(
                onTap: () {
                  print('tapped');
                },
                child: Text(
                  'Forgot Password?',
                  style: TextStyle(
                      color: Colors.blue, fontWeight: FontWeight.bold),
                ),
              ),
              labelText: 'Password',
              labelStyle: TextStyle(
                  color: Colors.black87,
                  fontSize: 17,
                  fontFamily: 'AvenirLight'),
              focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.purple),
              ),
              enabledBorder: new UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.grey, width: 1.0)),
            ),
            style: TextStyle(
                color: Colors.black87, fontSize: 17, fontFamily: 'AvenirLight'),
            //  controller: _passwordController,
            obscureText: true,
          ),

<code>enter image description here</code>

Upvotes: 11

Related Questions