How do I change it such that the change is instant? - flutter

Question

import 'package:flutter/material.dart';
class RandomPage extends StatefulWidget {
#override
_RandomScreenState createState() => _RandomScreenState();
}
class _RandomScreenState extends State {
String _selectedValue = 'Select';
bool appear = false;
Widget FirstDropDownButton() {
return Container(
child: DropdownButton <String> (
value: _selectedValue,
icon: Icon(Icons.arrow_drop_down),
underline: Container(
height: 1.5,
color: Colors.blueGrey,
),
onChanged: (String newValue) {
setState(() {
_selectedValue = newValue;
});},
items: <String> ['Select','One'].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);}).toList(),
)
);
}
Widget FirstFlatButton() {
return FlatButton(
child: Text("Next"),
onPressed: () {
if (_selectedValue == 'Select') {
print("Cannot be NULL");
appear = false;
}
else if (_selectedValue == 'One')
appear = true;
});
}
Widget getWidget() {
if (appear == true) {
return Column(
children: <Widget>[
Text("Hello")
],
);
}
else
return Column(
children: <Widget>[
Text("Bye")
],
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget> [
FirstDropDownButton(),
FirstFlatButton(),
getWidget(),
],
)
);
}
}
Hi this is a simpler version of the code of mine.
If I choose 'one' from the dropdownbutton the hello text should appear but it doesnt, only when I go ahead and change the value of the dropdownbutton again then will it reflect the change.
How do I make it such that when I select 'one' such that text hello appears immediately and when i select 'select' the text bye appears and hello disappears at the click of the flatbutton without toggling the options again for the change to be reflected?

Answer 1

i have taken the liberty to modify your code a bit, and made it more general.
For live demo check: codepen
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: RandomPage(),
),
);
}
class RandomPage extends StatefulWidget {
#override
_RandomScreenState createState() => _RandomScreenState();
}
class _RandomScreenState extends State {
int _selectedValue = 0;
bool appear = false;
List<String> values = ['Select', 'One', 'Two', 'Three'];
Widget FirstDropDownButton() {
return Container(
child: DropdownButton<String>(
value: values[_selectedValue],
icon: Icon(Icons.arrow_drop_down),
underline: Container(
height: 1.5,
color: Colors.blueGrey,
),
onChanged: (String newValue) {
setState(() {
_selectedValue = values.indexWhere((element) => element == newValue);
});
changeFlag();
},
items: values.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
));
}
void changeFlag() {
if (values[_selectedValue] == 'One') {
setState(() {
appear = true;
});
} else {
setState(() {
appear = false;
});
}
}
Widget FirstFlatButton() {
return FlatButton(
child: Text("Next"),
onPressed: () {
setState(() {
_selectedValue = (_selectedValue + 1) % (values.length);
});
changeFlag();
});
}
Widget getWidget() {
if (appear == true) {
return Column(
children: <Widget>[Text("Hello")],
);
} else
return Column(
children: <Widget>[Text("Bye")],
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("StackOverflow")),
body: Column(
children: <Widget>[
FirstDropDownButton(),
FirstFlatButton(),
getWidget(),
],
));
}
}
Update: Now that I re-read the question,
I figured that you wanted to show either the value Hello or Bye depending upon the value on dropdown, when the user clicked Next button,
but i am sure you got the idea whatsoever,
just remove the setState on the flatbutton and changeFlag in the dropdown and you'll be fine.