razan
razan

Reputation: 23

how can i disable/enable TextFormField based on a selected value from DropDowButton in flutter?

i'm working on a flutter application and i have created a DropDowButton menu with 2 items (private chat and phone number) and a TextFormField phonenum.

when phone number is selected, i want to enable the TextFormField phonenum. otherwise it's always disable.

is there a way to do this? thanks in advance!

here's my cod:

Widget menu(){
  return DropdownButtonFormField(
    decoration: InputDecoration(
      border: OutlineInputBorder(),
      labelText: 'select a way to contact with the buyer',
      labelStyle: TextStyle(
          fontSize: 16,
          color: Colors.grey,
          fontFamily: 'Almarai'
        ),
    ),
  items: <String>['phone number', 'private chat'].map((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
  onChanged: (String? newValue) {
    setState(() {
      dropdownvalue = newValue!;
    });
  },
);
}

 Widget phonenum(){
    return 
    TextFormField( 
      maxLength: 10,
      decoration: InputDecoration(
        border: OutlineInputBorder(),
        labelText: 'phone number',
        labelStyle: TextStyle(
          fontSize: 16,
          color: Colors.grey,
          fontFamily: 'Almarai'
        ),
      ),
    );
  }

Upvotes: 0

Views: 377

Answers (1)

Guillaume Roux
Guillaume Roux

Reputation: 7328

The TextFormField widget has an enabled property which you can use:

TextFormField(
  enabled: dropdownvalue == 'phone number',
  // ...         
);

Try the full test code on DartPad

Screenshots

Disabled Field

enter image description here

Enabled Field

enter image description here

Upvotes: 1

Related Questions