skip to Main Content

I try to display dates of weeks. but based on requirement i need to skip Saturday and Sunday every time.

here is example of displaying date

here is code of date list:-

ListView.builder(
        itemCount: 7,
        shrinkWrap: true,
        itemBuilder: (context, index) => dateWidget(index),
      ),

here is code of dateWidget() method which is used for displaying dates:-

Widget dateWidget(int i) {
    DateTime tempDate = DateTime.now().add(Duration(days: i));
    return InkWell(
      onTap: () {},
      child: Container(
        margin: const EdgeInsets.all(2),
        width: 10.0,
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(10)),
          color: AppColor.premiumBlue,
        ),
        child: Container(
          padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              labels(text: DateFormat('EE').format(tempDate).toUpperCase()),
              labels(
                text: tempDate.day.toString(),
                color: AppColor.white,
              ),
            ],
          ),
        ),
      ),
    );
  }

I need to skip Saturday and Sunday dates. if i enter 7 so, display 7 dates and also skip Saturday and Sunday. If any date is cut then last date should also be added.

For example:-

I enter 7, means i want to display 7 date from today.
So, happen like this..
17-FRI, 18-SAT, 19-SUN, 20-MON, 21-TUE, 22-WED, 23-THU (currently happen this)

and want to skip Saturday and Sunday.
So, happen like this..
17-FRI, 20-MON, 21-TUE, 22-WED, 23-THU, 24-FRI (I want like this.)

2

Answers


  1. You can return empty sizedBox based on weekday

      Widget dateWidget(int i) {
        DateTime tempDate = DateTime.now().add(Duration(days: i));
    
        if (tempDate.weekday > 5) {
          //6 and 7 for sat&sunday
          return SizedBox.shrink();
        }
        return InkWell(
          onTap: () {},
    
    Login or Signup to reply.
  2. New Solution

    Instead of using ListView.builder, pass in a list of the generated widgets to a ListView as so:

    ...
    child: ListView(
      shrinkWrap: true,
      children: generateDateWidgets(24),
    );
    
    List<Widget> generateDateWidgets(int count) {
      int weekends = 0;
      return List.generate(
        count,
        (index) {
          DateTime tempDate = DateTime.now().add(Duration(days: index + weekends));
          if (tempDate.weekday > 5) {
            int offset = 7 - tempDate.weekday + 1;
            tempDate = tempDate.add(Duration(days: offset));
            weekends += offset;
          }
          return dateWidget(tempDate);
        },
      );
    }
    

    dateWidget remains unchanged

    Widget dateWidget(DateTime date) {
      return InkWell(
        onTap: () {},
        child: Container(
          margin: const EdgeInsets.all(2),
          width: 10.0,
          decoration: const BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(10)),
            color: AppColor.premiumBlue,
          ),
          child: Container(
            padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                labels(text: DateFormat('EE').format(date).toUpperCase()),
                labels(
                  text: date.day.toString(),
                  color: AppColor.white,
                ),
              ],
            ),
          ),
        ),
      );
    }
    
    

    Old Solution (doesn’t work)

    Note: this solution doesn’t work since ListView.builder

    One solution (that isn’t that great, but works) is to do it like so by doing the calculations before creating the dateWidget:

    var weekends = 0; //define a count variable somwhere above ListView.builder
    ...
    child: ListView.builder(
      itemCount: 7,
      shrinkWrap: true,
      itemBuilder: (context, index) {
        DateTime tempDate = DateTime.now().add(Duration(days: index + weekends));
        if (tempDate.weekday > 5) {
          int offset = 7 - tempDate.weekday + 1;
          tempDate = tempDate.add(Duration(days: offset));
          weekends += offset;
        }
        return dateWidget(tempDate);
      },
    );
    
    

    And then

    Widget dateWidget(DateTime date) {
      return InkWell(
        onTap: () {},
        child: Container(
          margin: const EdgeInsets.all(2),
          width: 10.0,
          decoration: const BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(10)),
            color: AppColor.premiumBlue,
          ),
          child: Container(
            padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                labels(text: DateFormat('EE').format(date).toUpperCase()),
                labels(
                  text: date.day.toString(),
                  color: AppColor.white,
                ),
              ],
            ),
          ),
        ),
      );
    }
    
    

    An alternative solution would be to do what @YeasinSheikh suggested. Instead of using a number to determine the number of weekdays we want, set a certain date you want to have dateWidgets to and then calculate the number of days you need and put that into itemCount.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search