Flutter how to select multiple list items from left to right in a row without skipping any-CodePudding

I have a ListView.builder that returns a InkWell with a child Container that holds the value of an array and I implemented inside onTap _selectedIndex = index; to select each item of array clicked and unselect when another item is clicked which works perfectly but now I will like a workaround that can make me select multiple item in a row (for example: if I have an array of item [1,2,3] click on 1->2->3 is allowed but when 1->3 is tried to click it shouldn't permit and show an error message). Below is my code:


String time_slot;
int _selectedIndex = -1;

 Container(
            height: 50,
            child:new ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: dataSchedule == null ? 0 : dataSchedule.length,
                    itemBuilder: (BuildContext context, int index){
                      return  InkWell(onTap: (){ setState(() {
                                                              time_slot = dataSchedule[index]['time_slot'];

                                                                _selectedIndex= index;
                                                            

                                                            });
                                                          },

                                                          child: Container(

                                                          padding: EdgeInsets.all(0),
                                                          child: Card(
                                                              color: Colors.white,
                                                              elevation: 0,
                                                              semanticContainer: true,
                                                              shape: RoundedRectangleBorder(
                                                                  borderRadius: BorderRadius.circular(5.0),

                                                              ),
                                                              child: Container(
                                                                  decoration:
                                                                  BoxDecoration(
                                                                      color: Colors.white,
                                                                      borderRadius:
                                                                      BorderRadius
                                                                          .circular(
                                                                          3.0),
                                                                      border:Border.all(color:scheduleField=="field require"?Colors.red: index== _selectedIndex  ?
                                                                      colorBlue :
                                                                      Colors.grey[200],width: 2)),
                                                                padding: EdgeInsets.all(10),
                                                                  child:Center(
                                                                    child: Text(
                                                                      dataSchedule[index]['time_slot'],style:TextStyle(fontFamily: 'Montserrat',
                                                                      color: colorBlack, fontWeight: FontWeight.bold,
                                                                      fontSize: 15),
                                                                      textAlign: TextAlign.center,
                                                                    ),
                                                                  ),))));
                                                    }
                                                ),


                                              ),

I will really appreciate any contribution and if there is any more required information I will gladly provide it. Thanks in advance.

CodePudding user response：

After so much research I was able to solve this by using the Flutter package flutter_multi_select_items and I implemented it with below code:

 MultiSelectContainer(
    itemsPadding: const EdgeInsets.all(10),
    textStyles: const MultiSelectTextStyles(
    textStyle: TextStyle(fontFamily: 'Montserrat', 
     fontWeight:FontWeight.bold,)),
     showInListView: true,
     listViewSettings: ListViewSettings( scrollDirection: Axis.horizontal,
                        separatorBuilder: (_, __) => const SizedBox(
                                                          width: 10,
                                                        )),
                                                    items: List.generate(dataSchedule == null ? 0 : dataSchedule.length,
                                                            (index) => MultiSelectCard(value: dataSchedule[index]['time_slot'], label: dataSchedule[index]['time_slot'],)),
                                                    onChange: (allSelectedItems, selectedItem) {


                                                    })