Flutter swiper package slider date

Question

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

Your question is not clear on what you want to achieve. Please add more details — Md. Kamrul Amin, Nov 01 '22 at 10:58
https://pub.dev/packages/flutter_swiper_null_safety/install @YeasinSheikh — avcismail, Nov 01 '22 at 12:14

score 0 · Accepted Answer · answered Nov 01 '22 at 12:47

0

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

answered Nov 01 '22 at 12:47

Md. Yeasin Sheikh

54,221
7
29
56

Thank you, worked. I have one more question. How can I get the current date data? I want to publish this data as a slider like here. – avcismail Nov 01 '22 at 13:13
may `DateTime.now()` will help – Md. Yeasin Sheikh Nov 01 '22 at 13:26
yes, I used DateTime.now() but I can't show next days in swiper. If you have an opinion on this, I'd love to hear it :) – avcismail Nov 01 '22 at 14:07
adding duration day 1 will give you next date. It will be list `data = List.generate(numberOfNextDaysLikeToGenerate, (i)=> DateTime.now().add(Duration(day:i))` – Md. Yeasin Sheikh Nov 01 '22 at 14:09
I used as you said. How can I extract only days from this data? I tried several ways but failed. [It looks like this.](https://imgur.com/a/XmrruTU) . and each column gives the same. – avcismail Nov 01 '22 at 14:50

Flutter swiper package slider date

1 Answers1