flutter封装日历选择器(单日选择)

作者 : admin 本文共2947个字,预计阅读时间需要8分钟 发布时间: 2024-06-10 共3人阅读

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});

State<StatefulWidget> createState() {
// TODO: implement createState
return _CustomCalendarSelectorState();
}
}
class _CustomCalendarSelectorState extends State<CustomCalendarSelector>{
CalendarController _calendarController;
DateTime _selectDateTime;

void initState() {
super.initState();
_calendarController = CalendarController();
_selectDateTime = widget.dateTime;
}

void dispose() {
_calendarController.dispose();
super.dispose();
}

Widget 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封装日历选择器(单日选择)
E-->