Upgrade & Secure Your Future with DevOps, SRE, DevSecOps, MLOps!
We spend hours on Instagram and YouTube and waste money on coffee and fast food, but won’t spend 30 minutes a day learning skills to boost our careers.
Master in DevOps, SRE, DevSecOps & MLOps!
Learn from Guru Rajesh Kumar and double your salary in just one year.
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
)
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,
),
),
)
);
}
}
Output Screenshot:
