How to Disable TextField in Flutter

Even though rare, you may want to disable your TextInput widget in some scenarios. In this Flutter tutorial, let’s check how to disable TextField.

Disabling TextField is very easy. TextField has a property named enabled. Just make the enabled prop false to disable the TextField.

TextField(
          enabled: false,
            ),

Following is the complete example.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Disable TextField',
      home: FlutterExample(),
    );
  }
}

class FlutterExample extends StatefulWidget {
  @override
  _FlutterExampleState createState() => _FlutterExampleState();
}

class _FlutterExampleState extends State<FlutterExample> {
  final myController = TextEditingController();

  @override
  void dispose() {
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Disabled TextField'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16),
          child: Center(
            child: TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                hintText: 'Enter your name',
              ),
              enabled: false,
              controller: myController,
            ),
          ),
        ));
  }
}

Following is the output.

That’s how you disable TextField in Flutter. If you want to make TextInput read only then go here.