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

CodePudding user response：

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