Flutter: Make a TextField Read-Only or Disabled

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.Advertisements

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

AdvertisementsHere’s the full source code in main.dart (with explanations). It has been recently updated to work properly with the latest versions of Flutter.

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // This controller is connected to the text field
  late 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: const 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: const InputDecoration(
                labelText: 'Label',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(
              height: 30,
            ),
            SwitchListTile(
              value: _isReadonly,
              onChanged: (value) {
                setState(() {
                  _isReadonly = value;
                });
              },
              title: const Text('TextField is read-only'),
            ),
            SwitchListTile(
              value: _isDisabled,
              onChanged: (value) {
                setState(() {
                  _isDisabled = value;
                });
              },
              title: const Text('TextField is disabled'),
            ),
          ],
        ),
      ),
    );
  }
}

Conclusion

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

• Flutter: Adding a Clear Button to a TextField
• Flutter: Add a Character Counter to TextField
• Flutter: Show/Hide Password in TextField/TextFormField
• Flutter StreamBuilder examples
• Flutter and Firestore Database: CRUD example

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