时间戳

首页 > 解决方案 > 如何从颤动的日历中获取选定的日期

flutter - 如何从颤动的日历中获取选定的日期

问题描述

我创建了一个日历，现在我想在变量中获取选定的日期并将其传递给另一个小部件或在代码中的其他地方调用它。

这是我的日历代码

import 'package:table_calendar/table_calendar.dart';
  CalendarController _calendarController;
   Widget calendar(){
    return Container(
      margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
      width: double.infinity,
    
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(6),
        
        gradient: LinearGradient(colors: [Colors.blue[500],Colors.blue[500]]),
        boxShadow: <BoxShadow>[
          BoxShadow(
            color: Colors.white,
            blurRadius: 5,
            offset: new Offset(0.0, 5)
          )
        ]
      ),
      child: TableCalendar(
          calendarController: _calendarController,
          initialCalendarFormat: CalendarFormat.month,
          
            calendarStyle: CalendarStyle(
              canEventMarkersOverflow: true,
              markersColor: Colors.white,
              weekdayStyle: TextStyle(color: Colors.white),
            
              
              todayColor: Colors.white54,
              todayStyle: TextStyle(color: Colors.blue[900], fontSize: 15, fontWeight: FontWeight.bold),
              selectedColor: Colors.blue[900],
              outsideWeekendStyle: TextStyle(color: Colors.white60),
              outsideStyle: TextStyle(color: Colors.white60),
              weekendStyle: TextStyle(color: Colors.white),
              renderDaysOfWeek: false,
              
            )));
            
  }

我在这里称呼它

Widget build(BuildContext context) {
    return Scaffold(
      appBar: new MyAppBar(title: Text("My Attendance")),

    
    drawer:drawer(),
   
    body:Stack(children: <Widget>[
      calendar() //here

请帮助我应该怎么做才能获取变量中的日期，并且当用户选择其他日期时它应该更新变量（如 setstate() 方法将被调用）。

更新（解决方案）：

CalendarController _calendarController;
   Widget calendar(){
    return Container(
      margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
      width: double.infinity,
    
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(6),
        
        gradient: LinearGradient(colors: [Colors.blue[500],Colors.blue[500]]),
        boxShadow: <BoxShadow>[
          BoxShadow(
            color: Colors.white,
            blurRadius: 5,
            offset: new Offset(0.0, 5)
          )
        ]
      ),
      child: TableCalendar(  
              initialCalendarFormat: CalendarFormat.month,  
              calendarStyle: CalendarStyle(  
                  todayColor: Colors.blue,  
                  selectedColor: Theme.of(context).primaryColor,  
                  todayStyle: TextStyle(  
                      fontWeight: FontWeight.bold,  
                      fontSize: 22.0,  
                      color: Colors.white)  
              ),  
              headerStyle: HeaderStyle(  
                centerHeaderTitle: true,  
                formatButtonDecoration: BoxDecoration(  
                  color: Colors.brown,  
                  borderRadius: BorderRadius.circular(22.0),  
                ),  
                formatButtonTextStyle: TextStyle(color: Colors.white),  
                formatButtonShowsNext: false,  
              ),  
              startingDayOfWeek: StartingDayOfWeek.monday,
              onDaySelected: (date, event,_) {  
                print("date");
                print(date.toUtc());  
              },
              
              builders: CalendarBuilders(  
                selectedDayBuilder: (context, date, events) => Container(  
                    margin: const EdgeInsets.all(5.0),  
                    alignment: Alignment.center,  
                    decoration: BoxDecoration(  
                        color: Theme.of(context).primaryColor,  
                        borderRadius: BorderRadius.circular(8.0)),  
                    child: Text(  
                      date.day.toString(),  
                      style: TextStyle(color: Colors.white),  
                    )),  
                todayDayBuilder: (context, date, events) => Container(  
                    margin: const EdgeInsets.all(5.0),  
                    alignment: Alignment.center,  
                    decoration: BoxDecoration(  
                        color: Colors.blue,  
                        borderRadius: BorderRadius.circular(8.0)),  
                    child: Text(  
                      date.day.toString(),  
                      style: TextStyle(color: Colors.white),  
                    )),  
              ),  
              calendarController: _controller,  
            ));  
            
  }

标签： fluttercalendar

解决方案

var selected date;
var initialDate = DateTime.now();

Future<void>datePicker(BuildContext context)async{
final now = DateTime.now();
final _pickDate = await showDatePicker(
  context: context,
  initialDate: initialDate,
  firstDate: DateTime(now.year, now.month, now.day),
  lastDate: DateTime(2050),
);
if (_pickDate == null) {
  return;
}
initialDate = _pickDate;
setState(() {
  selectedDate = _pickDate;
});
 }

推荐阅读