Search code examples
flutterdartsliderflutter-swiper

Flutter swiper package slider date


I want to create an appointment calendar. I want to show the days by swiping to the right in the form of a slider. I want to take the days as a list and show them on the screen in order. But as I have indicated in the screenshot, it always shows the same day and number. Can you help with this? Where am i missing something.

this like

Swiper imageSlider(context) {
var weekDays = {'19':'Monday','20':'Tuesday','21':'Wednesday','22':'Thursday','23':'Friday'};
List keys = weekDays.keys.toList();
List values = weekDays.values.toList();
int _index = 0;

return new Swiper(
viewportFraction: 0.2,
autoplay: false,
onIndexChanged: (value) {
  _index = value;
},
itemBuilder: (BuildContext context, int index) {

  return Container(
    child: Column(
      children: [
        Container(
          height: 30,
          color: Colors.blue,
        ),
        Text('$_index'),
        Text(values[1])
      ],
    ),
  );
}, 

itemCount: 10);
}

Screenshot:

screenshot on emulator


Solution

  • While the viewportFraction already handling the division part, use itemBuilder's index,

    return Swiper(
      viewportFraction: .2,
      autoplay: false,
      onIndexChanged: (value) {
        _index = value;
      },
      itemBuilder: (BuildContext context, int index) { //use this index
        return Column(
          children: [
            Container(
              width: 40,
              height: 40,
              color: Colors.blue,
            ),
            Text('${index}'), //here
            Text(values[index]) // and here
          ],
        );
      },
      itemCount: weekDays.length,
    );