Flutter: Make a TextField Read-Only or Disabled

Last updated on April 3, 2021 A Goodman Loading... Post a comment

This article shows you how to make a TextFiled read-only or disabled in Flutter.

Overview

If a TextField is disabled, it can not be focused and ignores taps. We can control whether a TextField is disabled or enabled by setting its enable property to false or true, respectively.

TextField(
  enable: // "true" or "false"
),

If a TextField is read-only, it can be focused and its text is still selectable. However, the text can NOT be modified by any shortcut or keyboard operation. We can control whether a TextField is read-only or not by setting its readOnly property to true or false, respectively.

TextField(
  readOnly: // "true" or "false"
),

An example is worth more than a thousand of words. Let’s see the code.

Example

Preview

This example app contains a text field (TextField is used but you can use TextFormField as well) and 2 switches (SwitchListTile). By using the first switch, we can make the textfield become read-only or not read-only. By using the second switch, we can disable or enable the text field.

The code

Here’s the full source code in main.dart:

// main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // This controller is connected to the text field
  TextEditingController _controller;

  // Whether the textfield is read-only or not
  bool _isReadonly = false;

  // Whether the text field is disabled or enabled
  bool _isDisabled = false;

  @override
  void initState() {
    _controller = TextEditingController(text: 'Default Text');
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(vertical: 80, horizontal: 30),
        child: Column(
          children: [
            TextField(
              readOnly: _isReadonly,
              enabled: !_isDisabled, 
              // _isDisabled = false -> enbalbe = true
              // _isDisabled = true -> enable = false
               
        
              controller: _controller,
              decoration: InputDecoration(
                labelText: 'Label',
                border: OutlineInputBorder(),
              ),
            ),
            SizedBox(
              height: 30,
            ),
            SwitchListTile(
              value: _isReadonly,
              onChanged: (value) {
                setState(() {
                  _isReadonly = value;
                });
              },
              title: Text('TextField is read-only'),
            ),
            SwitchListTile(
              value: _isDisabled,
              onChanged: (value) {
                setState(() {
                  _isDisabled = value;
                });
              },
              title: Text('TextField is disabled'),
            ),
          ],
        ),
      ),
    );
  }
}

Conclusion

You’ve learned how to make a TextField become disabled or readonly. Continue learning more about TextField and other interesting things in Flutter by taking a look at the following articles:

You can also check out our Flutter topic page or Dart topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles