Category / Section
How to load the JSON data (online) to the Flutter Calendar appointments
1 min read
In the Flutter Event Calendar, you can load the JSON data (online) to the Flutter calendar events. Using the http package, you can fetch the data from the internet.
STEP 1: For fetching the data from the web, you need to add the `http` package in the dependencies of pubspec.yaml.
dependencies: http: ^0.12.0+4
STEP 2: To fetch the data from the web, create async method named as getDataFromWeb() and get the data from the web using the http.get() method.
Future<List<Meeting>> getDataFromWeb() async {
var data = await http.get(Uri.parse("https://js.syncfusion.com/demos/ejservices/api/Schedule/LoadData"));
var jsonData = json.decode(data.body);
final List<Meeting> appointmentData = [];
final Random random = new Random();
for (var data in jsonData) {
Meeting meetingData = Meeting(
eventName: data['Subject'],
from: _convertDateFromString(
data['StartTime'],
),
to: _convertDateFromString(data['EndTime']),
background: _colorCollection[random.nextInt(9)],
allDay: data['AllDay']);
appointmentData.add(meetingData);
}
return appointmentData;
}
STEP 3: Using the `FutureBuilder` widget, you can display the online data. If the Snapshot.hasData contains data, then, you can load that web data to the Flutter calendar events.
child: FutureBuilder(
future: getDataFromWeb(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.data != null) {
return SafeArea(
child: Container(
child: SfCalendar(
view: CalendarView.week,
initialDisplayDate: DateTime(2017, 6, 01, 9, 0, 0),
dataSource: MeetingDataSource(snapshot.data),
)),
);
} else {
return Container(
child: Center(
child: Text('$_networkStatusMsg'),
),
);
}
},
),
|
