티스토리 뷰

반응형

Flutter의 showDateRangePicker를 활용하여 날짜를 customize 하는 기능을 구현해보았다. 

// Customizing date 기능 관련 코드들

  DateTime globalDateTime = DateTime.now();
  DateTime globalDateTimeEnd = DateTime.now();

  bool visibleValueLeft = false;
  bool visibleValueRight = false;

  String _selectedDate = DateTime.now().toString().substring(0, 10);

  double sizedBoxValue = 50.0;
  bool sizedBoxVisibility = false;
  double textPadding = 18.0;
  double elevatedButtonPaddingRight = 10.0;
  double elevatedButtonPaddingLeft = 10.0;

  Future<void> _opendatePicker(BuildContext context) async {
    final DateTimeRange d = await showDateRangePicker(
        saveText: 'SET',
        context: context,
        initialEntryMode: DatePickerEntryMode.calendarOnly,
        initialDateRange: DateTimeRange(
          start: globalDateTime,
          end: globalDateTimeEnd,
        ),
        firstDate: DateTime(DateTime.now().year - 5),
        lastDate: DateTime.now());

    if (d != null && d.start != d.end) {
      globalDateTime = d.start;
      globalDateTimeEnd = d.end;
      setState(() {
        print('star and end is not same');
        _selectedDate = DateFormat('yyyy-MM-dd').format(d.start).toString() +
            '  ~  ' +
            DateFormat('yyyy-MM-dd').format(d.end).toString();
        visibleValueLeft = false;
        visibleValueRight = false;
        sizedBoxVisibility = true;
        elevatedButtonPaddingRight = 0.0;
      });
    } else if (d.start == d.end) {
      globalDateTime = d.start;
      globalDateTimeEnd = d.end;
      setState(() {
        print('am i working?');
        _selectedDate = DateFormat('yyyy-MM-dd').format(d.start).toString();
        print('star and end is the same');
        visibleValueLeft = true;
        visibleValueRight =
            _selectedDate == DateTime.now().toString().substring(0, 10)
                ? false
                : true;

        sizedBoxVisibility = true;
        sizedBoxValue = 0.0;

        print('${DateTime.now().toString().substring(0, 10)}');

        print(_selectedDate);

        setState(() {});
        print('all is well?');
      });
    }
  }

 

body: SafeArea(
        child: Container(
          color: AppColor.settingBackgound,
          padding: EdgeInsets.only(
              top: appConfig.width * 8.0,
              left: appConfig.width * 5.0,
              right: appConfig.width * 5.0,
              bottom: appConfig.width * 8.0),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(appConfig.width * 5.0),
            child: Container(
              color: Colors.white,
              child: Stack(
                children: <Widget>[
                  Positioned(
                    top: appConfig.height * 6.0,
                    right: appConfig.width * 0.0,
                    // left: appConfig.width * 10.0,
                    child: Container(
                      padding: EdgeInsets.only(right: 10),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          Visibility(
                            visible: visibleValueLeft,
                            child: IconButton(
                              padding: EdgeInsets.only(left: 0.0, right: 0.0),
                              iconSize: 50,
                              onPressed: () {
                                setState(() {
                                  globalDateTime = globalDateTime
                                      .subtract(Duration(hours: 24));

                                  globalDateTimeEnd = globalDateTime;

                                  _selectedDate = globalDateTime
                                      .toString()
                                      .substring(0, 10);
                                });

                                print('goodbye');
                                requestNewHistory();
                              },
                              icon: Icon(
                                Icons.arrow_left,
                              ),
                            ),
                          ),
                          ElevatedButton(
                            style: ElevatedButton.styleFrom(
                              elevation: 0.0,
                              primary: Colors.white,
                              padding: EdgeInsets.only(left: 0.0, right: 0.0),
                            ),
                            onPressed: () async {
                              try {
                                await _opendatePicker(context);
                              } catch (e) {
                                print('error is $e');
                              }

                              requestNewHistory();
                            },
                            child: Row(
                              children: <Widget>[
                                Icon(Icons.calendar_today_outlined,
                                    color: Colors.amber),
                                SizedBox(
                                  width: 5.0,
                                ),
                                Text(
                                  _selectedDate,
                                  style: TextStyle(
                                    color: Colors.black,
                                  ),
                                ),
                              ],
                            ),
                          ),
                          Visibility(
                            visible: _selectedDate ==
                                    DateTime.now().toString().substring(0, 10)
                                ? true
                                : false,
                            child: SizedBox(
                              width: _selectedDate ==
                                      DateTime.now().toString().substring(0, 10)
                                  ? 0.0
                                  : sizedBoxValue,
                            ),
                          ),
                          Visibility(
                            visible: (_selectedDate ==
                                        DateTime.now()
                                            .toString()
                                            .substring(0, 10)) ||
                                    globalDateTime == globalDateTimeEnd
                                ? true
                                : false,
                            child: IconButton(
                              padding: EdgeInsets.only(left: 0.0),
                              iconSize: 50,
                              onPressed: _selectedDate ==
                                      DateTime.now().toString().substring(0, 10)
                                  ? null
                                  : () {
                                      setState(() {
                                        globalDateTime = globalDateTime
                                            .add(Duration(hours: 24));

                                        globalDateTimeEnd = globalDateTime;

                                        _selectedDate = globalDateTime
                                            .toString()
                                            .substring(0, 10);
                                      });
                                      requestNewHistory();
                                    },
                              icon: Icon(Icons.arrow_right),
                            ),
                          ),
                          refreshButton()
                        ],
                      ),
                    ),
                  ),
                  Positioned(
                    top: appConfig.width * 40.0,
                    left: appConfig.width * 5.0,
                    right: appConfig.width * 5.0,
                    bottom: appConfig.height * 5.0,
                    child: Container(
                      width: appConfig.fullWidth,
                      height: appConfig.height * 150.0,
                      color: Colors.white,
                      child: NotificationListener<ScrollNotification>(
                        onNotification:
                            (ScrollNotification scrollNotification) {
                          scrollNotificationListener(scrollNotification);
                          return true;
                        },
                        child: RefreshIndicator(
                          child: historyList(),
                          onRefresh: requestNewHistory,
                        ),
                      ),
                    ),
                  ),
                  Positioned(
                    left: appConfig.width * 5.0,
                    right: appConfig.width * 5.0,
                    bottom: appConfig.height * 5.0,
                    child: Container(
                      height: isRequstingHistory ? 50.0 : 0,
                      color: Colors.transparent,
                      child: Center(
                        child: CircularProgressIndicator(),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
반응형

'개발 > Flutter' 카테고리의 다른 글

Firebase 연동 에러 해결  (0) 2021.07.22
The difference between async and async* in dart (async와 async*의 차이점)  (0) 2021.07.15
Onpressed: null  (0) 2021.07.14
final vs const  (0) 2021.06.28
State란  (0) 2021.06.27
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함