flutter封装日历选择器（单日选择）

本文主要是介绍flutter封装日历选择器（单日选择），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

简单封装：
引入库：table_calendar

import 'package:generated/l10n.dart';
import 'package:jade/utils/JadeColors.dart';
import 'package:jade/utils/Utils.dart';
import 'package:util/easy_loading_util.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:table_calendar/table_calendar.dart';class CustomCalendarSelector extends StatefulWidget{final DateTime dateTime;const CustomCalendarSelector({this.dateTime});@overrideState<StatefulWidget> createState() {// TODO: implement createStatereturn _CustomCalendarSelectorState();}
}
class _CustomCalendarSelectorState extends State<CustomCalendarSelector>{CalendarController _calendarController;DateTime _selectDateTime;@overridevoid initState() {super.initState();_calendarController = CalendarController();_selectDateTime = widget.dateTime;}@overridevoid dispose() {_calendarController.dispose();super.dispose();}@overrideWidget build(BuildContext context) {// TODO: implement build//return Container(height: Utils().screenWidth(context)*1.4,child: Column(children: [Expanded(child: TableCalendar(calendarController: _calendarController,startDay: DateTime.now(),endDay: DateTime(DateTime.now().year+ 1,12,31),calendarStyle: const CalendarStyle(weekendStyle: TextStyle(color: Color(0xffff415b)),todayColor: Colors.black12,selectedColor: Color(0xff44aab0),),headerStyle: HeaderStyle(centerHeaderTitle: true,leftChevronVisible: true,rightChevronVisible: true,formatButtonVisible: false,),initialSelectedDay:widget.dateTime??DateTime(DateTime.now().year,DateTime.now().month,DateTime.now().day+1),onUnavailableDaySelected: (){esLoadingToast('请选择可选日期之内的时间');},onDaySelected: (DateTime dateTime, List events, List holidays){if(dateTime.day == DateTime.now().day){esLoadingToast('请选择当期日期之后的时间');return;}_selectDateTime = dateTime;},onHeaderTapped:(DateTime dateTime){}),),Container(margin: EdgeInsets.only(top: 20.h, left: 80.w),child: Row(children: <Widget>[Image.asset('images/cinema/buy/cinema_buy_icon_q.png',width: 35.w,height: 35.h,),SizedBox(width: 10.w,),Text('从当日起的5个工作日内无法上刊',style: TextStyle(fontSize: 24.sp, color: JadeColors.green_3),)],),),Container(margin: EdgeInsets.only(top: 20.h, left: 80.w, right: 80.w,bottom: 40.w),width: double.infinity,height: 85.h,child: TextButton(style: ButtonStyle(minimumSize: MaterialStateProperty.all(Size(300, 38)),backgroundColor: MaterialStateProperty.all(JadeColors.green_3.withOpacity(1.0))),onPressed: () async {if (DateTime.now().isAfter(_selectDateTime)) {esLoadingToast('请选择当期日期之后的时间');return;}Navigator.pop(context, _selectDateTime);},child: Text(S.current.baocun,style: TextStyle(fontSize: 32.sp, color: Colors.white),)))],),);}
}

引用：

_showScheduledDateBottom() {showModalBottomSheet(context: context,isScrollControlled: true,shape: RoundedRectangleBorder(borderRadius: BorderRadius.only(topLeft: Radius.circular(25.w),topRight: Radius.circular(25.w))),builder: (BuildContext context) {return CustomCalendarSelector(dateTime: time);}).then((value) {if (value == null) return;print('${time.year}-${time.month}-${time.day}');});}

这篇关于flutter封装日历选择器（单日选择）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---