Example code of flutter imitation nail attendance calendar

Time:2021-10-18

This paper mainly introduces the example code of flutter imitation nail attendance calendar, which is shared with you as follows:

effect

prototype

development

1. Use

//Attendance calendar
            DatePickerDialog(
              initialDate: DateTime.now(),
              firstDate: DateTime(2020),
              lastDate: DateTime(2030),
              onDateChanged: onDateChanged,
              //0: no status, 1: normal attendance, 2: abnormal examination, late, early leave,
              //If it is less than one month, the calendar will automatically fill one month with 0
              checking: [
                0,
                0,
                1,
                2,
              ],
            ),

DatePickerDialog exists in the material package with flutter. The calendar provided with flutter exists in the form of dialog. In this paper, the dialog is changed to statefulwidget, which is directly on the page. The redundant items are removed and directly on the material / calendar_ date_ In picker.dart_ Modify on daypicker.

2. Modify date style in calendar:


 Widget dayWidget = Container(
          margin: EdgeInsets.all(4.0),
          decoration: decoration,
          alignment: Alignment.center,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(localizations.formatDecimal(day),
                  style: TextStyle(
                      fontSize: 14.0,
                      color: dayColor,
                      fontWeight: FontWeight.bold)),
              Visibility(
                visible: checking[day - 1] == 1 || checking[day - 1] == 2,
                child: Container(
                  height: 6.0,
                  width: 6.0,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: isSelectedDay ? Colors.white :
                     (checking[day - 1] == 1 ?  Color(0xFF1376EE): Color(0xFFFF8A21)),
                  ),
                ),
              ),
            ],
          ),
        );

Visibility is modified and added to show the clock out status of the current day. If the clock out is normal, a small blue dot will be displayed below the date display. If there is an exception, an orange dot will be displayed. If there is no status, it will not be displayed. Checking is passed in using DatePickerDialog. Since the calendar starts from 1 and the array starts from index 0, checking [day – 1] is used In order to accurately obtain the clock out status of a day, day is all the dates in a month in the calendar.

3. Set week title

After modification:

List<Widget> _dayHeaders() {
    final List<Widget> result = <Widget>[];
    Final list < string > weekdays = ["day", "one", "two", "three", "four", "Five", "six"];
    for (int i = 1; true; i = (i + 1) % 7) {
      final String weekday = weekdays[i];
      result.add(ExcludeSemantics(
        child: Center(
            child: Text(weekday,
                style: TextStyle(fontSize: 14.0, color: Color(0xFF999999)))),
      ));
      if (i == (1 - 1) % 7) break;
    }
    return result;
  }

Original text:


  List<Widget> _dayHeaders(TextStyle? headerStyle, MaterialLocalizations localizations) {
    final List<Widget> result = <Widget>[];
    for (int i = localizations.firstDayOfWeekIndex; true; i = (i + 1) % 7) {
      final String weekday = localizations.narrowWeekdays[i];
      result.add(ExcludeSemantics(
        child: Center(child: Text(weekday, style: headerStyle)),
      ));
      if (i == (localizations.firstDayOfWeekIndex - 1) % 7)
        break;
    }
    return result;
  }

The return value of localizations.firstdayofweekendex is 0 or 1. If 0 is returned, Sunday is the first day of the week; If 1 is returned, Monday is the first day of the week. This article does not get it from localizations.firstdayofweekendex. If it is directly assigned to 1, the week starts on Monday.

4. Complete the blank date of each month:

Gets the number of days in the specified month


  static int getDaysInMonth(int year, int month) {
    if(month < 1){
      year = year - 1;
      month = month + 12;
    }

    if(month > 12){
      year = year + 1;
      month = month - 12;
    }
    if (month == DateTime.february) {
      final bool isLeapYear = (year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0);
      return isLeapYear ? 29 : 28;
    }
    const List<int> daysInMonth = <int>[31, -1, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    return daysInMonth[month - 1];
  }

Get the offset of the first day of the specified month, that is, the day of the week on the first day of each month. If the first day is Wednesday, because the calendar week starts from the first day, the Monday and Tuesday of the first week are blank. You need to fill in the last two days of the previous month, so you also need to get the last two days of the previous month.

//Get date offset
  static int firstDayOffsets(int year, int month) {
    final int weekdayFromMonday = DateTime(year, month).weekday - 1;
    int firstDayOfWeekIndex = 1;
    firstDayOfWeekIndex = (firstDayOfWeekIndex - 1) % 7;
    return (weekdayFromMonday - firstDayOfWeekIndex) % 7;
  }
  ...
  //Completion start date
     int day = -dayOffset;
    while (day < daysInMonth) {
      day++;
      if (day < 1) {
        dayItems.add(Container(
          margin: EdgeInsets.all(4.0),
          alignment: Alignment.center,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
            //Daysinpremonth days of the previous month - date offset of the current month can complete the missing date from the beginning of the current month
              Text(localizations.formatDecimal(daysInPreMonth - day.abs()),
                  style: TextStyle(
                      fontSize: 14.0,
                      color: Color(0xFF888888),
                      fontWeight: FontWeight.bold)),
              Visibility(
                visible: false,
                child: Container(
                  height: 6.0,
                  width: 6.0,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color(0xFFFF8A21),
                  ),
                ),
              ),
            ],
          ),
        ));
      } else {
        ...
      }
        ...
      
      }
    }

Complete the end date of the calendar. If the last day of each month is Sunday, it is not necessary to complete it. If it is Friday, the first two days of the next month shall be completed on Saturday and Sunday of the current month:

if ((daysInMonth + dayOffset) % 7 > 0) {
    //Calculate how many days you need to make up, just start from 1
      int addNum = 7 - ((daysInMonth + dayOffset) % 7);
      for (int i = 1; i <= addNum; i++) {
        dayItems.add(Container(
          margin: EdgeInsets.all(4.0),
          alignment: Alignment.center,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(localizations.formatDecimal(i),
                  style: TextStyle(
                      fontSize: 14.0,
                      color: Color(0xFF888888),
                      fontWeight: FontWeight.bold)),
              Visibility(
                visible: false,
                child: Container(
                  height: 6.0,
                  width: 6.0,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color(0xFFFF8A21),
                  ),
                ),
              ),
            ],
          ),
        ));
      }
    }

Calculate the calendar height from Monday. You can display several lines, that is, calculate the calendar height. For different months and heights, there are at least 4 lines and at most 6 lines. It will be dynamically displayed according to the content without leaving a lot of blank space

//Calculate the number of days in a month 
    int daysInMonth = ChinaDateUtils.getDaysInMonth(
        widget.initialDate.year, widget.initialDate.month);
     //Calculate the week of the first day of each month
    int dayOffset = ChinaDateUtils.firstDayOffsets(
        widget.initialDate.year, widget.initialDate.month);
    //Calculate how many lines to display all dates
    int row = ((daysInMonth + dayOffset) / 7).ceil();

Modifying these contents can probably achieve the above effect.

Demo address: https://gitee.com/masshub/sign_ in

This is the end of this article about the sample code of flutter imitation nail attendance calendar. For more information about flutter imitation nail attendance calendar, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!

Recommended Today

Kudu: introduction and architecture of Apache kudu

Summary:Kudu,Hdfs,Hbase Introduction to kudu Kudu is open source by clouderaStorage engine, low latency can be provided at the same timeRandom reading and writingAnd efficientBatch data analysisAbility, he is a fusionHdfsandHbaseA new component with a new storage component in between. Kudu and HBase HDFS comparison.png Kudu is a big data storage engine, which can be combined […]