how to dynamically build and display widgets based off a string value? - flutter

Question

I've created an app with a large amount of buttons that update a string value.
there is a container in the middle that needs to display different widgets for each button chosen. and when a new button is pressed, the middle container will need to pop the old displaying widgets and build a new one in it's place.
I thought about layering the middle container with all the widgets to display and use the visibility widget connected to the string value using if statements to show/hide them but I don't think this is the best way to do it.
I've put together sample code below
class TestPage extends StatefulWidget {
const TestPage({Key? key}) : super(key: key);
#override
State<TestPage> createState() => _TestPageState();
}
class _TestPageState extends State<TestPage> {
String displayText = 'Choose option';
#override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
Expanded(
child: Column(
children: [
SizedBox(
height: 50,
),
Button(
text: 'option A',
onTap: () {
displayText = 'Option A';
},
),
//what would I put in the onTap property to get the app to build the OneOfTheWidgetsToBuild widget in the Display Container below based off the updated string value?
SizedBox(
height: 5,
),
Button(text: 'option B', onTap: null),
],
),
),
Expanded(
child: Column(
children: [
SizedBox(
height: 50,
),
Center(
child: Container(
//DISPLAY CONTAINER
height: 40,
width: 100,
color: Colors.yellow,
child: Center(
child: Text(
'$displayText',
style: TextStyle(color: Colors.black),
),
),
),
)
],
),
),
Expanded(
child: Column(
children: [
SizedBox(
height: 50,
),
Button(text: 'option C', onTap: null),
SizedBox(
height: 5,
),
Button(text: 'option D', onTap: null),
],
),
),
],
),
);
}
}
and here is the widget to display in the middle box:
class OneOfTheWidgetsToBuild extends StatelessWidget {
const OneOfTheWidgetsToBuild({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
height: 40,
width: 100,
color: Colors.green,
);
}
}
thanks so much for your help

Answer 1

If I understand you correctly: You want to show a bunch of different widgets based on the string's value.
One way to go about it, instead of using a bunch of if/else statements is to use a switch case and a function to correctly render the correct widgets.
For example:
Create a widget:
var _displayWidget = Container();
then, create a function to update that widget
void updateWidget(String option) {
switch (option) {
case 'Option A':
_displayWidget = widgetOne();
break;
case 'Option B':
_displayWidget = widgetTwo();
break;
default:
_displayWidget = Container();
break;
}
}
and then, in your Build method:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Test'),
),
body: Column(
children: [
DropdownButton<String>(
items: const [
DropdownMenuItem(
child: Text('Option A'),
value: 'Option A',
),
DropdownMenuItem(
child: Text('Option B'),
value: 'Option B',
),
],
onChanged: (value) {
setState(() {
updateWidget(value!);
});
},
),
_displayWidget,
],
),
);
}