简体   繁体   中英

Flutter combo box item in list view

I'm trying to make a combobox and when I select an item, I want it to be added in a listview when a button is pressed.

I tried multiple solutions, but none seems to work, as far as I did, I could make a input field and add the items manually, but I can't do it with a combobox ( without letting the user write them manually ).

Here is what I did:



import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:searchable_dropdown/searchable_dropdown.dart';


class LocationTab extends StatefulWidget {
  @override
  _LocationTabState createState() => _LocationTabState();
}

class _LocationTabState extends State<LocationTab> {
  List<String> mylist = List();


  List<ParentCategoryComboBox> _visibility =
      ParentCategoryComboBox.getParentCategory();
  List<DropdownMenuItem<ParentCategoryComboBox>> _dropdownMenuItems;

  List<PlatformReachComboBox> _platformReach =
      PlatformReachComboBox.getPlatformReach();
  List<DropdownMenuItem<PlatformReachComboBox>> _dropdownPlatformReach;

  PlatformReachComboBox _selectedPlatformReach;

  ParentCategoryComboBox _selectedVisibility;

  @override
  void initState() {
    _dropdownMenuItems = buildDropDownMenuItems(_visibility);
    _selectedVisibility = _dropdownMenuItems[0].value;

    _dropdownPlatformReach =
        buildDropdownMenuItemsPlatformReach(_platformReach);
    _selectedPlatformReach = _dropdownPlatformReach[0].value;

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 10.0, left: 20.0, right: 20.0),
      child: SingleChildScrollView(
        physics: BouncingScrollPhysics(),
        scrollDirection: Axis.vertical,
        child: Column(
          children: <Widget>[
            SizedBox(
              height: 20,
            ),
            Column(
              children: [
                Align(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    "Select visibility:",
                    style: TextStyle(
                      color: Colors.indigoAccent,
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                    ),
                  ),
                ),
              ],
            ),
            DropdownButton(
              icon: Icon(
                Icons.visibility,
                color: Colors.black45,
              ),
              isExpanded: true,
              value: _selectedVisibility,
              items: _dropdownMenuItems,
              onChanged: (ParentCategoryComboBox selectedVisibility) {
                setState(() {
                  _selectedVisibility = selectedVisibility;
                });
              },
            ),
            SizedBox(
              height: 35,
            ),
            Container(
              padding: new EdgeInsets.symmetric(horizontal: 5.0),
              decoration: BoxDecoration(
                  border: Border.all(
                    width: 1,
                    color: Colors.grey,
                  ),
                  borderRadius: BorderRadius.circular((10))),
              child: Column(
                children: <Widget>[
                  SizedBox(
                    height: 10,
                  ),
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      "Select platform reach:",
                      style: TextStyle(
                        color: Colors.indigoAccent,
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  Row(
                    children: <Widget>[
                      Expanded(
                        child: SearchableDropdown(
                          isExpanded: true,
                          value: _selectedPlatformReach,
                          items: _dropdownPlatformReach,
                          isCaseSensitiveSearch: false,
                          onChanged:
                              (PlatformReachComboBox selectedPlatformReach) {
                            setState(() {
                              _selectedPlatformReach = selectedPlatformReach;
                            });
                          },
                        ),
                        flex: 2,
                      ),
                      Expanded(
                        child: Container(
                          height: 50.0,
                          width: 80,
                          child: Material(
                            borderRadius: BorderRadius.circular(20.0),
                            shadowColor: Colors.blue,
                            color: Colors.deepPurpleAccent,
                            elevation: 0.0,
                            child: GestureDetector(
                              onTap: () {
                                setState(() {
                                  mylist.add(_selectedPlatformReach.toString());
                                });
                              },
                              child: Center(
                                child: Text(
                                  'ADD',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),
                        flex: 0,
                      ),
                    ],
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      "Added:",
                      style: TextStyle(
                        color: Colors.indigoAccent,
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  ListView.builder(
                    padding: EdgeInsets.only(left: 10),
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    itemCount: mylist.length,
                    itemBuilder: (BuildContext ctxt, int Index) {
                      return Text(
                          mylist[Index]
                      );

                    },
                  ),
//                  ListView.builder(
//                    padding: EdgeInsets.only(left: 10),
//                    scrollDirection: Axis.vertical,
//                    shrinkWrap: true,
//                    itemCount: _platformReach.length,
//                    itemBuilder: (BuildContext ctxt, int Index) {
//                      return Text(
//                        "Galati"
//                      );
////                      return DropdownButton(
////                        value: _selectedPlatformReach.toString(),
////                        items: _dropdownPlatformReach,
////                        onChanged: (value) {
////                          _selectedPlatformReach = value;
////                          setState(() {});
////                        },
////                        hint: Text('Select drowdown'),
////                      );
////                                return new Text(_dropdownPlatformReach[Index].value);
//                    },
//                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Mock data class:

import 'package:flutter/material.dart';

class PlatformReachComboBox {
  String name;
  String hint;

  PlatformReachComboBox(this.name, this.hint);

  static List<PlatformReachComboBox> getPlatformReach() {
    return <PlatformReachComboBox>[
      PlatformReachComboBox('Jud Galati', '(RO, [Galati] County)'),
      PlatformReachComboBox('Jud Braila', '(RO, [Braila] County)'),
      PlatformReachComboBox('Jud Prahova', '(RO, [Ploiesti] County)'),
      PlatformReachComboBox('Jud Maramures', '(RO, [Baia Mare] County)'),
    ];
  }
}

List<DropdownMenuItem<PlatformReachComboBox>>
    buildDropdownMenuItemsPlatformReach(List platforms) {
  List<DropdownMenuItem<PlatformReachComboBox>> items = List();
  for (PlatformReachComboBox platform in platforms) {
    items.add(
      DropdownMenuItem(
        value: platform,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              platform.name,
              style: TextStyle(fontWeight: FontWeight.bold),
              textAlign: TextAlign.start,
            ),
            Text(
              platform.hint,
              style:
                  TextStyle(fontWeight: FontWeight.normal, color: Colors.grey),
              textAlign: TextAlign.end,
            )
          ],
        ),
      ),
    );
  }
  return items;
}

And this is where I encounter the problem, I don't know what to return in ListView for me pressing the button, and then the item to be added in there:

   ListView.builder(
                    padding: EdgeInsets.only(left: 10),
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    itemCount: _platformReach.length,
                    itemBuilder: (BuildContext ctxt, int Index) {
                      return Text(
                        "Galati"
                      );

                    },
                  ),

please try this way ... define a list

List<String> mylist = List();

and use it below

   ListView.builder(
                padding: EdgeInsets.only(left: 10),
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                itemCount: mylist.length,
                itemBuilder: (BuildContext ctxt, int Index) {
                  return Text(
                    mylist[Index]
                  );

                },
              ),

and After button Clicked

setState(() {
   mylist.add(_selectedVisibility.name);
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM