How to enable a button in Flutter,when dropdownbutton has value? - button

Question

colleagues ! I'm noob in Flutter.This is my first app,and I'm trying to enable the button only when the user chooses a value from the dropdownbutton.
I was trying to find a similar question,but didn't find.
class Reserve extends StatefulWidget {
#override
_ReserveState createState() => _ReserveState();
}
class _ReserveState extends State<Reserve> {
var _category;
final formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(
globals.salonname == "" ? "Reserve" : globals.salonname),
backgroundColor: Colors.deepOrange,
),
drawer: new Drawer(
child: new ListView(children: <Widget>[
new ListTile(
title: new Text("Close"),
trailing: new Icon(Icons.arrow_upward),
onTap: () {
Navigator.of(context).pop();
})
])),
body: Card(
child: Padding(
padding: EdgeInsets.all(8.0),
child: Form(
key: formKey,
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Calendar(
isExpandable: true,
onDateSelected: null,
),
Row(children: <Widget>[
new Container(
alignment: Alignment(1.0, 0.0),
child: new Center(
child: new StreamBuilder<QuerySnapshot>
(
stream: Firestore.instance
.collection('salons').document(
globals.salonkey).collection(
'employee')
.snapshots(),
builder: (context, snapshot) {
try {
if
(snapshot.data.documents.length ==
0) {
return new Text("No employees
found!");
}
else {
return new DropdownButton(
hint: new Text(
"Choose an employee"),
items: snapshot.data.documents
.map(
(
DocumentSnapshot document) {
return DropdownMenuItem(
value: document
.data["name"],
child: new Text(
document
.data["name"]));
}).toList(),
value: _category,
onChanged: (value) {
setState(() {
_category = value;
});
});
}
}
catch (ex) {
return new Text("Try again!");
}
})),
)
]),
new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
_buildButton(),
])
])))));
}
Widget _buildButton() {
return new RaisedButton(
padding: const EdgeInsets.all(8.0),
color: _category == true ? Colors.orangeAccent : Colors.grey,
child: Text("Choose employee"),
onPressed: _category==null ? null : () => setState(() => Navigator.of(context).push(
new MaterialPageRoute(
builder: (BuildContext context) =>
new ReserveTable()))));
}
}
So I want to enable the Raised button only,when an employee is chosen in dropdown button.
Thanks.

Answer 1

You will have to modify your code a little, if you need your button changes according to the Stream, move your StreamBuilder at your Column level and add a variable to check when the stream has data.
Here you have your code fixed:
class _ReserveState extends State<Reserve> {
var _category;
bool enableButton = false;
final formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title:
new Text(globals.salonname == "" ? "Reserve" : globals.salonname),
backgroundColor: Colors.deepOrange,
),
drawer: new Drawer(
child: new ListView(children: <Widget>[
new ListTile(
title: new Text("Close"),
trailing: new Icon(Icons.arrow_upward),
onTap: () {
Navigator.of(context).pop();
})
])),
body: Card(
child: Padding(
padding: EdgeInsets.all(8.0),
child: Form(
key: formKey,
child: new StreamBuilder<QuerySnapshot>(
stream: Firestore.instance
.collection('salons')
.document(globals.salonkey)
.collection('employee')
.snapshots(),
builder: (context, snapshot) {
return Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Calendar(
isExpandable: true,
onDateSelected: null,
),
Row(children: <Widget>[
new Container(
alignment: Alignment(1.0, 0.0),
child: new Center(
child: (!snapshot.hasData ||
snapshot.data.documents.length == 0)
? new Text("No employees found!")
: new DropdownButton(
hint:
new Text("Choose an employee"),
items: snapshot.data.documents.map(
(DocumentSnapshot document) {
return DropdownMenuItem(
value: document.data["name"],
child: new Text(
document.data["name"]));
}).toList(),
value: _category,
onChanged: (value) {
setState(() {
_category = value;
});
})))
]),
new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
_buildButton(),
])
]);
})),
)));
}
Widget _buildButton() {
return new RaisedButton(
padding: const EdgeInsets.all(8.0),
color: _category!=null ? Colors.orangeAccent : Colors.grey,
child: Text("Choose employee"),
onPressed: _category==null
? null
: () => setState(() => Navigator.of(context).push(
new MaterialPageRoute(
builder: (BuildContext context) => ReserveTable()))));
}
}