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.
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) {
})