CODEWITHSUNDEEP
flutter
Emanuel Developer
Emanuel Developer

Reputation: 708

Create a index list of weeks and inside at each list have a list of Hours in Flutter

this is a picture of what I did in static form:

enter image description here

the code to achieve what I did is:

Widget build(BuildContext context) {
    return ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: 7,
      itemBuilder: (BuildContext context, int index) {
        return Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Column(
              children: [
                Container(
                  height: 50,
                  width: 117,
                  child: Card(
                    color: Colors.orange,
                    child: Center(
                        child: Text(
                      WeekDays.days[index],
                      style: TextStyle(fontSize: 12, color: Colors.white),
                    )),
                  ),
                ),
                Container(
                  height: 250,
                  width: 117,
                  child: ListView.builder(
                    itemCount: ReservationTime.hours.length,
                    itemBuilder: (BuildContext context, int index) {
                      return Column(
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Column(
                                children: [
                                  Container(
                                    height: 50,
                                    width: 117,
                                    child: GestureDetector(
                                      onTap: () {
                                      },
                                      child: new Card(
                                        elevation: 10,
                                        child: Center(child: Text(ReservationTime.hours[index],style: TextStyle(fontSize: 12,color: Colors.white))),
                                    ),
                                  ),),
                                ]
                              ),
                            ],
                          ),
                        ],
                      );
                    },
                  ),

the 2 list where I grab the data are for Horizontal Week Days is:

class WeekDays {
  static final List<String> days = ['Monday 07 Dic', 'Tuesday 08 Dic', 'Wednesday 09 Dic', 'Thursday 10 Dic', 'Friday 11 Dic', 'Saturday 12 Dic', 'Sunday 13 Dic'];
}

and for vertical List is:

class ReservationTime {
  static final List<String> hours = ['00.00 - 00.20', '00.20 - 00-40', '00.40 - 01.00', '01.00 - 01.20', '01.20 - 01.40','01.40 - 02.00','02.00 - 02.20','02.20 - 02.40','02.40 - 03.00','03.00 - 03.20','03.20 - 03.40','03.40 - 04.00','04.00 - 04.20','04.20 - 04.40','04.40 - 05.00'];
}

what I want to do as per picture ,is with the Button marked by the Red Arrow switch the Week list to the next week and with other arrow to the last week. Of course I need to get the current day of the week and an Index of all the weeks of the year. I know that my method is some wrong but I am here to ask if someone has an idea how to achieve that. I need to create a calendar with possibility to the user to booking the time by clicking on each element then this element will change color and send his state to the database.

Upvotes: 0

Views: 433

Answers (1)

Arkay
Arkay

Reputation: 469

Wrap everything in a PageView.builder and feed it a PageController

PageView.builder(
    controller: _pageController,
      itemBuilder: (context, weekIndex) {
    return ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: 7,
      itemBuilder: (BuildContext context, int index) {
        DateTime now = DateTime.now();
        int milliseconds = now.millisecondsSinceEpoch - (now.weekday - 1)*24*60*60*1000 + weekIndex*7*24*60*60*1000 + index*24*60*60*1000;
        DateTime dayDateTime = DateTime.fromMillisecondsSinceEpoch(milliseconds);
        int monthIndex = dayDateTime.month - 1;
        List months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        List weekdays = ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun'];
        String month = months[monthIndex];
        String day = dayDateTime.day.toString();
        String weekday = weekdays[dayDateTime.weekday - 1];
        String date = weekday + ' ' + day + ' ' + month;
        return Row(mainAxisAlignment: MainAxisAlignment.center, children: [
          Column(children: [
            Container(
              height: 50,
              width: 117,
              child: Card(
                color: Colors.orange,
                child: Center(
                    child: Text(
                  date,
                  style: TextStyle(fontSize: 12, color: Colors.white),
                )),
              ),
            ),
            Container(
                height: 250,
                width: 117,
                child: ListView.builder(
                  itemCount: ReservationTime.hours.length,
                  itemBuilder: (BuildContext context, int index) {
                    return Column(
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Column(children: [
                              Container(
                                height: 50,
                                width: 117,
                                child: GestureDetector(
                                  onTap: () {},
                                  child: new Card(
                                    elevation: 10,
                                    child: Center(
                                        child: Text(
                                            ReservationTime.hours[index],
                                            style: TextStyle(
                                                fontSize: 12,
                                                color: Colors.white))),
                                  ),
                                ),
                              ),
                            ]),
                          ],
                        ),
                      ],
                    );
                  },
                ))
          ])
        ]);
      });})

Outside your build you want to initialise your PageController via

PageController _pageController = PageController();

Now to get a button to go to nextPage use the PageController method:

_pageController.nextPage(duration: Duration(milliseconds: 1000), curve: Curves.ease)

and similarly to go back:

_pageController.previousPage(duration: Duration(milliseconds: 1000), curve: Curves.ease)

The block within the first ListView.builder shows how you can assign the correct date to each day, there are probably more elegant ways of doing this...

Upvotes: 1

Related Questions