Change Widget on Dropdown onchange event - flutter

Question

I have a dropdown menu with several options. For sake of simplicity lets say they are: "A", "B" and "C".
This is the snippet of my code:
children: <Widget>[
FormBuilder(
key: _fbKey,
autovalidate: true,
child: Column(
children: <Widget>[
FormBuilderDropdown(
attribute: "value",
decoration: InputDecoration(
labelText: "Choose something?"),
hint: Text('Select Option'),
validators: [FormBuilderValidators.required()],
items: user.option.map((v) {
return DropdownMenuItem(
value: v,
child: ListTile(
leading: Image.asset(
'assets/img/image.png',
width: 50,
height: 50,
),
title: Text("${v.option}"),
));
}).toList(),
),
],
),
// if v.option == "A" is selected here build Widget A()
// if v.option == "B" is selected here build Widget B()
// if v.option == "C" is selected here build Widget C()
),
So, based on Dropdown selection I want to render appropriate Widget.
How can I build widget A if A is selected in the Dropdown menu, B if B is selected or C if C is selected?
This has to change dynamically though, any help is good.

Answer 1

Most simple way I see it is to create a function that renders your widgets, let's call it _renderWidget(), inside of that function you could have something as follows:
_renderWidget() {
if(condition == A) {
return Text('Widget A'); // this could be any Widget
} else if(condition == B) {
return Text('Widget B');
} else {
return Text('Widget C');
}
}
Then inside your DropdownButton onChanged function, you can change the condition based on the dropdown value:
onChanged(String value) {
if(value == 'something') {
setState(() {
condition = A; // A, B or C
});
}
}
You would call your _renderWidget() function inside the widget where you want to show them, for example let's say a Container widget.
Container(
child: _renderWidget()
)
Of course, all of this needs to be done inside a StatefulWidget.

Answer 2

use a stateful widget. you can have a field that says wich widget to show and call set state every time a different option is selected. all three widgets could be added to the main List<Widget> using collection if as follows:
children: <Widget>[
FormBuilder(
key: _fbKey,
autovalidate: true,
child: Column(
children: <Widget>[
FormBuilderDropdown(
attribute: "value",
decoration: InputDecoration(
labelText: "Choose something?"),
hint: Text('Select Option'),
validators: [FormBuilderValidators.required()],
items: user.option.map((v) {
return DropdownMenuItem(
value: v,
child: ListTile(
leading: Image.asset(
'assets/img/image.png',
width: 50,
height: 50,
),
title: Text("${v.option}"),
));
}).toList(),
),
],
),
),
if (v.option == "A") A(),
if (v.option == "B") B(),
if (v.option == "C") C(),
]

Answer 3

you can make a widget that accept the option in its constructor, and call it under the Drop Down builder
Example :
class RenderOption extends StatelessWidget {
final option;
const RenderOption({Key key, this.option}) : super(key: key);
#override
Widget build(BuildContext context) {
switch (option) {
case 1:
return Container();
break;
case 2:
return Container();
break;
case 3:
return Container();
break;
default:
}
}
}
now in you code above
children: <Widget>[
FormBuilder(
key: _fbKey,
autovalidate: true,
child: Column(
children: <Widget>[
FormBuilderDropdown(
attribute: "value",
decoration: InputDecoration(
labelText: "Choose something?"),
hint: Text('Select Option'),
validators: [FormBuilderValidators.required()],
items: user.option.map((v) {
return DropdownMenuItem(
value: v,
child: ListTile(
leading: Image.asset(
'assets/img/image.png',
width: 50,
height: 50,
),
title: Text("${v.option}"),
));
}).toList(),
),
],
),
//_currentOption is declared above in the widget tree
// it indicates the current selected option
RenderOption(option:_currentOption)
),
Note : you have to make the Parent Widget (which has the column or the listView as a child ) Stateful widget to make the code run properly
Edit : I've added the _currentOption variable which indicated the current selected option and paste it to the RenderOption Widget. you should implement the onChanged function in the FormBuilderDropDown to update the selected option , like this
onChanged: (option) =>setState(()=>_currentOption = option)