How to display data from the API in a dropdown list and get the element that I selected in the list? Flutter

Max 0
Viewed 21

I have a dropdown but i need to get the data from the server and display it in the dropdown. And then get the element that I have selected in the dropdown list and show the data for it. How to display data from the server in a dropdown list and how to get the selected value from the list then? I tried different options, but for some reason I can’t implement it, I will be grateful if you help.

class _PoyntsDropDownWidgetState extends State<PoyntsDropDownWidget> {
  int? _value = 0;

  void _setValue(int? value) {
    setState(() {
      _value = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      padding: const EdgeInsets.only(left: 20, right: 13),
      decoration: BoxDecoration(
        color: constants.Colors.greyXDark,
        borderRadius: BorderRadius.circular(20),
        boxShadow: const [
          BoxShadow(
            color: Colors.black26,
            spreadRadius: 5,
            blurRadius: 12,
            offset: Offset(0, 0),
          )
        ],
      ),
      child: DropdownButton(
        isExpanded: true,
        itemHeight: 100,
        icon: const SizedBox.shrink(),
        value: _value,
        onChanged: _setValue,
        underline: const SizedBox(),
        dropdownColor: constants.Colors.greyXDark,
        items: [
          for (var i = 0; i < 3; i++)
            DropdownMenuItem(
              value: i,
              child: Row(
                children: [
                  SizedBox(
                    height: 80,
                    width: 80,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(8),
                      child: Image.asset('assets/images/poynt.jpg'),
                    ),
                  ),
                  const SizedBox(width: 15),
                  Expanded(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text(
                          'Eli’s Poynt Home DC',
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                          style: constants.Styles.normalHeavyTextStyleWhite,
                        ),
                        const SizedBox(height: 6),
                        FittedBox(
                          fit: BoxFit.scaleDown,
                          child: Text(
                            'Evan Gbirol St, 26',
                            style: constants.Styles.smallBookTextStyleWhite,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            )
        ],
      ),
    );
  }
}

This is how i display the data on the page but i need to display this data in the drop down list

if (state is StationLoaded) {
          return Container(
            height: MediaQuery.of(context).size.height,
            decoration: const BoxDecoration(
              color: constants.Colors.greyXDark,
              border: Border(
                left: BorderSide(width: 2, color: constants.Colors.purpleMain),
                right: BorderSide(width: 2, color: constants.Colors.purpleMain),
                bottom:
                    BorderSide(width: 2, color: constants.Colors.purpleMain),
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.only(top: 40, left: 14, right: 14),
              child: MediaQuery.removePadding(
                context: context,
                removeTop: true,
                child: ListView.builder(
                  // shrinkWrap: true,
                  physics: const BouncingScrollPhysics(),
                  itemCount: state.stations.length + 1,
                  itemBuilder: (context, index) {
                    if (index == state.stations.length) {
dart flutter
1 Answers
Map<String, String> companylistMenu = {"A":"COMPANY1","B":"COMPANY2"};
String? selectedCompany;

// Below is the dropdownMenu Code

DropdownButton(
                    isExpanded: true,
                    iconEnabledColor: Colors.yellow,
                    dropdownColor: Colors.grey[800],
                    style: TextStyle(color: Colors.white),
                    value: selectedCompany,
                    items: companylistMenu
                        .map((description, value) {
                          return MapEntry(
                              description,
                              DropdownMenuItem<String>(
                                value: value,
                                child: Text(description),
                              ));
                        })
                        .values
                        .toList(),
                    onChanged: (value) {
                           print(value);
                    }),

//Try This

Vinamra Jaiswal0
Related