Flutter Disable TextField

Same as Button widget TextField can also support Disabled feature. TextField has a property enabled. Enabled determines whether TextField should be activated or not by passing false value. If we pass false value in enabled then it disabled the TextField and set border decoration into Grey color.

Flutter Disable TextField

1. Creating TextEditingController() to control TextField typed text.

  final nameController = TextEditingController();

2. Creating a Boolean variable with default True value. Here True determines TextField is activated in default state.

  bool inputDisabled = true;

3. Creating a String variable. We will use this string to render button above text.

   String buttonText = "Disable TextField";

4. Creating a function to change inputDisabled values and button values as per condition.

 disabledTextField() {
    if (inputDisabled == true) {
      setState(() {
        inputDisabled = false;
        buttonText = "Enable TextField";
      });
    } else {
      setState(() {
        inputDisabled = true;
        buttonText = "Disable TextField";
      });
    }
  }

5. Creating TextField with enabled property and button to dynamically update state.

Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: < Widget >[
          Container(
              //width: 260,
              padding: const EdgeInsets.all(10.0),
              child: TextField(
                enabled: inputDisabled,
                controller: nameController,
                decoration: const InputDecoration(
                  labelText: 'Enter Text Here ',
                  border: OutlineInputBorder(),
                ),
              )),
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.blue,
            ),
            onPressed: disabledTextField,
            child: Text(buttonText),
          ),
        ],
      ),

Screenshots:

Source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(body: Center(child: App())));
  }
}

class App extends StatefulWidget {
  @override
  AppState createState() => AppState();
}

class AppState extends State {
  final nameController = TextEditingController();
  String buttonText = "Disable TextField";

  bool inputDisabled = true;

  disabledTextField() {
    if (inputDisabled == true) {
      setState(() {
        inputDisabled = false;
        buttonText = "Enable TextField";
      });
    } else {
      setState(() {
        inputDisabled = true;
        buttonText = "Disable TextField";
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: < Widget>[
          Container(
              //width: 260,
              padding: const EdgeInsets.all(10.0),
              child: TextField(
                enabled: inputDisabled,
                controller: nameController,
                decoration: const InputDecoration(
                  labelText: 'Enter Text Here ',
                  border: OutlineInputBorder(),
                ),
              )),
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.blue,
            ),
            onPressed: disabledTextField,
            child: Text(buttonText),
          ),
        ],
      ),
    ));
  }
}