【问题讨论】：
标签： json jsonconvert
更新
List<Map> list = [];
@override
void initState() {
super.initState();
getList();
}
void getList() async {
//get data from internet/api
//for ex. I m using offline data
var jsonData = [
{
"id": "1",
"date": "18-Sep-2019",
"paystub_Details": {
"name": "Henry Nixon",
"position": "Senior Programmer",
"address": "30 Wertheim Crt",
"suite": "Suite C16",
"richmond": "Richmond Hill, ON L4B 1B9",
"e_id": 21,
"peroid": "10-Sep-2019 to 18-Sep-2019",
"payment_date": "18-Sep-2019",
"net_pay": 24600,
"e_total": 38000,
"d_total": 13400
},
"earn": {
"detail": [
{
"description": "EI",
"Units": 80,
"Rate": 800,
"Amount": 24000
},
{
"description": "Hourly Wages",
"Units": 80,
"Rate": 800,
"Amount": 14000
}
]
},
"deduction": {
"detail": [
{
"description": "CPP/QPP",
"Units": 2400
},
{
"description": "EI",
"Units": 1400
},
{
"description": "Fed Inc Tax",
"Units": 2400
},
{
"description": "Prov Inc Taxi",
"Units": 2400
},
{
"description": "Cpp/Qpp",
"Units": 2400
},
{
"description": "Cpp/Qpp",
"Units": 2400
}
]
}
},
{
"id": "2",
"date": "18-Oct-2019",
"paystub_Details": {
"name": "Naveen Avidi",
"position": "The Programmer",
"address": "30 Wertheim Crt",
"suite": "Suite C16",
"richmond": "Richmond Hill, ON L4B 1B9",
"e_id": 21,
"peroid": "10-Oct-2019 to 18-Oct-2019",
"payment_date": "18-Oct-2019",
"net_pay": 24600,
"e_total": 38000,
"d_total": 13400
},
"earn": {
"detail": [
{
"description": "EI",
"Units": 80,
"Rate": 800,
"Amount": 25000
},
{
"description": "Hourly Wages",
"Units": 80,
"Rate": 800,
"Amount": 17000
}
]
},
"deduction": {
"detail": [
{
"description": "CPP/QPP",
"Units": 2400
},
{
"description": "EI",
"Units": 1400
},
{
"description": "Fed Inc Tax",
"Units": 2400
},
{
"description": "Prov Inc Taxi",
"Units": 2400
},
{
"description": "Cpp/Qpp",
"Units": 2400
},
{
"description": "Cpp/Qpp",
"Units": 2400
}
]
}
}
];
setState(() {
for(Map js in jsonData){
list.add(js);
}
});
}
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(20),
color: Colors.white,
child: list.length < 1
? ListTile(
leading: CircularProgressIndicator(), title: Text('Loading...'))
: ListView.builder(
itemCount: list.length,
itemBuilder: (rCon, rInd) {
return Card(
color: Colors.blueAccent,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment:CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(5.0),
child: Text('${list[rInd]['paystub_Details']['name']}',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 17)),
),
Padding(
padding: const EdgeInsets.all(3.0),
child: Text(
'${list[rInd]['paystub_Details']['position']}',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 15)),
),
SizedBox(height: 10),
Container(
padding: const EdgeInsets.all(7.0),
height: 50,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: list[rInd]['earn']['detail'].length,
itemBuilder: (con, ind) {
return Container(
padding: const EdgeInsets.all(5.0),
margin: const EdgeInsets.all(5.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(7),
color: Colors.cyanAccent),
child: Text(
'${list[rInd]['earn']['detail'][ind]['Amount']}',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 15)));
}),
)
]));
}));
}
【讨论】：