Disable edit textbox in awe
This is not a feature that is currently provided by the framework, but you can use FocusScope
to prevent it TextFormField
from requesting focus.
This is where it looks when it is disabled.
(with hint text)
(with read value)
This is how it looks when it's on.
(with focus)
(no focus)
The code for this is below:
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
home: new HomePage(),
));
}
class HomePage extends StatefulWidget {
HomePageState createState() => new HomePageState();
}
class HomePageState extends State<HomePage> {
TextEditingController _controller = new TextEditingController();
bool _enabled = false;
@override
Widget build(BuildContext context) {
ThemeData theme = Theme.of(context);
return new Scaffold(
appBar: new AppBar(
title: new Text('Disabled Text'),
),
floatingActionButton: new FloatingActionButton(
child: new Icon(Icons.free_breakfast),
onPressed: () {
setState(() {
_enabled = !_enabled;
});
}
),
body: new Center(
child: new Container(
margin: const EdgeInsets.all(10.0),
child: _enabled ?
new TextFormField(controller: _controller) :
new FocusScope(
node: new FocusScopeNode(),
child: new TextFormField(
controller: _controller,
style: theme.textTheme.subhead.copyWith(
color: theme.disabledColor,
),
decoration: new InputDecoration(
hintText: _enabled ? 'Type something' : 'You cannot focus me',
),
),
),
),
),
);
}
}
source to share
There is another way to achieve this goal, which also does not cause this problem . Hope this can help someone.
Create AlwaysDisabledFocusNode
and pass it an focusNode
object TextField
.
class AlwaysDisabledFocusNode extends FocusNode {
@override
bool get hasFocus => false;
}
then
new TextField(
enableInteractiveSelection: false, // will disable paste operation
focusNode: new AlwaysDisabledFocusNode(),
...
...
)
Update: TextField
now has a enabled
property. Where can you just disable TextField
like
new TextField(
enabled: false,
...
...
)
Note. This will also disable the icon associated with text input.
source to share
This is another way to disable it somehow TextField
but keep its functionality. I mean to useonTap
TextField(
enableInteractiveSelection: false,
onTap: () { FocusScope.of(context).requestFocus(new FocusNode()); },
)
-
enableInteractiveSelection
will disable content selection
TextField
-
FocusScope.of(context).requestFocus(new FocusNode());
change focus to unused focus node
Using this method, you can still touch TextField
but cannot enter it or select its contents. Trust me it will be useful sometimes (DatePicker, Timepicker, ...) :)
source to share
I tried to use FocuseNode (), enabled = false, but it doesn't work, Instead, I use a widget named AbsorbPointer. It is used to prevent the widget from being touched or touched, I wrap my TextFormField or other widget inside the AbsordPointer widgets and give a parameter to disable from touching
Example
AbsorbPointer(
absorbing: true, //To disable from touch use false while **true** for otherwise
child: Your WidgetsName
);
source to share