flutter widget 달력 만들기(1)

달력 위젯이 있겠지만, 

뭔가 활용도를 높이려면 직접 만드는 게 편하다. 

있는 위젯을 사용하면 처음 만들기는 편한데 나중에 없는 기능을 끌어다 쓰고 끌어다쓰고 하는 게 힘들다..

 

 

 

그래서 나온 결과물 ( 2022년 10월 1일은 토요일이다.)

 

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../../constants/logger.dart';
import '../../../tools/time_tools.dart';

class CalendarWidget extends StatefulWidget {
  CalendarWidget({Key? key}) : super(key: key);

  @override
  State<CalendarWidget> createState() => _CalendarWidgetState();
}

class _CalendarWidgetState extends State<CalendarWidget> {
  final int columnCount = 7;
  late final int rowCount;
  DateTime selectedDate = DateTime(2022, 10, 1);
  List<DateTime?> monthDateTimeList = [];
  double weekRowHeight = Get.height * 0.05;
  List weekDayString = ['일', '월', '화', '수', '목', '금', '토'];
  @override
  void initState() {
    monthDateTimeList = List.generate(selectedDate.weekday, (index) => null);
    List<DateTime> days = List.generate(countDayOfMonth(selectedDate),
        (index) => selectedDate.add(Duration(days: index)));
    monthDateTimeList.addAll(days);
    monthDateTimeList.addAll(List.generate(
        columnCount - (monthDateTimeList.length % columnCount),
        (index) => null));
    rowCount = (monthDateTimeList.length ~/ columnCount);
    logger.d('monthDateTimeList length => ${monthDateTimeList.length}');
    logger.d('rowCount => $rowCount');
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      logger.d('max height -> ${constraints.maxHeight}');
      return Table(
          border: TableBorder.all(color: Colors.grey[200]!, width: 1.5),
          children: <TableRow>[
            TableRow(
                children: List.generate(
                    columnCount,
                    (index) => SizedBox(
                        height: weekRowHeight,
                        child: Center(
                            child: Text(
                          weekDayString[index],
                          style:
                              TextStyle(color: index == 0 ? Colors.red : null),
                        ))))),
            ...List.generate(
              rowCount,
              (rowIndex) => TableRow(children: <Widget>[
                ...List.generate(
                    columnCount,
                    (columnIndex) => SizedBox(
                          height: (constraints.maxHeight - weekRowHeight) /
                              rowCount,
                          child: Column(
                            children: [
                              Text((monthDateTimeList[(columnCount * rowIndex +
                                              columnIndex)]
                                          ?.day ??
                                      '')
                                  .toString()),
                            ],
                          ),
                        ))
              ]),
            )
          ]);
    });
  }
}

 

int countDayOfMonth(DateTime dateTime) {
  return DateTime.utc(dateTime.year, dateTime.month + 1, 0).day;
}

 

select 되는 거 표현해주면 좋을 것 같은 데 그건 나중에 해줘야겠다 ~ 오늘은 이만 퇴근!