I have an API and what I am trying to do is to display the 'CourseTitle' from the JSON into the ExpansionTile title and the corresponding 'Title', 'EndDate', 'QuizStatus' in the children of ExpansionTile.
If data is not available for corresponding 'Title', 'EndDate', 'QuizStatus' etc., only 'CourseTitle' should be added to the ExpansionTile title, and children should be empty.
The first tile is built as expected but the remaining screen shows a red screen with RangeError (index): Invalid value: Valid value range is empty: 1.
I'm aware that this is because of empty data from JSON but couldn't solve the issue.
Here's JSON response:
{
"QuizzesData": [
{
"request_status": "Successful",
"CourseCode": "ABC101",
"CourseTitle": "ABC Course",
"UnReadStatus": [],
"Quizzes": [
{
"QuizID": "542",
"Title": "Test Quiz 01",
"StartDate": "Oct 20, 2022 12:00 AM",
"EndDate": "Oct 31, 2022 11:59 PM",
"IsDeclared": "False",
"Questions": "5",
"TotalMarks": "5",
"MarksObtained": "1",
"MarksObtainedTOCheckQuizResult": "1",
"QuizIsDeclared": "Un-Declared",
"StudentSubmitStatus": "true",
"IsRead": "1",
"QuizStatus": "Attempted"
}
]
},
{
"CourseCode": "DEF101",
"CourseTitle": "DEF Course",
"UnReadStatus": [],
"Quizzes": []
},
{
"CourseCode": "GHI101",
"CourseTitle": "GHI Course",
"UnReadStatus": [],
"Quizzes": []
},
{
"CourseCode": "JKL101",
"CourseTitle": "JKL Course",
"UnReadStatus": [],
"Quizzes": []
},
]
}
Here's the API data:
var listofdata ;
Future quizListingApi() async {
final response = await http.get(Uri.parse('json url'));
if(response.statusCode == 200){
listofdata = jsonDecode(response.body.toString());
}
else{
print(response.statusCode);
}
and the build method:
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Expanded(child: FutureBuilder(
future: quizListingApi(),
builder: (context, AsyncSnapshot snapshot){
if(snapshot.connectionState == ConnectionState.waiting){
return Text('Loading');
}
else{
return ListView.builder(
itemCount: listofdata['QuizzesData'].length,
itemBuilder: (context, index){
return Card(
child: Column(
children: [
ExpansionTile(
title: Text(listofdata['QuizzesData'][index]['CourseTitle']),
children: [
Text(listofdata['QuizzesData'][index]['Quizzes'][index]['Title']),
Text(listofdata['QuizzesData'][index]['Quizzes'][index]['EndDate']),
Text(listofdata['QuizzesData'][index]['Quizzes'][index]['QuizStatus']),
],
),
],
),
);
}
);
}
},
))
],
),
);
}
I also tried answers from other similar threads but couldn't find the solution for this specific type of problem.
Your Quizzes's index are not same as your listofdata, so you need and other for loop for your Quizzes's items:
ExpansionTile(
title: Text(listofdata['QuizzesData'][index]['CourseTitle']),
children: List<Widget>.generate(listofdata['QuizzesData'][index]['Quizzes'].length, (i) => Column(
children: [
Text(listofdata['QuizzesData'][index]['Quizzes'][i]
['Title']),
Text(listofdata['QuizzesData'][index]['Quizzes'][i]
['EndDate']),
Text(listofdata['QuizzesData'][index]['Quizzes'][i]
['QuizStatus']),
],
),),
),
Related
In my app, I am using Hive to store data locally. My box is called "favorites" and I managed to store the data in the box with this code:
_save() {
final recipeData = Recipe(
title: widget.recipeDocument['title'],
id: widget.recipeDocument['id'],
price: widget.recipeDocument['price'],
url: widget.recipeDocument['url'],
servings: widget.recipeDocument['servings'],
calories: widget.recipeDocument['calories'],
carbs: widget.recipeDocument['carbs'],
protein: widget.recipeDocument['protein'],
fat: widget.recipeDocument['fat'],
ingredients: widget.recipeDocument['ingredients'],
instructions: widget.recipeDocument['instructions'],);
print('Generated recipeData final $recipeData');
String json =jsonEncode(recipeData);
print('Generated json $json');
final box = Hive.box('favorites'); //<- get an already opened box, no await necessary here
// save recipe information
final Id = widget.recipeDocument['id'];
box.put(Id,json);
On my favorite page, I want to display the title and price in a ListView.
I get data from the box like this:
body: ValueListenableBuilder(
valueListenable: Hive.box('favorites').listenable(),
builder: (context, box, child) {
var box = Hive.box('favorites');
List post = List.from(box.values);
print('List is $post');
The list contains the following:
[
{
"url": "http for URL",
"title": "Bananabread",
"price": "0,77",
"calories": "234",
"carbs": "12",
"fat": "1",
"id": "1",
"protein": "34",
"servings": 1,
"ingredients": [
"2 bananas",
"30 g flour",
"2 eggs"
],
"instructions": [
"1. mix banana and egg.",
"2. add flour.",
"3. bake and enjoy"
]
}
]
Let's say I only want to retrieve the title and price from that. How do I do so?
I tried this:
return ListView(
padding: const EdgeInsets.all(16),
children: <Widget>[
Text('This shows favorites'),
...post.map(
(p) => ListTile(
title: Text(p[1]),
trailing: Text(p[2]),
),
),
],
);
But this only returns "U" and "R"...so the letters from the word URL, I guess?
Try this. You are accessing the key of the map in the list.
return ListView(
padding: const EdgeInsets.all(16),
children: <Widget>[
Text('This shows favorites'),
...post.map(
(p) => ListTile(
title: Text(p['url'].toString()),
trailing: Text(p['title'].toString()),
),
),
],
);
final variationMap = HashMap<String, List>();
In this map, I have
key -> ["color"] = value -> ["White", "Black"];
key -> ["ram"] = value -> ["128GB", "256GB"];
Based on this information I have designed the below UI.
**I want -> If I select white, white will be selected and black will remain unselected. And If I select black white will become unselected.
The same goes for Ram. Selecting one will make the other unselected. Two list view selections will work independently. **
For a single list view, we can achieve this using a selectedIndex variable.
Here is the API response. Here attribute value can be multiple. But I need to show one value in UI. So after some logic, I store the label and value into a map.
"productVariation": [
{
"price": 406089.25,
"qty": 449,
"variationAttribute": [
{
"attribute_value": "White",
"attributeDetails": {
"attributeLabel": [
{
"label": "Color"
}
]
}
},
{
"attribute_value": "128GB",
"attributeDetails": {
"attributeLabel": [
{
"label": "Ram"
}
]
}
}
]
},
{
"price": 292561.69,
"qty": 246,
"variationAttribute": [
{
"attribute_value": "White",
"attributeDetails": {
"attributeLabel": [
{
"label": "Color"
}
]
}
},
{
"attribute_value": "256GB",
"attributeDetails": {
"attributeLabel": [
{
"label": "Ram"
}
]
}
}
]
},
{
"price": 951456.88,
"qty": 828,
"variationAttribute": [
{
"attribute_value": "Black",
"attributeDetails": {
"attributeLabel": [
{
"label": "Color"
}
]
}
},
{
"attribute_value": "128GB",
"attributeDetails": {
"attributeLabel": [
{
"label": "Ram"
}
]
}
}
]
},
{
"price": 930735.09,
"qty": 321,
"variationAttribute": [
{
"attribute_value": "Black",
"attributeDetails": {
"attributeLabel": [
{
"label": "Color"
}
]
}
},
{
"attribute_value": "256GB",
"attributeDetails": {
"attributeLabel": [
{
"label": "Ram"
}
]
}
}
]
}
]
Here is the UI code. This code is for the bottom sheet dialog.
variationView() {
final widgets = <Widget>[];
var i = 1; // maintain vertical dot line between variation
for (var key in widget.controller.variationMap.keys) {
final list = widget.controller.variationMap[key];
widgets.add(
GlobalText(
str: "Select $key",
fontSize: 18,
fontWeight: FontWeight.w300,
),
);
widgets.add(
const SizedBox(
height: 20,
),
);
widgets.add(
SizedBox(
height: 60,
child: ListView.builder(
itemCount: list!.length,
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemBuilder: (ctx, index) {
return GestureDetector(
onTap: () {
setState(() {
isSelectedIndex = index;
isSelectedIndexForListView = i;
});
},
child:Container(
margin: EdgeInsets.only(right: 11),
padding: EdgeInsets.all(4),
width: 60,
height: 55,
decoration: BoxDecoration(
color: Color(0xfff8f8f8),
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: isSelectedIndex == index && isSelectedIndexForListView == i
? Colors.black
: Color(0xffe2e2e2),
width: 1,
),
),
child: Center(
child: GlobalText(
str: list[index],
color: Color(0xff535960),
fontSize: 13,
fontWeight: FontWeight.w400,
maxLines: 2,
),
),
),
);
},
),
),
);
if (i < widget.controller.variationMap.keys.length) {
widgets.add(
const SizedBox(
height: 30,
),
);
}
i++;
}
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: widgets,
);
}
I have tried multiple ways but failed to hold or manage the state of the selected item.
In this code, I have tried to hold the index of the list view and another for item selected index. but When I select a ram, So same index color also goes selected and vice versa.
I have also tried using Unique key. But failed to solve the problem.
First you can create a model class for Value which will have to fields one for the value name another for checking if it's selected or not.
class Value{
String valueName;
bool isSelected;
}
Then create another class which will have one field of String type that is the label and another field of type List of Value object.
class Model {
String label;
List<Value> valueList;
}
From your controller or viewmodel class or the class you are using to update the states you will just have to update the value of isSelected field.
I am trying to parse a complex json file into my application I am getting an error: The getter 'name' isn't defined for the type 'List'. I can't get the name of the route at my List of routes, but can get everything else.
I don't understand where this is happening and how to fix it.
My code:
void openBottomSheet() {
showModalBottomSheet(
context: context,
builder: (context) {
return FutureBuilder<DriverDataModel>(
future: mongoApi.getMongoData(),
builder: (context, snapshot) {
if (snapshot.hasData) {
final driver = snapshot.data;
return Container(
child: ListView.builder(
itemCount: driver.data.routes.length,
itemBuilder: (BuildContext context, snapshot) {
return ListTile(
title: Text('${driver.data.routes.name}'),
leading: Icon(Icons.directions),
onTap: () {
drawPolyLine.cleanPolyline();
getCurrentLocation();
routesCoordinates.isInCourse(driver.data.routes);
Navigator.pop(context);
},
);
},
),
);
}
return Container();
},
);
});
Json reponse:
{
"success": true,
"data": {
"_id": "600773ac1bde5d10e89511d1",
"name": "Joselito",
"truck": "5f640232ab8f032d18ce0137",
"phone": "*************",
"routes": [
{
"name": "Tere city",
"week": [
{
"short_name": "mon"
}
],
"coordinates": [
{
"lat": -22.446938,
"lng": -42.982084
},
{
"lat": -22.434384,
"lng": -42.978511
}
]
}
],
"createdAt": "2021-01-20T00:05:00.717Z",
"updatedAt": "2021-01-20T00:05:00.717Z",
"__v": 0
}
I used https://app.quicktype.io/ to create my model and successfully parsed. How ever, when I tried to print the name of my route inside of my routes's list a get that getter error.
#fartem almost answered right except you need to dynamically access your items by index (not just the first item). In your code on the line where you use the function itemBuilder in ListView.builder, instead of
itemBuilder: (BuildContext context, snapshot) {
I would suggest using
itemBuilder: (BuildContext context, i) {
since the second parameter is an INDEX. Thus, to be able to get the name for each of the items in the list you would have to use that index:
title: Text('${driver.data.routes[i].name}'),
and so on.
Routes is an array, you can try to calling it by driver.data.routes[0].name
I am trying to implement Dismissible to swipe and remove the item from the list in flutter, but I am getting the below error on implementation of the same
type '_InternalLinkedHashMap<String, dynamic>' is not a subtype of
type 'String'
at this line of the code key: Key(item)
How should I resolve it ?
ListView.separated(
separatorBuilder: (context, index){
return Divider();
},
controller: _scrollController,
itemCount: noteItems,
shrinkWrap: true,
itemBuilder: (context, index) {
final item = firstdata[index];
return
Dismissible(
direction: DismissDirection.endToStart,
key: Key(item),
onDismissed: (direction) {
setState(() {
firstdata.removeAt(index);
});
Scaffold.of(context)
.showSnackBar(SnackBar(content: Text("$item dismissed")));
},
background: Container(color: Colors.red)
,
child: Padding(
padding: const EdgeInsets.fromLTRB(8.0, 7.0, 8.0, 0.0),
child: Column(
children: <Widget>[
ListTile(
leading:ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.asset('images/appstore.png', width: 50, height: 50)
) ,
title:
Row(children: [
Flexible(
child: firstdata[index]['id']!= null?AutoSizeText(
firstdata[index]['id'],
maxLines: 2,
style: TextStyle(fontWeight: FontWeight.bold),) :Text(''),
),
],),
),
],
),
),
);
},
),
The JSON data structure for the list view is here below
{
"error": "false",
"notification": [
{
"rn": "1",
"id": "224",
"company_details": {
"code": "2",
}
},
{
"rn": "2",
"id": "219",
"company_details": {
"code": "3",
}
},
{
"rn": "3",
"id": "213",
"company_details": {
"code": "3",
}
},
{
"rn": "4",
"id": "209",
"company_details": {
"code": "4",
}
},
{
"rn": "5",
"id": "204",
"company_details": {
"code": "3",
}
},
{
"rn": "6",
"id": "199",
"company_details": {
"code": "3",
}
},
{
"rn": "7",
"id": "193",
"company_details": {
"code": "3",
}
}
],
}
How should I implement the same and get it resolved?
As stated in the other answer, the Key function expects a string to create a key based on that. If you can identify an item based on one of its parameters (for example id), then you could use item.id and it would be fine.
However, to make sure it will be truly unique key for any combination of parameters (in your case id, rn and company_details) you can use ObjectKey:
Replace the following line:
key: Key(item)
With the following:
key:ObjectKey(item)
This way Flutter can identify your item's parameters and create a key based on the combination of them.
Other options include ValueKey and UniqueKey.
type '_InternalLinkedHashMap<String, dynamic>' is not a subtype of type 'String'
means that it crashed because it was expecting a String and flutter did not find one.
This means that:
key: Key(item)
Key(item)-> Is not a String. I don´t know how are you creating Key/where is it.
My best guess is to try to find some method like...:
`key: Key(item).aMethodthatgivesaString()`
`key: Key(item).toString()`
Let me know if this was useful.
In my class, I have a variable named report, that looks like this:
{
"id": 1,
"type": "my type",
"name": "Report 1",
"client_name": "John",
"website": "john.com",
"creation_time": "2019-03-12T22:00:00.000Z",
"items": [{
"id": 1,
"report_id": 1,
"place": "Kitchen",
"type": "sometype",
"producer": "somepro",
"serial_number": "123123",
"next_check_date": "2019-03-19",
"test_result": "Verified",
"comments": "some comments"
}]
}
I want to show the list of items in a table with flutter.
So far, I just created a static table as follows:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(report['name'])),
body: Container(
child: Table(children: [
TableRow(children: [
Text("TITLE 1"),
Text("TITLE 2"),
Text("TITLE 3"),
]),
TableRow(children: [
Text("C1"),
Text("C2"),
Text("C3"),
])
])
)
);
}
}
Couldn't find any examples of how to fill the table rows (the titles can stay static) with my JSON items list.
Each row should be an item from the items JSON array.
Any idea?
You can map items to TableRows. Don't forget to end with toList().
For example:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(report['name'])),
body: Container(
child: Table(
children: (report['items'] as List)
.map((item) => TableRow(children: [
Text(item['id'].toString()),
Text(item['report_id'].toString()),
Text(item['place']),
// you can have more properties of course
]))
.toList())));
}
If you want the static titles that you mentioned, you could use insert on the list you create above, and then you have:
#override
Widget build(BuildContext context) {
var list = (report['items'] as List)
.map((item) => TableRow(children: [
Text(item['id'].toString()),
Text(item['report_id'].toString()),
Text(item['place']),
//...
]))
.toList();
list.insert(
0,
TableRow(children: [
Text("TITLE 1"),
Text("TITLE 2"),
Text("TITLE 3"),
//...
]));
return Scaffold(
appBar: AppBar(title: Text(report['name'])),
body: Container(child: Table(children: list)));
}
What you are looking for is an ItemBuilder. You can find a good example of flutter ItemBuilders here and here. Examples here use the ListView builder though.