How to Disable TextField Input in Flutter Form

In this example, we are going to show you the easiest way to disable TextField or TextFormField Form Input in Flutter App. In some context, you may need to disable TextField. See the example below to disable TextField input in Flutter.

Disabel TextField() Input:

TextField(
  decoration: InputDecoration( 
    labelText: "Your Name (Disabled)",
    enabled: false //disabel this text field input
  )
)

Disable TextFormField() Input:

TextFormField(
  decoration: InputDecoration( 
    labelText: "Your Email Address (Disabled)",
  ),
  enabled: false, //disable this textformfield input
)

Full Dart Code Example:

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Disable TextField"),
             backgroundColor: Colors.deepOrangeAccent,
          ),
          body: Container(
            padding: EdgeInsets.all(20),
            child: Column(children: [
                     TextField(
                       decoration: InputDecoration( 
                         labelText: "Your Name (Disabled)",
                         enabled: false //disabel this text field input
                       )
                     ),

                     TextFormField(
                       decoration: InputDecoration( 
                         labelText: "Your Email Address (Disabled)",
                       ),
                       enabled: false, //dsable this textformfield input
                     ),

                     TextField(
                       decoration: InputDecoration( 
                         labelText: "Your Address (Enabled)",
                       )
                     ),
                ],
            )
          )
       );
  }
}

Output Screenshot:

In this way, you can disable TextField or TextFormField Input in Flutter App.

No any Comments on this Article


Please Wait...