Related
My Json response status code is 200 and the object is also created but when I try to bind it with UI in ListView it doesn't show anything. I have also parsed created the model from the json data.
Here's my API_manager.dart file:
import 'package:http/http.dart' as http;
import 'package:aritic/models/contactsModel.dart';
// ignore: camel_case_types
class API_Manager {
Future<ContactsModel> getContacts() async {
var client = http.Client();
var contactsModel;
String contacts_url =
'https://exampleapi.com';
String basicAuth = 'Basic auth key example';
try {
var response = await client.get(contacts_url,
headers: <String, String>{'authorization': basicAuth});
print(response.statusCode);
if (response.statusCode == 200) {
var jsonString = response.body;
var jsonMap = json.decode(jsonString);
contactsModel = contactsModel.fromJson(jsonMap);
}
} catch (Exception) {
return contactsModel;
}
return contactsModel;
}
}
My UI code:
import 'package:aritic/models/contactsModel.dart';
import 'package:aritic/services/api_manager.dart';
class ContactsPage extends StatefulWidget {
#override
_ContactsPageState createState() => _ContactsPageState();
}
class _ContactsPageState extends State<ContactsPage>
with SingleTickerProviderStateMixin {
Future<ContactsModel> _contactsModel;
bool isSearching = false;
TabController _tabController;
#override
void initState() {
// TODO: implement initState
super.initState();
_tabController = TabController(length: 2, initialIndex: 0, vsync: this);
_tabController.addListener(_handleTabIndex);
}
#override
void dispose() {
_tabController.removeListener(_handleTabIndex);
_tabController.dispose();
super.dispose();
}
void _handleTabIndex() {
setState(() {});
}
#override
Widget build(BuildContext context) {
_contactsModel = API_Manager().getContacts();
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Text('Contacts'),
bottom: PreferredSize(
child: Align(
alignment: Alignment.centerLeft,
child: TabBar(
controller: _tabController,
isScrollable: true,
unselectedLabelColor: Colors.white.withOpacity(0.3),
indicatorColor: Colors.white,
tabs: [
Tab(
child: Text('Contacts'),
),
Tab(
child: Text('Companies'),
)
],
),
),
preferredSize: Size.fromHeight(40.0)),
actions: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 16.0),
child: IconButton(
icon: Icon(Icons.search),
color: Colors.white,
onPressed: () {},
),
),
],
),
body: TabBarView(controller: _tabController, children: <Widget>[
Container(
height: double.infinity,
child: FutureBuilder<ContactsModel>(
future: _contactsModel,
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
padding: const EdgeInsets.all(6),
itemCount: snapshot.data.contacts.length,
itemBuilder: (context, index) {
var contact = snapshot.data.contacts[index];
return Container(
height: 100,
color: Colors.white,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(contact.owner.username,
style: TextStyle(fontSize: 16))
],
),
);
});
} else
return Center(child: CircularProgressIndicator());
})),
Container(
height: double.infinity,
child: ListView(
padding: const EdgeInsets.all(6),
children: <Widget>[
InkWell(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (_) => ViewCompany()));
},
child: Container(
height: 50,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Example company',
style: TextStyle(fontSize: 16),
),
Text(
'Example company',
style: TextStyle(fontSize: 14),
)
],
),
),
),
SizedBox(
height: 5,
),
InkWell(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (_) => ViewCompany()));
},
child: Container(
height: 50,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'example',
style: TextStyle(fontSize: 16),
),
Text(
'example',
style: TextStyle(fontSize: 14),
)
],
),
),
),
],
)),
]),
floatingActionButton: _bottomButtons(),
));
}
Widget _bottomButtons() {
return _tabController.index == 0
? FloatingActionButton(
shape: StadiumBorder(),
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (_) {
return AddContacts();
}));
},
backgroundColor: Colors.cyan,
child: Icon(
Icons.person_add,
color: Colors.white,
))
: FloatingActionButton(
shape: StadiumBorder(),
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (_) {
return AddCompany();
}));
},
backgroundColor: Colors.cyan,
child: Icon(
Icons.add,
color: Colors.white,
),
);
}
}
Output Screen:
ListView should be displayed here
Dart DevTools network analysis:
response code is displayed
Json Viewer:
Contacts Json
Json sample(complete json too big to upload here):
{
"total": "187144",
"contacts": {
"897": {
"isPublished": true,
"id": 897,
"fields": {
"core": {
"points": {
"id": "47",
"label": "Points"
},
"firstname": {
"id": "2",
"label": "First Name",
"value": "Jason"
},
"lastname": {
"id": "3",
"label": "Last Name",
"value": "Lamuda"
},
"...": {
"..." : "..."
}
},
"ipAddresses": [
{
"ip": "70.127.91.131",
"ipDetails": {
"city": "Bradenton",
"region": "Florida",
"timezone": "America/New_York",
}
},
"...": {
"..." : "..."
}
The JSON has this:
{
"total": "187144",
"contacts": {
"897": {
"isPublished": true,
"id": 897,
"fields": {
So your ContactModel.contacts is a Map keyed by the id values "897" etc, not a List, so this line returns null:
var contact = snapshot.data.contacts[index];
(This should throw an exception when you reference the members of contact.) You can index into the Map like this:
List keys = snapshot.data.contacts.keys.toList();
List values = snapshot.data.contacts.values.toList();
return ListView.builder(
padding: const EdgeInsets.all(6),
itemCount: snapshot.data.contacts.length,
itemBuilder: (context, index) {
var contact = values[index];
BTW this line in API_Manager is strange:
contactsModel = contactsModel.fromJson(jsonMap);
It gives a Null pointer exception. It should of course be:
contactsModel = ContactsModel.fromJson(jsonMap);
Status response code is 200 but the ListView is not displayed and stuck on the CircularProgressIndicator.
When I had 2 items in the Json data it was displaying just fine but as I added another item it doesn't show up!
I've tried removing ListView.separated and using ListView.builder instead and also tried using StreamBuilder but I don't seem to be using it correctly as I'm fairly new to Flutter. If I do have to use StreamBuilder can I be guided through how to use it properly here? Thank You.
Here's my API_manager.dart file:
import 'package:http/http.dart' as http;
import 'package:aritic/models/contactsModel.dart';
// ignore: camel_case_types
class API_Manager {
Future<ContactsModel> getContacts() async {
var client = http.Client();
var contactsModel;
String contacts_url =
'https://exampleapi.com';
String basicAuth = 'Basic auth key example';
try {
var response = await client.get(contacts_url,
headers: <String, String>{'authorization': basicAuth});
print(response.statusCode);
if (response.statusCode == 200) {
var jsonString = response.body;
var jsonMap = json.decode(jsonString);
contactsModel = ContactsModel.fromJson(jsonMap);
}
} catch (Exception) {
return contactsModel;
}
return contactsModel;
}
}
My UI Code:
import 'package:aritic/models/contactsModel.dart';
import 'package:aritic/services/api_manager.dart';
class ContactsPage extends StatefulWidget {
#override
_ContactsPageState createState() => _ContactsPageState();
}
class _ContactsPageState extends State<ContactsPage>
with SingleTickerProviderStateMixin {
Future<ContactsModel> _contactsModel;
TabController _tabController;
#override
void initState() {
// TODO: implement initState
super.initState();
_tabController = TabController(length: 2, initialIndex: 0, vsync: this);
_tabController.addListener(_handleTabIndex);
_contactsModel = API_Manager().getContacts();
}
#override
void dispose() {
_tabController.removeListener(_handleTabIndex);
_tabController.dispose();
super.dispose();
}
void _handleTabIndex() {
setState(() {});
}
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Text('Contacts'),
bottom: PreferredSize(
child: Align(
alignment: Alignment.centerLeft,
child: TabBar(
controller: _tabController,
isScrollable: true,
unselectedLabelColor: Colors.white.withOpacity(0.3),
indicatorColor: Colors.white,
tabs: [
Tab(
child: Text('Contacts'),
),
Tab(
child: Text('Companies'),
)
],
),
),
preferredSize: Size.fromHeight(40.0)),
actions: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 16.0),
child: IconButton(
icon: Icon(Icons.search),
color: Colors.white,
onPressed: () {},
),
),
],
),
body: TabBarView(controller: _tabController, children: <Widget>[
Container(
height: double.infinity,
child: FutureBuilder<ContactsModel>(
future: _contactsModel,
builder: (BuildContext context,
AsyncSnapshot<ContactsModel> snapshot) {
if (snapshot.hasData) {
return ListView.separated(
shrinkWrap: true,
padding: const EdgeInsets.all(6),
itemCount: snapshot.data.contacts.length,
itemBuilder: (BuildContext context, int index) {
List keys = snapshot.data.contacts.keys.toList();
List values =
snapshot.data.contacts.values.toList();
var contact = values[index];
return InkWell(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (_) => ViewContact()));
},
child: Container(
height: 50,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
contact.owner.firstName +
" " +
contact.owner.lastName,
style: TextStyle(fontSize: 16),
),
Text(
contact.owner.username,
style: TextStyle(fontSize: 14),
),
SizedBox(
height: 5,
),
],
),
),
);
},
separatorBuilder: (BuildContext context, int index) {
return SizedBox(
height: 5,
);
},
);
} else
return Center(
child: CircularProgressIndicator(
backgroundColor: Colors.blueGrey[700],
valueColor: AlwaysStoppedAnimation<Color>(
Colors.cyan)));
})),
Container(
height: double.infinity,
child: ListView(
padding: const EdgeInsets.all(6),
children: <Widget>[
InkWell(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (_) => ViewCompany()));
},
child: Container(
height: 50,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'example company name',
style: TextStyle(fontSize: 16),
),
Text(
'example company domain',
style: TextStyle(fontSize: 14),
)
],
),
),
),
SizedBox(
height: 5,
),
InkWell(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (_) => ViewCompany()));
},
child: Container(
height: 50,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'example company name',
style: TextStyle(fontSize: 16),
),
Text(
'example company domain',
style: TextStyle(fontSize: 14),
)
],
),
),
),
],
)),
]),
floatingActionButton: _bottomButtons(),
));
}
Widget _bottomButtons() {
return _tabController.index == 0
? FloatingActionButton(
shape: StadiumBorder(),
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (_) {
return AddContacts();
}));
},
backgroundColor: Colors.cyan,
child: Icon(
Icons.person_add,
color: Colors.white,
))
: FloatingActionButton(
shape: StadiumBorder(),
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (_) {
return AddCompany();
}));
},
backgroundColor: Colors.cyan,
child: Icon(
Icons.add,
color: Colors.white,
),
);
}
}
Json sample(complete json too big to upload here):
{
"total": "187144",
"contacts": {
"897": {
"isPublished": true,
"id": 897,
"fields": {
"core": {
"points": {
"id": "47",
"label": "Points"
},
"firstname": {
"id": "2",
"label": "First Name",
"value": "Jason"
},
"lastname": {
"id": "3",
"label": "Last Name",
"value": "Lamuda"
},
"...": {
"..." : "..."
}
},
"ipAddresses": [
{
"ip": "70.127.91.131",
"ipDetails": {
"city": "Bradenton",
"region": "Florida",
"timezone": "America/New_York",
}
},
"...": {
"..." : "..."
}
Output Screen(stuck on CircularProgressIndicator): here
create a function like
Future getContacts()async{
_contactsModel = API_Manager().getContacts();
}
then inside your initState
getContacts().then((value){
setState((){});
})
I want to display only the units with univ_spec_sub_id as 53 from the JSON returned into a Listview. I have tried implementing some code but it doesn't work. Is there any other way i can get the desired output?
This is the JSON being returned after hitting an URL :
"unit": [
{
"unit_id": "268",
"univ_spec_sub_id": "53",
"no_chapters": "13",
"unit_name": "File Handling and Dictionaries",
},
{
"unit_id": "300",
"univ_spec_sub_id": "53",
"no_chapters": "14",
"unit_name": "Decision Control Statements",
},
{
"unit_id": "298",
"univ_spec_sub_id": "59",
"no_chapters": "16",
"unit_name": "Electromagnetism",
},
{
"unit_id": "299",
"univ_spec_sub_id": "59",
"no_chapters": "0",
"unit_name": "Coming Soon",
},
This is the code i implemented.In this i have passed the unit JSON array as list and the univ_spec_sub_id using constructor:
checkid(int index){
if(widget.data[index]["univ_spec_sub_id"]== widget.univ_sub){
articles(index);
}
}
Container articles(int index){
return Container(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
GestureDetector(
child: Card(
child: Container(
child: Text(widget.data[index]["unit_no"]),
padding: const EdgeInsets.all(20),
),
),
onTap: (){
print(widget.univ_sub);
},)
],
),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.indigo[700],
body: ListView(
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 110, 0),
child: Container(
padding: EdgeInsets.fromLTRB(0, 30, 200, 0),
child: IconButton(icon: Icon(Icons.arrow_back),
color: Colors.black,
onPressed: (){
Navigator.pop(context);
},
),
),
),
SizedBox(height: 10,),
Text('Programming and ',
style: TextStyle(color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold),
),
Text(' Problem Solving (IT) ',
style: TextStyle(color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold),
),
],
),
SizedBox(height: 40,),
Container(
height: MediaQuery.of(context).size.height - 185,
decoration: BoxDecoration(
color: Colors.white70,
borderRadius: BorderRadius.only(topLeft: Radius.circular(75.0)),
),
child: Padding(
padding: EdgeInsets.fromLTRB(0, 100, 0, 0),
child: Expanded(
child: ListView.builder(
itemCount: widget.data.length,
itemBuilder: (BuildContext context,int index){
return Container(
child: checkid(index),
);
}),
),
),
)
],
),
);
Just check out the example that I have created.
json that you have given : Just validated from my side
{
"unit": [{
"unit_id": "268",
"univ_spec_sub_id": "53",
"no_chapters": "13",
"unit_name": "File Handling and Dictionaries"
},
{
"unit_id": "300",
"univ_spec_sub_id": "53",
"no_chapters": "14",
"unit_name": "Decision Control Statements"
},
{
"unit_id": "298",
"univ_spec_sub_id": "59",
"no_chapters": "16",
"unit_name": "Electromagnetism"
},
{
"unit_id": "299",
"univ_spec_sub_id": "59",
"no_chapters": "0",
"unit_name": "Coming Soon"
}
]
}
This is t the model class for the json
// To parse this JSON data, do
//
// final unit = unitFromJson(jsonString);
import 'dart:convert';
Unit unitFromJson(String str) => Unit.fromJson(json.decode(str));
String unitToJson(Unit data) => json.encode(data.toJson());
class Unit {
Unit({
this.unit,
});
List<UnitElement> unit;
factory Unit.fromJson(Map<String, dynamic> json) => Unit(
unit: List<UnitElement>.from(json["unit"].map((x) => UnitElement.fromJson(x))),
);
Map<String, dynamic> toJson() => {
"unit": List<dynamic>.from(unit.map((x) => x.toJson())),
};
}
class UnitElement {
UnitElement({
this.unitId,
this.univSpecSubId,
this.noChapters,
this.unitName,
});
String unitId;
String univSpecSubId;
String noChapters;
String unitName;
factory UnitElement.fromJson(Map<String, dynamic> json) => UnitElement(
unitId: json["unit_id"],
univSpecSubId: json["univ_spec_sub_id"],
noChapters: json["no_chapters"],
unitName: json["unit_name"],
);
Map<String, dynamic> toJson() => {
"unit_id": unitId,
"univ_spec_sub_id": univSpecSubId,
"no_chapters": noChapters,
"unit_name": unitName,
};
}
This is the main ui for it :
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:json_parsing_example/models.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.amber),
home: FirstPage(),
);
}
}
class FirstPage extends StatefulWidget {
#override
_FirstPageState createState() => _FirstPageState();
}
class _FirstPageState extends State<FirstPage> {
List<UnitElement> unitList = List();
#override
void initState() {
super.initState();
loadData();
}
Future<String> loadFromAssets() async {
return await rootBundle.loadString('json/parse.json');
}
loadData() async {
String jsonString = await loadFromAssets();
final unit = unitFromJson(jsonString);
unitList = unit.unit;
}
#override
Widget build(BuildContext context) {
return Container(
child: RaisedButton(
child: Text('Second'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondPage(
data: unitList,
univ_sub: "53",// This 53 is hardcoded you can add as per //your code
),
),
);
},
),
);
}
}
class SecondPage extends StatefulWidget {
final String univ_sub;
final List<UnitElement> data;
const SecondPage({Key key, this.univ_sub, this.data}) : super(key: key);
#override
_SecondPageState createState() => _SecondPageState();
}
class _SecondPageState extends State<SecondPage> {
Widget checkid(int index) {
if (widget.data[index].univSpecSubId == widget.univ_sub) {
return articles(index);
}
}
Container articles(int index) {
return Container(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
GestureDetector(
child: Card(
child: Container(
child: Text(widget.data[index].unitId),
padding: const EdgeInsets.all(20),
),
),
onTap: () {
print(widget.univ_sub);
},
)
],
),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.indigo[700],
body: ListView(
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 110, 0),
child: Container(
padding: EdgeInsets.fromLTRB(0, 30, 200, 0),
child: IconButton(
icon: Icon(Icons.arrow_back),
color: Colors.black,
onPressed: () {
Navigator.pop(context);
},
),
),
),
SizedBox(
height: 10,
),
Text(
'Programming and ',
style: TextStyle(
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold),
),
Text(
' Problem Solving (IT) ',
style: TextStyle(
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold),
),
],
),
SizedBox(
height: 40,
),
Container(
height: MediaQuery.of(context).size.height - 185,
decoration: BoxDecoration(
color: Colors.white70,
borderRadius: BorderRadius.only(topLeft: Radius.circular(75.0)),
),
child: Padding(
padding: EdgeInsets.fromLTRB(0, 100, 0, 0),
child: ListView.builder(
shrinkWrap: true,
itemCount: widget.data.length,
itemBuilder: (BuildContext context, int index) {
return Container(
child: checkid(index),
);
}),
),
)
],
),
);
}
}
Just check it out and let me know if it works.
I have been trying to display data on my flutter app by importing json file in my firebase account but i think there is some error in my code.
class MatchList{
List<MatchListItem> matchList;
MatchList({this.matchList});
factory MatchList.fromJSON(Map<dynamic,dynamic> json){
return MatchList(
matchList: parsematches(json)
);
}
static List<MatchListItem> parsematches(matchJSON){
var mList=matchJSON['browseMatches'] as List;
List<MatchListItem> matchList=mList.map((data) => MatchListItem.fromJson(data)).toList();
return matchList;
}
}
class MatchListItem {
int id;
String title;
String match;
String date;
String desc;
MatchListItem({this.id,this.title,this.match,this.date,this.desc});
factory MatchListItem.fromJson(Map<dynamic,dynamic> parsedJson) {
// print(parsedJson);
return MatchListItem(id: parsedJson['index'],title:parsedJson['title'],match: parsedJson['match'],date:parsedJson['date'],desc:parsedJson['desc']);
}
}
This is my matchListModel.dart file
import 'package:firebase_database/firebase_database.dart';
import 'package:nostra_prediction/matchListModel.dart';
import 'dart:async' show Future;
class MakeCall{
List<MatchListItem> listItems=[];
// ListItem recipeModelList=new ListItem();
Future<List<MatchListItem>> firebaseCalls (DatabaseReference databaseReference) async{
MatchList matchList;
DataSnapshot dataSnapshot = await databaseReference.once();
Map<dynamic,dynamic> jsonResponse=dataSnapshot.value[0]['content'];
matchList = new MatchList.fromJSON(jsonResponse);
print(matchList);
listItems.addAll(matchList.matchList);
// for(var i in matchList.matchList){
// listItems.addAll(matchList.matchList);
// }
// print(matchList.matchList[1].foodtitle);
print('Thatt ${listItems[0].title}');
// return matchList.matchList;
return listItems;
}
}
This is my getMainListInformation.dart file
import 'package:flutter/material.dart';
import 'package:firebase_database/firebase_database.dart';
import 'package:nostra_prediction/constants.dart';
import 'package:nostra_prediction/getMainListInformation.dart';
class Matches extends StatefulWidget{
#override
MatchesList createState()=> MatchesList();
}
class MatchesList extends State<Matches>{
final color = const Color(0xffbfd6ba);
final colorText = const Color(0xffd1bad6);
final databaseReference = FirebaseDatabase.instance.reference();
final makecall= new MakeCall();
#override
Widget build(BuildContext context) {
var futureBuilder=new FutureBuilder(
future: makecall.firebaseCalls(databaseReference), // async work
builder: (BuildContext context, AsyncSnapshot snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none: return new Text('Press button to start');
case ConnectionState.waiting: return new Text('Loading....');
default:
if (snapshot.hasError)
return new Text('Error: ${snapshot.error}');
else
return
ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index){
// return new Text(snapshot.data[index].foodtitle);
return Card(
elevation: 0.0,
child: Padding(
padding: const EdgeInsets.all(0.0),
child: SizedBox(
height: MediaQuery.of(context).size.height*0.15,
width: MediaQuery.of(context).size.width,
child: Card(
elevation: 0,
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 10,right: 5,top: 5),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(snapshot.data[index].title, style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20,fontFamily: 'Roboto-Black'),),
SizedBox(height:10.0),
Row(
children: <Widget>[
new IconTheme(
data: new IconThemeData(
color: Colors.black26),
child: new Icon(Icons.timer,size: 20.0,),
),
Text('${snapshot.data[index].match} minutes',style: TextStyle(fontWeight: FontWeight.w700,color: Colors.black26),)
],
)
],
)
],
),
),
// rightFavFood
],
),
)
],
)
)
),
),
);
},
);
}
},
);
return Scaffold(
resizeToAvoidBottomPadding: false,
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: color,
centerTitle: true,
// title: Text('Browsing', style: TextStyle(fontFamily: 'Roboto-Black',fontSize: 25,fontWeight: FontWeight.w500,color: Colors.black),),
title : new Image.asset('images/cooking.png'),
actions: <Widget>[
IconButton(icon: Icon(Icons.menu), color: Colors.black26,onPressed: (){print('Menu pressed');},)
],
elevation: 0.0,
),
body: new Column(
children: <Widget>[
new Container(
padding: EdgeInsets.only(top: 5.0,bottom: 10),
color: color,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ButtonTheme(
minWidth: MediaQuery.of(context).size.width*0.4,
height: MediaQuery.of(context).size.height*0.06,
child:MaterialButton(
onPressed: (){
// MakeCall makecall= new MakeCall();
// var response=makecall.firebaseCalls(databaseReference);
// print(makecall.listItems[0].foodtitle);
// print(makecall.listItems[1].foodtitle);
// new ListView.builder(
// itemCount: makecall.listItems.length,
// itemBuilder: (BuildContext context, int index){
// return
// },
// );
},
color: Colors.white,
// disabledTextColor: Colors.grey,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.horizontal(left: Radius.circular(10.0), right: Radius.circular(1.0))
),
// elevation: 15.0,
splashColor: color,
highlightColor:color,
// highlightElevation: 1.0,
child: Text("Cook Book",style: TextStyle(fontFamily: 'Roboto-Thin ',color: Colors.black26,fontSize: 15),),
) ,
),
ButtonTheme(
minWidth: MediaQuery.of(context).size.width*0.4,
height: MediaQuery.of(context).size.height*0.06,
buttonColor: Colors.amberAccent,
child:MaterialButton(
onPressed: (){Scaffold.of(context).showSnackBar(SnackBar(content: Text('Hey There')));},
color: Colors.white,
// disabledTextColor: Colors.grey,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.horizontal(right: Radius.circular(10.0), left: Radius.circular(1.0))
),
// elevation: 15.0,
highlightColor:color,
// highlightElevation: 1.0,
child: Text("Favourite",style: TextStyle(fontFamily: 'Roboto-Thin ',color: Colors.black26,fontSize: 15)),
) ,
),
],
),
),
SizedBox(height: 0),
new Expanded(
//
child:Container(
child: futureBuilder,
) ,
//
),
],
),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: color,
elevation: 20.0,
currentIndex: 0,
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.home,color: Colors.white,),
title: new Text('Home',style: TextStyle(color: Colors.white,fontWeight: FontWeight.w700)),
),
BottomNavigationBarItem(
icon: new Icon(Icons.add_circle,color: Colors.white,),
title: new Text('Add a Recipe',style: TextStyle(color: Colors.white,fontWeight: FontWeight.w700))
),
BottomNavigationBarItem(
icon: new Icon(Icons.collections,color: Colors.white,),
title: new Text('My recipes',style: TextStyle(color: Colors.white,fontWeight: FontWeight.w700),),
)
],
),
);
}
}
this is my body.dart file
{
"json": [{
"content": {
"browseMatches": [{
"index": 1,
"date" : "12/04/12",
"desc" : "asdfgh",
"match": "abcdefgh",
"title": "wxyz"
}, {
"index": 12,
"date" : "12/04/12",
"desc" : "qwerty",
"match": "abcd",
"title": "xyz"
}
]
}
}]
}
And lastly this is my json data.
I have been trying to display this json data in a listview on card but unable to do so.Please help!
the exact message which gets displayed is:
Error:NoSuchMethodFound.The method '[]' was called on null.
Receiver:null
Tried calling:
How to parse the JSON to list in flutter. I have used the online tool to parse the Json, but the tool is converting it to the map. I need to get the parsed json in the list and return the list of contents in listview builder of the page. I have my json file and my workaround below.
Json
{
"batchcomplete": "",
"continue": {
"gcmcontinue": "page|41434143494120464552525547494e4541202d204152494d45444148|3704",
"continue": "gcmcontinue||"
},
"query": {
"pages": {
"225": {
"pageid": 225,
"ns": 0,
"title": "Abrus precatorius - Gunja",
"thumbnail": {
"source": "https://example.org/images/thumb/c/cb/Abrus_precatorius_%281463017430%29.jpg/600px-Abrus_precatorius_%281463017430%29.jpg",
"width": 600,
"height": 450
},
"pageimage": "Abrus_precatorius_(1463017430).jpg"
},
"625": {
"pageid": 625,
"ns": 0,
"title": "Abies webbiana - Talispatra",
"thumbnail": {
"source": "https://example.org/images/thumb/b/b1/Red_fir.jpg/397px-Red_fir.jpg",
"width": 397,
"height": 600
},
"pageimage": "Red_fir.jpg"
},
"15995": {
"pageid": 15995,
"ns": 0,
"title": "Abelmoschus esculentus - Bhenda",
"thumbnail": {
"source": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/India_-_Koyambedu_Market_-_Ladies_Finger_03_%283986242135%29.jpg/600px-India_-_Koyambedu_Market_-_Ladies_Finger_03_%283986242135%29.jpg",
"width": 600,
"height": 450
},
"pageimage": "India_-_Koyambedu_Market_-_Ladies_Finger_03_(3986242135).jpg"
}
}
},
"limits": {
"pageimages": 500
}
}
Herbslist.dart
class Herbs extends StatefulWidget {
final String title;
Herbs(this.title);
#override
_HerbsState createState() => new _HerbsState();
}
class _HerbsState extends State<Herbs> {
var cname;
Future<Herbslist> fetchPost() async {
final response = await http.get(
'https://example.org/api.php?action=query&gcmtitle=Category:$cname&pilimit=max&prop=pageimages&pithumbsize=600&generator=categorymembers&format=json&gcmcontinue='
);
if (response.statusCode == 200) {
if(this.mounted){
return Herbslist.fromJson(json.decode(response.body));
}
} else {
print(Exception);
throw (e) {
print("Exception thrown: $e");
Exception(e);
};
}
}
#override
Widget build(BuildContext context) {
cname = widget.title;
return new Scaffold(
appBar: AppBar(
title: Align(
alignment: Alignment(-0.2, 0.3),
child: Text(
cname,
),
),
),
body: Center(
child: FutureBuilder<Herbslist>(
future: fetchPost(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
shrinkWrap: true,
itemCount: snapshot.data.query.pages.length,
itemBuilder: (BuildContext context, int index) {
// var gcm = snapshot.data.herbslistContinue.gcmcontinue;
var img = snapshot.data.query.pages.values
.toList()[index]
.thumbnail
.source;
return Container(
child: Card(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Detailpage(
snapshot.data.query.pages.values
.toList()[index]
.title,
),
));
},
child: ListTile(
contentPadding: EdgeInsets.symmetric(
horizontal: 8.0, vertical: 8.0),
leading: Container(
padding: EdgeInsets.only(right: 10.0),
decoration: new BoxDecoration(
border: new Border(
right: new BorderSide(
width: 1.5, color: Colors.grey)),
),
// ignore: unrelated_type_equality_checks
child: img == img.isEmpty
? SizedBox(
height: 50.0,
width: 50.0,
child: Image.asset('image.png'),
)
: SizedBox(
height: 50.0,
width: 50.0,
child: FadeInImage.assetNetwork(
placeholder: 'image.png',
image: img,
fit: BoxFit.fill,
),
)),
title: Text(snapshot.data.query.pages.values
.toList()[index]
.title),
),
)));
},
);
} else {
return Center(
child: CircularProgressIndicator(),
);
}
},
),
));
}
}
[1]: https://app.quicktype.io/
You can do something as simple as this, assuming the variable jsonMap is the json you showed above:
jsonMap['query']['pages'].values.toList()
Edit: Edited to change to better solution suggested in the comments.
Here is an example of how you could apply it on your code:
FutureBuilder<Herbslist>(
future: fetchPost(),
builder: (context, snapshot) {
if (snapshot.hasData) {
List pages = snapshot.data['query']['pages'].values.toList();
return ListView.builder(
shrinkWrap: true,
itemCount: pages.length,
Make sure to change the rest of your code to use the new pages variable.