How can I disable texformfield input in flutter? - flutter

Question

In my application, written in Flutter, I need an icon button to enable/disable input to it. I declared bool variables which are holding information to TextFormField to be enabled/disabled. But, it is not working as expected. It looks that it depends on type of keyboard, so until all characters keyboard is in use, it is not validated. So, if I disable field which allows only numeric keyboard, field input is not disabled until I switch to field with all characters kexboard. So, how can I disable input to TextFomField immediatelly?
`import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:aisscanning/data/database_helper.dart';
import 'package:aisscanning/data/inventoryitem.dart';
import 'package:aisscanning/data/masteritem.dart';
class InventoryScanning extends StatefulWidget {
InventoryScanning({Key key, this.title}) : super(key: key);
final String title;
#override
_InventoryScanningState createState() => new _InventoryScanningState();
}
class _InventoryScanningState extends State<InventoryScanning> {
static GlobalKey<FormState> _formKey = new GlobalKey<FormState>();
final TextEditingController teSku = TextEditingController();
final TextEditingController teDesc = TextEditingController();
final TextEditingController teLoc = TextEditingController();
final TextEditingController teSubLoc = TextEditingController();
final TextEditingController teQty = TextEditingController();
final TextEditingController tePrice = TextEditingController();
bool lockLoc = true;
bool lockSubLoc = true;
bool lockQty = true;
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Item Scanning"),
backgroundColor: Colors.black,
),
resizeToAvoidBottomPadding: false,
body: Padding(
padding: const EdgeInsets.only(top: 12.0),
child: new Form(
key: _formKey,
autovalidate: true,
child: new ListView(
// padding: const EdgeInsets.symmetric(horizontal: 16.0),
padding: new EdgeInsets.all(8.0),
itemExtent: 60.0,
children: <Widget>[
new Row(
// Location
mainAxisSize: MainAxisSize.min,
children: <Widget>[
IconButton(
icon: const Icon(
Icons.lock,
color: const Color(0xFF167F67),
size: 25.0,
),
onPressed: () {
if (lockLoc == false) {
lockLoc = true;
} else {
lockLoc = false;
}
},
),
Expanded(
child: TextFormField(
controller: teLoc,
keyboardType: TextInputType.number,
enabled: lockLoc,
style: new TextStyle(
color: const Color(0xFF0f2638),
fontFamily: 'ProximaNova',
fontStyle: FontStyle.normal,
fontSize: 20.0,
),
decoration: new InputDecoration(
hintText: 'Enter Location or press Search Icon',
labelText: 'Location',
fillColor: Colors.white,
contentPadding: new EdgeInsets.symmetric(
vertical: 15.0, horizontal: 10.0),
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(25.0),
borderSide: new BorderSide(),
),
labelStyle: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 20.0,
),
),
),
),
IconButton(
icon: const Icon(
Icons.search,
color: const Color(0xFF167F67),
size: 25.0,
),
onPressed: () {},
),
],
),
new Row(
// SubLocation
mainAxisSize: MainAxisSize.min,
children: <Widget>[
IconButton(
icon: const Icon(
Icons.lock,
color: const Color(0xFF167F67),
size: 25.0,
),
onPressed: () {
if (lockSubLoc == false) {
lockSubLoc = true;
} else {
lockSubLoc = false;
} },
),
Expanded(
child: TextFormField(
controller: teSubLoc,
enabled: lockSubLoc,
style: new TextStyle(
color: const Color(0xFF0f2638),
fontFamily: 'ProximaNova',
fontStyle: FontStyle.normal,
fontSize: 20.0,
),
decoration: new InputDecoration(
hintText: 'Enter SubLocation',
labelText: 'SubLocation',
contentPadding: new EdgeInsets.symmetric(
vertical: 15.0, horizontal: 10.0),
fillColor: Colors.white,
border: OutlineInputBorder(
borderRadius: new BorderRadius.circular(25.0),
borderSide: new BorderSide(),
),
//fillColor: Colors.green
labelStyle: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 16.0,
),
),
),
),
IconButton(
icon: const Icon(
Icons.search,
color: const Color(0xFF167F67),
size: 25.0,
),
onPressed: () {},
),
],
),
new Row(
// QTY
mainAxisSize: MainAxisSize.min,
children: <Widget>[
IconButton(
icon: const Icon(
Icons.lock,
color: const Color(0xFF167F67),
size: 25.0,
),
onPressed: () {
if (lockQty == false) {
lockQty = true;
} else {
lockQty = false;
}},
),
Expanded(
child: TextFormField(
controller: teQty,
textAlign: TextAlign.right,
keyboardType: TextInputType.number,
enabled: lockQty,
style: new TextStyle(
color: const Color(0xFF0f2638),
fontFamily: 'ProximaNova',
fontStyle: FontStyle.normal,
fontSize: 18.0,
),
decoration: new InputDecoration(
hintText: 'Enter Quantity',
labelText: 'Quantity',
contentPadding: new EdgeInsets.symmetric(
vertical: 15.0, horizontal: 10.0),
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(30.0),
borderSide: new BorderSide(),
),
labelStyle: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 20.0,
),
),
),
),
],
),
new Row(
// Buttons
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new RaisedButton(
child: new Text("Save"),
onPressed: () {
addRecord();
},
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0)),
color: Colors.green,
elevation: 4.0,
),
new RaisedButton(
child: new Text("Cancel"),
onPressed: () {},
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0)),
color: Colors.red,
elevation: 4.0,
),
],
),
]),
),
),
);
}
`

Answer 1

When Ever we need to update our screen UI we need to call SetState(). so In Your Code in onPressed Method.
onPressed: () {
setState(() {
if (lockLoc == false) {
lockLoc = true;
} else {
lockLoc = false;
}
});
},