CHB61 / multi_select_flutter

A flexible multi select package for Flutter. Make multi select widgets the way you want.
https://pub.dev/packages/multi_select_flutter
BSD 2-Clause "Simplified" License
239 stars 225 forks source link

InitialValue isn't working properly #62

Open sgarg15 opened 3 years ago

sgarg15 commented 3 years ago

hey everyone, so I am using MultiSelectBottomSheetField And I am having some issues with the initialValue parameter for it. So at the moment, I have data saved in firestore as a string but its in the format of a list. And what i was trying to do was get the string data from firestore -> convert to a list with the respective class -> and then show as initial value in the above package/widget. But whats happening is that the initial value isnt showing, even though the value is not empty. So for context this is how I change to list from firestore string:

  List<Skill?> skillList = [];
  void changeSkillToList(String? stringList) {
    int indexOfOpenBracket = stringList!.indexOf("[");
    int indexOfLastBracket = stringList.lastIndexOf("]");
    var noBracketString =
        stringList.substring(indexOfOpenBracket + 1, indexOfLastBracket);
    var list = noBracketString.split(", ");
    for (var i = 0; i < list.length; i++) {
      skillList.add(Skill(id: 1, name: list[i].toString()));
    }
  }

this is how i use the acc widget:

    final _skillItems =
      skill.map((skill) => MultiSelectItem<Skill>(skill, skill.name)).toList();

  MultiSelectBottomSheetField<Skill?>(
  selectedColor: Color(0xFF5DB075),
  selectedItemsTextStyle:
      TextStyle(color: Colors.white),
  initialChildSize: 0.4,
  decoration: BoxDecoration(),
  listType: MultiSelectListType.CHIP,
  initialValue: skillList,
  searchable: true,
  items: _skillItems,
  buttonText: Text("Select your skills...",
      style: GoogleFonts.inter(
          color: Color(0xFFBDBDBD),
          fontSize: 16)),
  onConfirm: (values) {
    context
        .read(pharmacistSignUpProvider.notifier)
        .changeSkillList(values);
  },
  chipDisplay: MultiSelectChipDisplay(
    items: context
        .read(pharmacistSignUpProvider.notifier)
        .skillList
        ?.map((e) =>
            MultiSelectItem(e, e.toString()))
        .toList(),
    chipColor: Color(0xFF5DB075),
    onTap: (value) {
      context
          .read(
              pharmacistSignUpProvider.notifier)
          .skillList
          ?.remove(value);
      return context
          .read(
              pharmacistSignUpProvider.notifier)
          .skillList;
    },
    textStyle: TextStyle(color: Colors.white),
  ),
),

And this is my initState:

  List<Skill?> skillList = [];
  @override
  void initState() {
    skillList = changeSkillToList(context
        .read(pharmacistMainProvider.notifier)
        .userDataMap?["knownSkills"]);
    print(skillList);
    super.initState();
  }

If someone could help me out, it would be very appreciated.

Thanks!!

sgarg15 commented 3 years ago

I am still having this issue. If someone could help me out, I will really appreciate it. Thank you!

stevechan3310 commented 3 years ago

Hi, I'm having the exact same issue as well. Thanks for this plugin but I really hope this can be resolved. Thank you

ElixirMike commented 3 years ago

I also can't seem to get InitValue to work at all? Below is super simplified code that hard-codes an initial value. However, it doesn't appear/work.

Can you confirm if initialValue is working at all?

import 'package:flutter/material.dart';
import 'package:multi_select_flutter/multi_select_flutter.dart';

import '../../api/api_manager.dart';
import '../../models/option.dart';

class GBSelectFilter extends StatefulWidget {
  final Map filter;
  final Map column;
  final int tableId;
  final Function removeFilter;
  final Function updateFilter;

  const GBSelectFilter(
      {Key? key,
      required this.filter,
      required this.removeFilter,
      required this.updateFilter,
      required this.column,
      required this.tableId})
      : super(key: key);

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

class _GBSelectFilterState extends State<GBSelectFilter> {

List<MultiSelectItem<Object?>> _items=[] ;

List<Option> _selectedOptions = [Option(optionId: 1,option: 'Red',attributes: {'color':'red'})];

  @override
  void initState() {
     getListData();
    super.initState();
  }

  Future<void> getListData() async {
    List<Option> data = await ApiManager.getListData(widget.tableId, widget.column);
    print(data[0].optionId);
    this.setState(() {
      _items=data
      .map((opt) => MultiSelectItem<Option>(opt, opt.option))
      .toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child:  MultiSelectDialogField(
                items: _items,
                initialValue: _selectedOptions,
                title: Text("Colors"),
                selectedColor: Colors.blue,
                decoration: BoxDecoration(
                  color: Colors.blue.withOpacity(0.1),
                  borderRadius: BorderRadius.all(Radius.circular(40)),
                  border: Border.all(
                    color: Colors.blue,
                    width: 2,
                  ),
                ),
                buttonIcon: Icon(
                  Icons.pets,
                  color: Colors.blue,
                ),
                buttonText: Text(
                  "Favorite Animals",
                  style: TextStyle(
                    color: Colors.blue[800],
                    fontSize: 16,
                  ),
                ),
                onConfirm: (results) {

                    // _selectedOptions=results as List<Option>;

                },
              ),
      // Column(children: _options.map((e) {
      //   return Text(e.option);
      // }).toList(),),
    );
  }
}
garrettkidlet commented 3 years ago

Having this same issue, Code which was working in previous versions is now not working for initalValue, No changes to the code, InitialValue no longer shows any values, Please can you look into this?

qs991011 commented 3 years ago

Having this same issue, Code which was working in previous versions is now not working for initalValue, No changes to the code, InitialValue no longer shows any values, Please can you look into this?

I have solve this issue, this issue help me,hope it can help you。#11

garrettkidlet commented 3 years ago

Having this same issue, Code which was working in previous versions is now not working for initalValue, No changes to the code, InitialValue no longer shows any values, Please can you look into this?

I have solve this issue, this issue help me,hope it can help you。#11

This worked in helping me find the solution, I am using Equatable in model definition, so needed to build both All Items and the selected Items arrays with the exact same values for the model, this fixed the issue with the initialValues showing properly, Thank you @qs991011 for pointing to this solution

pedromorgan commented 2 years ago

Sigh.. still not working ;-( and kinda a showstopper.. so off to find another

stoppimyse commented 2 years ago

not usable, the initial set does not work, I immediately change the plugin

jobo5432 commented 1 year ago

Yea, I have this issue, and given the age of the bug, I'm going to pass on this plugin. Sorry, otherwise it's really useful, but this is an absolute requirement for any form field (to be able to pre-populate), and I'd prioritize fixing this one.