How to Make TextField widget Read Only in Flutter App

In this example, we are going to show you the way to make TextField() widget read only. Sometime you may need to show your text in TextField with read only attribute. See the example below to make text field read-only on Flutter app.

To make TextField() read only:

TextField(
  readOnly: true, //boolean, true or false
)Code language: JavaScript (javascript)

Use readOnly property of TextField() to make TextField read only or not.

Full 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 StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  TextEditingController myinput = TextEditingController();
  @override
  void initState() {
    myinput.text = "This is the default text";
    super.initState();
  }
  
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Read only TextField"),
             backgroundColor: Colors.deepOrangeAccent,
          ),
          body: Container(
            padding: EdgeInsets.all(20),
            child: Center( 
              child: TextField( 
                controller: myinput,
                readOnly: true,
              ),
            ),
          )
       );
  }
}Code language: JavaScript (javascript)

Output Screenshot: