Flutter web - getting data back (return value) from DropDownList (ComboBox) on Dialog Box-CodePudding

I have small Flutter web app (it is writen like mobile app, but for web purposes) with one main.dart file and dialog.dart file with custom dialog box. On this dialog box I have three drop down lists (sometimes called ComboBoxes). Dialog box looks and works as expected. However I don't know how to read / access currently selected value of drop down list from dialog box (from Dialog Box part of code). By clicking OK button I need to open proper page and fill it with content based on the selected values in drop down lists.

Here is code of custom dialog window with three drop down lists:

'dialog.dart':

import 'package:flutter/material.dart';

class CustomDialogBox extends StatefulWidget {
  final String title, descriptions, text;

  const CustomDialogBox({
    Key? key,
    required this.title,
    required this.descriptions,
    required this.text,
  }) : super(key: key);

  @override
  _CustomDialogBoxState createState() => _CustomDialogBoxState();
}

class _CustomDialogBoxState extends State<CustomDialogBox> {
  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
      ),
      elevation: 0,
      backgroundColor: Colors.transparent,
      child: contentBox(context),
    );
  }

  contentBox(context) {
    return Stack(
      children: <Widget>[
        Container(
          padding:
              const EdgeInsets.only(left: 50, top: 75, right: 50, bottom: 50),
          margin: const EdgeInsets.only(top: 40),
          decoration: BoxDecoration(
            shape: BoxShape.rectangle,
            color: Colors.white,
            borderRadius: BorderRadius.circular(15),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              const SizedBox(
                height: 80,
              ),
              Text(
                widget.title,
                style:
                    const TextStyle(fontSize: 22, fontWeight: FontWeight.w600),
              ),
              const SizedBox(
                height: 15,
              ),
              Text(
                widget.descriptions,
                style: const TextStyle(fontSize: 14),
                textAlign: TextAlign.center,
              ),
              const SizedBox(
                height: 30,
              ),
              DropdownButtonExample(listType: list1),
              const SizedBox(
                height: 30,
              ),
              DropdownButtonExample(listType: list2),
              const SizedBox(
                height: 30,
              ),
              DropdownButtonExample(listType: list3),
              Align(
                alignment: Alignment.bottomRight,
                child: MaterialButton(
                    color: Colors.blue,
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: Text(
                      widget.text,
                      style: const TextStyle(fontSize: 18, color: Colors.white),
                    )),
              ),
            ],
          ),
        ),
        Positioned(
          left: 30,
          right: 30,
          top: 0,
          child: CircleAvatar(
            backgroundColor: Colors.blue,
            radius: 80,
            child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(75)),
                child: Image.network(
                    "https://images.pexels.com/photos/627678/pexels-photo-627678.jpeg?auto=compress&cs=tinysrgb&w=1600",
                    width: 120,
                    height: 120,
                    fit: BoxFit.fill)),
          ),
        ),
      ],
    );
  }
}

const List<String> list1 = <String>[
  'One',
  'Two',
  'Three',
  'Four',
  'Five',
  'Six',
  'Seven',
  'Eight',
  'Nine',
  'Ten',
  'Eleven',
  'Twelve'
];
const List<String> list2 = <String>[
  'Black',
  'Red',
  'Olive',
  'DarkOliveGreen',
  'MediumAquamarine',
  'DarkSeaGreen',
  'LightSeaGreen',
  'DarkCyan',
  'Teal',
];

const List<String> list3 = <String>['Slow', 'Medium', 'Fast'];

class DropdownButtonExample extends StatefulWidget {
  const DropdownButtonExample({super.key, required this.listType});

  final List<String> listType;

  @override
  State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
}

class _DropdownButtonExampleState extends State<DropdownButtonExample> {
  String? dropdownValue;

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: dropdownValue,
      icon: const Icon(Icons.arrow_downward),
      elevation: 10,
      style: const TextStyle(color: Colors.blue),
      underline: Container(
        height: 2,
        color: Colors.blue,
      ),
      onChanged: (String? value) {
        setState(() {
          dropdownValue = value as String;
        });
      },
      items: widget.listType.map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
    );
  }
}

