我正在处理日历并将用户事件添加到相应的日期和时间。我可以添加事件名称并将它们与 DateTime 映射，但我在将时间映射到事件时遇到问题。请帮我。我能够获取 _setTime 上的时间，但如何将其与 Map<DateTime,dynamic> 事件进行映射。这样它就会在该特定日期的事件名称旁边显示事件时间。
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:table_calendar/table_calendar.dart';
import 'package:date_format/date_format.dart';
class DynamicEvent extends StatefulWidget {
@override
_DynamicEventState createState() => _DynamicEventState();
}
class _DynamicEventState extends State<DynamicEvent> {
CalendarController _controller;
Map<DateTime, List<dynamic>> _events;
List<dynamic> _selectedEvents;
TextEditingController _eventController;
SharedPreferences prefs;
@override
void initState() {
super.initState();
_controller = CalendarController();
_eventController = TextEditingController();
_events = {};
_selectedEvents = [];
prefsData();
}
String _setTime, _hour, _minute, _time;
TimeOfDay selectedTime = TimeOfDay(hour: 00, minute: 00);
TextEditingController _timeController = TextEditingController();
Future<Null> _selectTime(BuildContext context) async {
final TimeOfDay picked = await showTimePicker(
context: context,
initialTime: selectedTime,
);
if (picked != null)
setState(() {
selectedTime = picked;
_hour = selectedTime.hour.toString();
_minute = selectedTime.minute.toString();
_time = _hour + ' : ' + _minute;
_timeController.text = _time;
_timeController.text = formatDate(
DateTime(2019, 08, 1, selectedTime.hour, selectedTime.minute),
[hh, ':', nn, " ", am]).toString();
});
}
prefsData() async {
prefs = await SharedPreferences.getInstance();
setState(() {
_events = Map<DateTime, List<dynamic>>.from(
decodeMap(json.decode(prefs.getString("events") ?? "{}")));
});
}
Map<String, dynamic> encodeMap(Map<DateTime, dynamic> map) {
Map<String, dynamic> newMap = {};
map.forEach((key, value) {
newMap[key.toString()] = map[key];
});
return newMap;
}
Map<DateTime, dynamic> decodeMap(Map<String, dynamic> map) {
Map<DateTime, dynamic> newMap = {};
map.forEach((key, value) {
newMap[DateTime.parse(key)] = map[key];
});
return newMap;
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.black,
title: Text('Flutter Dynamic Event Calendar'),
),
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TableCalendar(
events: _events,
initialCalendarFormat: CalendarFormat.week,
calendarStyle: CalendarStyle(
canEventMarkersOverflow: true,
todayColor: Colors.orange,
selectedColor: Theme.of(context).primaryColor,
todayStyle: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.white)),
headerStyle: HeaderStyle(
centerHeaderTitle: true,
formatButtonDecoration: BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.circular(20.0),
),
formatButtonTextStyle: TextStyle(color: Colors.white),
formatButtonShowsNext: false,
),
startingDayOfWeek: StartingDayOfWeek.monday,
onDaySelected: (date, events,holidays) {
setState(() {
_selectedEvents = events;
});
},
builders: CalendarBuilders(
selectedDayBuilder: (context, date, events) => Container(
margin: const EdgeInsets.all(4.0),
alignment: Alignment.center,
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(10.0)),
child: Text(
date.day.toString(),
style: TextStyle(color: Colors.white),
)),
todayDayBuilder: (context, date, events) => Container(
margin: const EdgeInsets.all(4.0),
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.circular(10.0)),
child: Text(
date.day.toString(),
style: TextStyle(color: Colors.white),
)),
),
calendarController: _controller,
),
..._selectedEvents.map((event) => Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: MediaQuery.of(context).size.height/20,
width: MediaQuery.of(context).size.width/2,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.white,
border: Border.all(color: Colors.grey)
),
child: Center(
child: Text(event,
style: TextStyle(color: Colors.blue,
fontWeight: FontWeight.bold,fontSize: 16),)
),
),
)),
],
),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.black,
child: Icon(Icons.add),
onPressed: _showAddEventDialog(context),
),
);
}
_showAddEventDialog(BuildContext context) async {
await showDialog(context: context, builder: (context) {
return AlertDialog(
title: Center(child: Text("Add Event")),
content: Container(
width: 300,
height: 200,
child: ListView(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Event Name:"),
TextField(controller: _eventController),
SizedBox(height: 15),
Text("Event Time:"),
SizedBox(height: 15),
InkWell(
onTap: () {
_selectTime(context);
},
child: Container(
width: 200,
height: 50,
alignment: Alignment.center,
decoration: BoxDecoration(color: Colors.grey[200]),
child: TextFormField(
style: TextStyle(fontSize: 16),
textAlign: TextAlign.center,
onSaved: (String val) {
_setTime = val;
},
enabled: false,
keyboardType: TextInputType.text,
controller: _timeController,
decoration: InputDecoration(
disabledBorder:
UnderlineInputBorder(borderSide: BorderSide.none),
contentPadding: EdgeInsets.all(5)),
),
),
),
],
)
],
),
),
actions: [
TextButton(
child: Text("Save",
style: TextStyle(color: Colors.red,fontWeight: FontWeight.bold)
),
onPressed: () {
if (_eventController.text.isEmpty) return;
setState(() {
if (_events[_calendarController.selectedDay] != null) {
_events[_calendarController.selectedDay]
.add(_eventController.text);
}
else {
_events[_calendarController.selectedDay] = [
_eventController.text
];
}
prefs.setString("events", json.encode(encodeMap(_events)));
print(_timeController.text.toString());
_eventController.clear();
Navigator.pop(context);
});
},
)
],
);
});
}
}
我创建了一个模型来映射具有事件列表的日期（事件名称和事件时间）。请帮助我映射和获取数据。
import 'dart:convert';
UserEvents userEventsFromJson(String str) => UserEvents.fromJson(json.decode(str));
String userEventsToJson(UserEvents data) => json.encode(data.toJson());
class UserEvents {
DateTime date;
List<Event> events;
UserEvents({
this.date,
this.events,
});
factory UserEvents.fromJson(Map<String, dynamic> json) => UserEvents(
date: json["date"],
events: List<Event>.from(json["events"].map((x) => Event.fromJson(x))),
);
Map<String, dynamic> toJson() => {
"date": date,
"events": List<dynamic>.from(events.map((x) => x.toJson())),
};
}
class Event {
String eventName, eventTime;
Event({
this.eventName,
this.eventTime
});
factory Event.fromJson(Map<String, dynamic> json) => Event(
eventName: json["eventName"],
eventTime: json["eventTime"]
);
Map<String, dynamic> toJson() => {
"eventName": eventName,
"eventTime": eventTime
};
}