Flutter: how integrate function in the "DropdownButton" class and pass value to the parent class

Question

I am trying to integrate a child class (implementing DropdownButton with four values: 2, 4, 6, and 8) to a parent class which should show some content depending on the value chosen.

If user clicks on one of the drop down values ie: 2, a widget on the main class should display a container with blue colour. If user click on value 4 it should display a container with red colour and so on.

My thoughts went along these lines, implementing a simple method which is reading chosen value, calls the appropriate class (ClassTwo, ClassThree...) passing its content to the parent class but I am not sure how to do so. My renderWidget() function remains unused and fuller suggesting removing it.

Can anyone please help?

child class (DropdownMenuButton)

class VorschlageDropdownMenu extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<VorschlageDropdownMenu> {
  List<ListItem> _dropdownItems = [
    ListItem(1, "2"),
    ListItem(2, "4"),
    ListItem(3, "6"),
    ListItem(4, "8"),
  ];

  List<DropdownMenuItem<ListItem>> _dropdownMenuItems;
  ListItem _selectedItem;

  void initState() {
    super.initState();
    _dropdownMenuItems = buildDropDownMenuItems(_dropdownItems);
    _selectedItem = _dropdownMenuItems[0].value;
  }

  List<DropdownMenuItem<ListItem>> buildDropDownMenuItems(List listItems) {
    List<DropdownMenuItem<ListItem>> items = List();
    for (ListItem listItem in listItems) {
      items.add(
        DropdownMenuItem(
          child: Text(listItem.name),
          value: listItem,
        ),
      );
    }
    return items;
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: Container(
        padding: const EdgeInsets.only(left: 10.0, right: 10.0),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10.0),
            color: kWidgetBacgroundColor,
            border: Border.all()),
        child: DropdownButtonHideUnderline(
          child: DropdownButton(
              value: _selectedItem,
              items: _dropdownMenuItems,
              onChanged: (value) {
                setState(() {
                  _selectedItem = value;
                  renderWidget() {
                    if (value == "2")
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (BuildContext context) => MenuForZwei(),
                        ),
                      );
                    else if (value == "4")
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (BuildContext context) => MenuForVier(),
                        ),
                      );
                    else if (value == "6")
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (BuildContext context) => MenuForSechs(),
                        ),
                      );
                    else if (value == "8")
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (BuildContext context) => MenuForAcht(),
                        ),
                      );
                  }
                });
              }),
        ),
      ),
    );
  }
}

class ListItem {
  int value;
  String name;

  ListItem(this.value, this.name);
}

parental class which should display value chosen

class VorschlageZutaten extends StatelessWidget {
  const VorschlageZutaten({
    Key key,
    this.renderWidget,
  }) : super(key: key);

  final Function renderWidget;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(bottom: 50, top: 20),
            ),
            Text(
              "Für ",
              style: TextStyle(
                color: kPrimaryHeaderColor.withOpacity(0.6),
                fontSize: (20.0),
                fontWeight: FontWeight.w600,
              ),
            ),
            Container(height: 40, child: VorschlageDropdownMenu()),
            Text(
              " Personen:",
              style: TextStyle(
                color: kPrimaryHeaderColor.withOpacity(0.6),
                fontSize: (20.0),
                fontWeight: FontWeight.w600,
              ),
            ),
          ],
        ),
        Container(
          child: renderWidget(),
        ),
      ],
    );
  }
}

score 0 · Answer 1 · answered Jun 20 '21 at 13:40

I think I've read all available documentation and reviewed all examples so I had to redesign the VorschlageDropdownMenu() class in order to achieve desired result. This is how the main class looks now:

class VorschlageDropdownMenu extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _VorschlageDropdownMenuState();
  }
}

class _VorschlageDropdownMenuState extends State<VorschlageDropdownMenu> {
  String ddValue;

  @override
  void initState() {
    super.initState();
    ddValue = "ZWEI";
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(50.0),
        child: AppBar(
          elevation: 0,
          backgroundColor: kWidgetBacgroundColor,
          title: Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text(
                    "Für ",
                    style: TextStyle(
                      color: kPrimaryHeaderColor.withOpacity(0.6),
                      fontSize: (20.0),
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.only(left: 10.0, right: 10.0),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10.0),
                        color: kWidgetBacgroundColor,
                        border: Border.all()),
                    child: DropdownButtonHideUnderline(
                      child: new DropdownButton(
                      iconSize: 0.0,
                        value: ddValue, //Default value
                        items: <DropdownMenuItem>[
                          new DropdownMenuItem(
                            value: "ZWEI",
                            child: new Text(
                              'ZWEI',
                              style: TextStyle(
                                color: kPrimaryHeaderColor.withOpacity(0.6),
                                fontSize: (17.0),
                                fontWeight: FontWeight.w700,
                              ),
                            ),
                          ),
                          new DropdownMenuItem(
                            value: "VIER",
                            child: new Text('VIER',
                              style: TextStyle(
                                color: kPrimaryHeaderColor.withOpacity(0.6),
                                fontSize: (17.0),
                                fontWeight: FontWeight.w700,
                              ),
                            ),
                          ),
                          new DropdownMenuItem(
                            value: "SECHS",
                            child: new Text('SECHS',
                              style: TextStyle(
                                color: kPrimaryHeaderColor.withOpacity(0.6),
                                fontSize: (17.0),
                                fontWeight: FontWeight.w700,
                              ),
                            ),
                          ),
                          new DropdownMenuItem(
                            value: "ACHT",
                            child: new Text('ACHT',
                              style: TextStyle(
                                color: kPrimaryHeaderColor.withOpacity(0.6),
                                fontSize: (17.0),
                                fontWeight: FontWeight.w700,
                              ),
                            ),
                          ),
                        ],
                        onChanged: (value) {
                          ddValue = value;
                          setState(() {});
                        },
                      ),
                    ),
                  ),
                  Text(
                    " Personen:",
                    style: TextStyle(
                      color: kPrimaryHeaderColor.withOpacity(0.6),
                      fontSize: (20.0),
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
      body: ListederMenus(),
    );
  }

  Widget ListederMenus() {
    if (ddValue == "ZWEI") {
      return Center(child: MenuForZwei());
    } else if (ddValue == "VIER") {
      return Center(child: MenuForVier());
    } else if (ddValue == "SECHS") {
      return Center(child: MenuForSechs());
    } else if (ddValue == "ACHT") {
      return Center(child: MenuForAcht());
    }
  }
}```

and **MenuForZwei()** and other classes with different colours:

```class MenuForZwei extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
    );
  }
}```

Flutter: how integrate function in the "DropdownButton" class and pass value to the parent class

1 Answers1