我想在flutter中创建下拉按钮来选择多个值并在水平行中显示这些值以及前面最近选择的值

Question

class MultiDropDown extends StatefulWidget {
  const MultiDropDown({Key? key}) : super(key: key);

  @override
  State<MultiDropDown> createState() => _MultiDropDownState();
}

class _MultiDropDownState extends State<MultiDropDown> {
  MultiSelectController _controller = MultiSelectController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Column(
        children: [
          MultiSelectDropDown(
            showClearIcon: true,
            controller: _controller,
            onOptionSelected: (options) {
              debugPrint(options.toString());
            },
            options: const <ValueItem>[
              ValueItem(label: 'Option 1', value: '1'),
              ValueItem(label: 'Option 2', value: '2'),
              ValueItem(label: 'Option 3', value: '3'),
              ValueItem(label: 'Option 4', value: '4'),
              ValueItem(label: 'Option 5', value: '5'),
              ValueItem(label: 'Option 6', value: '6'),
            ],
            selectionType: SelectionType.multi,
            chipConfig: const ChipConfig(wrapType: WrapType.scroll),
            selectedOptions: [
              ValueItem(label: 'Option 5', value: '5'),
              ValueItem(label: 'Option 6', value: '6'),
            ],
            selectedItemBuilder: (BuildContext context, List<ValueItem> selectedItems) {
              // Implement your logic to build selected items if needed
              return Container(child: Text('vgdh'),);
            },
            dropdownHeight: 300,
            optionTextStyle: const TextStyle(fontSize: 16),
            selectedOptionIcon: const Icon(Icons.check_circle),
          ),
        ],
      ),
    );
  }
}

多下拉菜单：^2.1.2

在此示例中，我想创建一个下拉按钮，通过它我们可以一次选择多个值。

我也想在水平行中显示这些多个选定的值。

在此代码中，所选视图在水平行中可见，但最近选择的值永远不会出现在前面。每次我们都必须在屏幕上滑动才能查看最近选择的值或名称。

请帮我修复它

Answer 1

您可以修改 selectedItemBuilder 方法：

selectedItemBuilder：（BuildContext上下文，列出selectedItems）{ 返回容器（ 身高：50， 孩子：ListView.builder（ 滚动方向： Axis.horizontal， itemCount: selectedItems.length, itemBuilder: (BuildContext 上下文，int 索引) { ValueItem item = selectedItems[index] as ValueItem; bool recentSelection = index == selectedItems.length - 1;

    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 4),
      child: Chip(
        label: Text(item.label),
        backgroundColor: recentSelection ? Colors.blue : Colors.grey,
      ),
    );
  },
),

）； },

Answer 2

this issue is solved using this code file
import 'package:aargus_shashi_1/charts/second_chart.dart';
import 'package:flutter/material.dart';

class DropDownSearch extends StatefulWidget {
  const DropDownSearch({
    super.key,
    required this.title,
    required this.textController,
    required this.items,
  });
  final String title;
  final TextEditingController? textController;
  final List<String>? items;

  @override
  State<DropDownSearch> createState() => _DropDownSearchState();
}

class _DropDownSearchState extends State<DropDownSearch> {
  bool _isTapped = false;
  List<String> _filteredList = [];
  List<String> _subFilteredList = [];

  @override
  initState() {
    _filteredList = widget.items!;
    _subFilteredList = _filteredList;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            widget.title,
            style: const TextStyle(fontSize: 16, color: Color(0xFF858597)),
          ),
          const SizedBox(height: 5),
          Container(
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12),
              ),
              child: Column(
                children: [
                  TextFormField(
                    controller: widget.textController,
                    onChanged: (val) {
                      setState(() {
                        _filteredList = _subFilteredList
                            .where((element) => element.toLowerCase().contains(
                                widget.textController!.text.toLowerCase()))
                            .toList();
                      });
                    },
                    validator: (val) =>
                        val!.isEmpty ? 'Field can\'t empty' : null,
                    style:
                        TextStyle(color: Colors.black, fontSize: 16.0),
                    onTap: () => setState(() => _isTapped = true),
                    decoration: InputDecoration(
                      filled: true,
                      fillColor: Colors.white,
                      errorStyle: const TextStyle(fontSize: 0.01),
                      errorBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(12),
                        borderSide: const BorderSide(
                          color: Colors.black,
                          style: BorderStyle.solid,
                        ),
                      ),
                      contentPadding:
                          const EdgeInsets.only(bottom: 10, left: 10),
                      focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(12),
                          borderSide: BorderSide(
                              color: Colors.black.withOpacity(0.7),
                              width: 0.8)),
                      border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(12),
                          borderSide: BorderSide(
                              color: Colors.black.withOpacity(0.7),
                              width: 0.8)),
                      labelStyle: const TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.bold,
                      ),
                      enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(12),
                        borderSide: BorderSide(
                            color: Colors.black.withOpacity(0.7), width: 0.8),
                      ),
                      suffixIcon: Icon(Icons.arrow_drop_down, size: 25),
                      isDense: true,
                    ),
                  ),
                  _isTapped && _filteredList.isNotEmpty
                      ? Container(
                          height: 150.0,
                          color: Colors.grey.shade200,
                          padding: const EdgeInsets.symmetric(horizontal: 8.0),
                          child: ListView.builder(
                            itemCount: _filteredList.length,
                            itemBuilder: (context, index) {
                              return InkWell(
                                onTap: () {
                                  setState(() => _isTapped = !_isTapped);
                                  widget.textController!.text =
                                      _filteredList[index];
                                setState(() {

                                });
                                },
                                child: Padding(
                                  padding:
                                      const EdgeInsets.symmetric(vertical: 8.0),
                                  child: Text(_filteredList[index],
                                      style: TextStyle(
                                          color: Colors.grey.shade800,
                                          fontSize: 16.0)),
                                ),
                              );
                            },
                          ),
                        )
                      : const SizedBox.shrink(),
                ],
              ))
        ]);
  }
}