I am an absolute beginner in Flutter and want to build a timetable app. I don't get how I can use a local JSON file (including using Future if needed) to use it as data for the ListView (seperated).
I want to get the data of the lessons from the JSON file to display them in the app. Room, Time and teacher for every lesson. Showing me how to implement it into my code would be great!
Any help and tip is much appreciated.
My code:
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:flutter/services.dart';
import 'dart:async' show Future;
final List<String> entries = <String>['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Stundenplan",
home: DefaultTabController(
length: 5,
child: Scaffold(
appBar: AppBar(
bottom: const TabBar(
tabs: [
Tab(text: "Mo"),
Tab(text: "Di"),
Tab(text: "Mi"),
Tab(text: "Do"),
Tab(text: "Fr"),
],
),
title: const Text('Stundenplan'),
backgroundColor: Colors.blue,
),
body: TabBarView(
children: [
// MONDAY
Center(
child: ListView.separated(
padding: const EdgeInsets.all(8),
itemCount: mondayLessons.length,
itemBuilder: (BuildContext context, int index) {
return Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(15)),
color: Colors.red,
),
alignment: Alignment.center,
height: 150,
child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
/*2*/
Container(
padding: const EdgeInsets.only(top: 0),
alignment: Alignment.topCenter,
child: Text(
'${index 1} - ${jsonData["Montag"]}',
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 20,
),
),
),
Container(
padding: const EdgeInsets.only(top: 0),
alignment: Alignment.topCenter,
child: Text(
times[index],
style: const TextStyle(
color: Colors.black,
fontSize: 17.5,
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
mondayTeacher[index],
style: const TextStyle(
color: Colors.black,
fontSize: 17.5,
),
),
Text(
mondayRooms[index],
style: const TextStyle(
color: Colors.black,
fontSize: 17.5,
),
),]
),
],
),
);
},
separatorBuilder: (BuildContext context, int index) => const Divider(),
),
),
// TUESDAY
Center(
child: ListView.separated(
padding: const EdgeInsets.all(8),
itemCount: tuesdayLessons.length,
itemBuilder: (BuildContext context, int index) {
return Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(15)),
color: Colors.green,
),
alignment: Alignment.center,
height: 150,
child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
/*2*/
Container(
padding: const EdgeInsets.only(top: 0),
alignment: Alignment.topCenter,
child: Text(
'${index 1} - ${tuesdayLessons[index]}',
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 20,
),
),
),
Container(
padding: const EdgeInsets.only(top: 0),
alignment: Alignment.topCenter,
child: Text(
'${times[index]} Uhr',
style: const TextStyle(
color: Colors.black,
fontSize: 17.5,
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
tuesdayTeacher[index],
style: const TextStyle(
color: Colors.black,
fontSize: 17.5,
),
),
Text(
tuesdayRooms[index],
style: const TextStyle(
color: Colors.black,
fontSize: 17.5,
),
),]
),
],
),
);
},
separatorBuilder: (BuildContext context, int index) => const Divider(),
),
),
// WEDNESDAY
Center(
child: ListView.separated(
padding: const EdgeInsets.all(8),
itemCount: wednesdayLessons.length,
itemBuilder: (BuildContext context, int index) {
return Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(15)),
color: Colors.yellow,
),
alignment: Alignment.center,
height: 150,
child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
/*2*/
Container(
padding: const EdgeInsets.only(top: 0),
alignment: Alignment.topCenter,
child: Text(
'${index 1} - ${wednesdayLessons[index]}',
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 20,
),
),
),
Container(
padding: const EdgeInsets.only(top: 0),
alignment: Alignment.topCenter,
child: Text(
times[index],
style: const TextStyle(
color: Colors.black,
fontSize: 17.5,
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
wednesdayTeacher[index],
style: const TextStyle(
color: Colors.black,
fontSize: 17.5,
),
),
Text(
wednesdayRooms[index],
style: const TextStyle(
color: Colors.black,
fontSize: 17.5,
),
),]
),
],
),
);
},
separatorBuilder: (BuildContext context, int index) => const Divider(),
),
),
// THURSDAY
Center(
child: ListView.separated(
padding: const EdgeInsets.all(8),
itemCount: thursdayLessons.length,
itemBuilder: (BuildContext context, int index) {
return Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(15)),
color: Colors.red,
),
alignment: Alignment.center,
height: 150,
child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
/*2*/
Container(
padding: const EdgeInsets.only(top: 0),
alignment: Alignment.topCenter,
child: Text(
'${index 1} - ${thursdayLessons[index]}',
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 20,
),
),
),
Container(
padding: const EdgeInsets.only(top: 0),
alignment: Alignment.topCenter,
child: Text(
'${times[index]} Uhr',
style: const TextStyle(
color: Colors.black,
fontSize: 17.5,
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
thursdayTeacher[index],
style: const TextStyle(
color: Colors.black,
fontSize: 17.5,
),
),
Text(
thursdayRooms[index],
style: const TextStyle(
color: Colors.black,
fontSize: 17.5,
),
),]
),
],
),
);
},
separatorBuilder: (BuildContext context, int index) => const Divider(),
),
),
//FRIDAY
Center(
child: ListView.separated(
padding: const EdgeInsets.all(8),
itemCount: fridayLessons.length,
itemBuilder: (BuildContext context, int index) {
return Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(15)),
color: Colors.green,
),
alignment: Alignment.center,
height: 150,
child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
/*2*/
Container(
padding: const EdgeInsets.only(top: 0),
alignment: Alignment.topCenter,
child: Text(
'${index 1} - ${fridayLessons[index]}',
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 20,
),
),
),
Container(
padding: const EdgeInsets.only(top: 0),
alignment: Alignment.topCenter,
child: Text(
'${times[index]} Uhr',
style: const TextStyle(
color: Colors.black,
fontSize: 17.5,
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
fridayTeacher[index],
style: const TextStyle(
color: Colors.black,
fontSize: 17.5,
),
),
Text(
fridayRooms[index],
style: const TextStyle(
color: Colors.black,
fontSize: 17.5,
),
),]
),
],
),
);
},
separatorBuilder: (BuildContext context, int index) => const Divider(),
),
),
],
),
),
),
);
}
}
CodePudding user response：
Keep the json file into your assets folder, then follow the below code:
String? data = await DefaultAssetBundle.of(context).loadString("assets/someData.json");
val jsonResult = jsonDecode(someData);
This code will be used to load json from the asset
CodePudding user response：
Adding to this answer by Gourango, you can copy paste your json in https://app.quicktype.io/ , it will generate the classes you need to handle json more easily.