i want to create dropdown button in flutter to select multiple value & display those value in horizontal row & recent seclected values in front

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),
          ),
        ],
      ),
    );
  }
}

multi_dropdown: ^2.1.2

In this example I want to create a dropdown button by which we can select multiple values at a time.

I also want to show these multiple selected value in the horizontal row.

In this code selected views are visible in horizontal row but recent selected value never come in front. Every time, we have to slide on the screen to view recent selected value or name.

Please help me to fix it

Answer 1

you can modify the selectedItemBuilder method:

selectedItemBuilder: (BuildContext context, List selectedItems) {
  return Container(
    height: 50,
    child: ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: selectedItems.length,
      itemBuilder: (BuildContext context, int index) {
        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(),
                ],
              ))
        ]);
  }
}