CodePudding user response：

You can use callback functions as a parameter to your DropdownButtonExample and store the values of dropdown menus at the top widget's state.

For example

import 'package:flutter/material.dart';

class CustomDialogBox extends StatefulWidget {
  final String title, descriptions, text;

  const CustomDialogBox({
    Key? key,
    required this.title,
    required this.descriptions,
    required this.text,
  }) : super(key: key);

  @override
  _CustomDialogBoxState createState() => _CustomDialogBoxState();
}

class _CustomDialogBoxState extends State<CustomDialogBox> {
  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
      ),
      elevation: 0,
      backgroundColor: Colors.transparent,
      child: contentBox(context),
    );
  }

  contentBox(context) {
    var dropdown1value = "";
    var dropdown2value = "";
    var dropdown3value = "";
    return Stack(
      children: <Widget>[
        Container(
          padding:
              const EdgeInsets.only(left: 50, top: 75, right: 50, bottom: 50),
          margin: const EdgeInsets.only(top: 40),
          decoration: BoxDecoration(
            shape: BoxShape.rectangle,
            color: Colors.white,
            borderRadius: BorderRadius.circular(15),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              const SizedBox(
                height: 80,
              ),
              Text(
                widget.title,
                style:
                    const TextStyle(fontSize: 22, fontWeight: FontWeight.w600),
              ),
              const SizedBox(
                height: 15,
              ),
              Text(
                widget.descriptions,
                style: const TextStyle(fontSize: 14),
                textAlign: TextAlign.center,
              ),
              const SizedBox(
                height: 30,
              ),
              DropdownButtonExample(
                  onChanged: (value) {
                    setState(() {
                      dropdown1value = value;
                    });
                  },
                  listType: list1),
              const SizedBox(
                height: 30,
              ),
              DropdownButtonExample(
                  onChanged: (value) {
                    setState(() {
                      dropdown2value = value;
                    });
                  },
                  listType: list2),
              const SizedBox(
                height: 30,
              ),
              DropdownButtonExample(
                  onChanged: (value) {
                    setState(() {
                      dropdown3value = value;
                    });
                  },
                  listType: list3),
              Align(
                alignment: Alignment.bottomRight,
                child: MaterialButton(
                    color: Colors.blue,
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: Text(
                      widget.text,
                      style: const TextStyle(fontSize: 18, color: Colors.white),
                    )),
              ),
            ],
          ),
        ),
        Positioned(
          left: 30,
          right: 30,
          top: 0,
          child: CircleAvatar(
            backgroundColor: Colors.blue,
            radius: 80,
            child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(75)),
                child: Image.network(
                    "https://images.pexels.com/photos/627678/pexels-photo-627678.jpeg?auto=compress&cs=tinysrgb&w=1600",
                    width: 120,
                    height: 120,
                    fit: BoxFit.fill)),
          ),
        ),
      ],
    );
  }
}

const List<String> list1 = <String>[
  'One',
  'Two',
  'Three',
  'Four',
  'Five',
  'Six',
  'Seven',
  'Eight',
  'Nine',
  'Ten',
  'Eleven',
  'Twelve'
];
const List<String> list2 = <String>[
  'Black',
  'Red',
  'Olive',
  'DarkOliveGreen',
  'MediumAquamarine',
  'DarkSeaGreen',
  'LightSeaGreen',
  'DarkCyan',
  'Teal',
];

const List<String> list3 = <String>['Slow', 'Medium', 'Fast'];

class DropdownButtonExample extends StatefulWidget {
  final Function(String) onChanged;

  const DropdownButtonExample(
      {Key? key, required this.listType, required this.onChanged});

  final List<String> listType;

  @override
  State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
}

class _DropdownButtonExampleState extends State<DropdownButtonExample> {
  String? dropdownValue;

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: dropdownValue,
      icon: const Icon(Icons.arrow_downward),
      elevation: 10,
      style: const TextStyle(color: Colors.blue),
      underline: Container(
        height: 2,
        color: Colors.blue,
      ),
      onChanged: (String? value) {
        widget.onChanged(value ?? "");
      },
      items: widget.listType.map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
    );
  }
}