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

CodePudding user response：

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,
        ],
      ),
    );
  }