How to create a class of List of arrays and fetch data in flutter - arraylist

Question

I'm trying to build a class provider as a list of arrays in order to fetch the data from API, but I'm unable to find a sufficient way thats working in order to fetch the data. I keep getting constant errors. And I cant figure out how to make a list of the Arrays with the class values.
Here is how the code in the API looks(will change the real values just to show an example):
{
"listProduct": [
{
"id": 127,
"title": "String",
"Date": "2019-10-31T10:03:35",
"Price": 25.0,
"category": "Jeep",
"brand": "مرسيدس",
"brandModel": "M300",
"kilometer": 300.0,
"modelYear": "2010",
"fuelType": "بنزين",
"gearType": "اوتوماتك",
"image": {
"path": "Upload/UploadCarMain/UploadCarMain-200-200/car.jpeg",
"name": "car.jpeg"
},
],
}
Here is my class provider data which are supposed to be in an array (this has all the values that will be put into the "listProduct"):
class AddCar {
int id;
String name;
String city;
String country;
String currencyT;
double price;
String date;
String sponsNum;
String category;
String company;
String model;
String year;
String engine;
double distanceCovered;
String transmission;
String oilT;
String outColor;
String inColor;
String description;
File image;
PlaceLocation location;
bool isFavorite;
AddCar({
this.id,
this.name,
this.city,
this.country,
this.currencyT,
this.price,
this.date,
this.sponsNum,
this.category,
this.company,
this.model,
this.year,
this.engine,
this.distanceCovered,
this.transmission,
this.oilT,
this.outColor,
this.inColor,
this.description,
this.image,
this.location,
this.isFavorite = false,
});
}
Here is my fetch code (these are the values i need to fetch for my current code displayed):
Future<void> fetchAndSetCars() async {
const url =
'My link';
final response = await http.get(url);
final extractedData = json.decode(response.body) as Map<String, dynamic>;
List<AddCar> loadedCars = [];
extractedData.forEach((carId, carData) {
loadedCars.add(AddCar(
id: int.parse(carId),
name: carData['Title'],
currencyT: carData['gearType'],
price: carData['Price'],
date: carData['Date'],
model: carData['brandModel'],
year: carData['modelYear'],
distanceCovered: carData['kilometer'],
transmission: carData['gearType'],
oilT: carData['fuelType'],
image: File(carData['image']),
));
});
_cars = loadedCars;
print(json.decode(response.body));
notifyListeners();
}
here is where I display my fetch code:
class CarArea extends StatefulWidget {
#override
_CarAreaState createState() => _CarAreaState();
}
class _CarAreaState extends State<CarArea> {
var _isInit = true;
#override
void didChangeDependencies() {
if (_isInit) {
Provider.of<Cars>(context).fetchAndSetCars();
}
_isInit = false;
super.didChangeDependencies();
}
#override
Widget build(BuildContext context) {
final carsData = Provider.of<Cars>(context);
final car = carsData.cars;
return car.isEmpty
? Padding(
padding: EdgeInsets.all(15.0),
child: Center(
child: Text(
'no cars available',
style: TextStyle(
fontFamily: ArabicFonts.Tajawal,
fontWeight: FontWeight.bold,
package: 'google_fonts_arabic',
),
)))
: car.length < 2
? ListView.builder(
physics: NeverScrollableScrollPhysics(),
itemCount: car.length = 1,
shrinkWrap: true,
itemBuilder: (ctx, i) => CarItem(
car[i].id,
car[i].image,
car[i].name,
car[i].model,
car[i].currencyT,
car[i].price,
car[i].distanceCovered,
car[i].transmission,
car[i].oilT,
car[i].year,
car[i].date,
),
)
: ListView.builder(
physics: NeverScrollableScrollPhysics(),
itemCount: car.length = 2,
shrinkWrap: true,
itemBuilder: (ctx, i) => CarItem(
car[i].id,
car[i].image,
car[i].name,
car[i].model,
car[i].currencyT,
car[i].price,
car[i].distanceCovered,
car[i].transmission,
car[i].oilT,
car[i].year,
car[i].date,
),
);
}
}
And my CarItem where the code is displayed to the UI:
class CarItem extends StatelessWidget {
final int id;
final File image;
final String name;
final String model;
final String currencyT;
final double price;
final double distanceCovered;
final String transmission;
final String oilT;
final String year;
final String date;
CarItem(
this.id,
this.image,
this.name,
this.model,
this.currencyT,
this.price,
this.distanceCovered,
this.transmission,
this.oilT,
this.year,
this.date,
);
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Theme.of(context).primaryColor, width: 2.0),
),
),
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Color.fromARGB(255, 245, 245, 245),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(17.0, 4.0, 17.0, 4.0),
child: Row(
textDirection: TextDirection.rtl,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Row(
textDirection: TextDirection.rtl,
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(5.0, 0, 0, 0),
child: Icon(
MyFlutterApp.cars,
),
),
Text(
AppLocalizations.of(context).itemListCar,
),
],
),
),
Container(
child: Row(
children: <Widget>[
Text(
date.toString(),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 5.0, 0),
child: Icon(
MyFlutterApp.history,
),
),
],
),
),
],
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width * 0.35,
height: MediaQuery.of(context).size.width * 0.35,
child: GestureDetector(
child: image == null
? Container(
decoration: BoxDecoration(
color: Colors.grey[200],
),
padding: EdgeInsets.all(6),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'No Images provided',
textAlign: TextAlign.center,
),
],
),
)
: Image.file(
image,
fit: BoxFit.fill,
),
onTap: () {
Navigator.of(context).pushNamed(
MyCarDetails.routeName,
arguments: id,
);
},
),
),
Container(
width: MediaQuery.of(context).size.width * 0.65,
margin: EdgeInsets.all(0),
padding: const EdgeInsets.fromLTRB(22.0, 5.0, 22.0, 0),
child: Column(
children: <Widget>[
Container(
width: double.infinity,
padding: EdgeInsets.only(
bottom: 5.8,
top: 0,
),
child: Text(
name,
)),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Text(
model,
),
),
Text(
currencyT + price.toStringAsFixed(1),
),
],
),
),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Tab(
icon: Icon(
MyFlutterApp.km,
),
child: Text(
distanceCovered.toStringAsFixed(0) + ' KM',
),
),
Tab(
icon: Icon(
MyFlutterApp.motion_vector,
),
child: Text(
transmission,
),
),
Tab(
icon: Icon(
MyFlutterApp.fuel_type,
),
child: Text(
oilT,
),
),
Tab(
icon: Icon(
MyFlutterApp.general_model,
),
child: Text(
year,
),
),
],
),
),
],
),
),
],
),
],
),
);
}
}
here is the error i get in my stacktrace:
E/flutter (29729): [ERROR:flutter/lib/ui/ui_dart_state.cc(148)] Unhandled Exception: FormatException: Invalid radix-10 number (at character 1)
E/flutter (29729): listProduct
E/flutter (29729): ^
E/flutter (29729):
E/flutter (29729): #0 int._throwFormatException (dart:core-patch/integers_patch.dart:131:5)
E/flutter (29729): #1 int._parseRadix (dart:core-patch/integers_patch.dart:142:16)
E/flutter (29729): #2 int._parse (dart:core-patch/integers_patch.dart:100:12)
E/flutter (29729): #3 int.parse (dart:core-patch/integers_patch.dart:63:12)
E/flutter (29729): #4 Cars.fetchAndSetCars.<anonymous closure>
package:flutter_app/providers/car_provider.dart:107
E/flutter (29729): #5 _LinkedHashMapMixin.forEach (dart:collection-patch/compact_hash.dart:377:8)
E/flutter (29729): #6 Cars.fetchAndSetCars
package:flutter_app/providers/car_provider.dart:105
E/flutter (29729): <asynchronous suspension>
E/flutter (29729): #7 _CarAreaState.didChangeDependencies
E/flutter (29729): #8 StatefulElement._firstBuild
package:flutter/…/widgets/framework.dart:4086
E/flutter (29729): #9 ComponentElement.mount
package:flutter/…/widgets/framework.dart:3919
E/flutter (29729): #10 Element.inflateWidget
package:flutter/…/widgets/framework.dart:3101
E/flutter (29729): #11 Element.updateChild
package:flutter/…/widgets/framework.dart:2904
E/flutter (29729): #12 ComponentElement.performRebuild
package:flutter/…/widgets/framework.dart:3961
E/flutter (29729): #13 Element.rebuild
package:flutter/…/widgets/framework.dart:3738
E/flutter (29729): #14 ComponentElement._firstBuild
package:flutter/…/widgets/framework.dart:3924
E/flutter (29729): #15 ComponentElement.mount
package:flutter/…/widgets/framework.dart:3919
E/flutter (29729): #16 Element.inflateWidget
package:flutter/…/widgets/framework.dart:3101
E/flutter (29729): #17 Element.updateChild
E/flutter (29729): #18 ComponentElement.performRebuild
package:flutter/…/widgets/framework.dart:3961
E/flutter (29729): #19 Element.rebuild
package:flutter/…/widgets/framework.dart:3738
E/flutter (29729): #20 ComponentElement._firstBuild
package:flutter/…/widgets/framework.dart:3924
E/flutter (29729): #21 StatefulElement._firstBuild
package:flutter/…/widgets/framework.dart:4088
E/flutter (29729): #22 ComponentElement.mount
package:flutter/…/widgets/framework.dart:3919
E/flutter (29729): #23 Element.inflateWidget
package:flutter/…/widgets/framework.dart:3101
E/flutter (29729): #24 MultiChildRenderObjectElement.mount
package:flutter/…/widgets/framework.dart:5233
E/flutter (29729): #25 Element.inflateWidget
package:flutter/…/widgets/framework.dart:3101
E/flutter (29729): #26 Element.updateChild
package:flutter/…/widgets/framework.dart:2904
E/flutter (29729): #27 SingleChildRenderObjectElement.mount
E/flutter (29729): #28 Element.inflateWidget
package:flutter/…/widgets/framework.dart:3101
E/flutter (29729): #29 Element.updateChild
package:flutter/…/widgets/framework.dart:2904
E/flutter (29729): #30 SingleChildRenderObjectElement.mount
package:flutter/…/widgets/framework.dart:5127
E/flutter (29729): #31 Element.inflateWidget
package:flutter/…/widgets/framework.dart:3101
E/flutter (29729): #32 Element.updateChild
package:flutter/…/widgets/framework.dart:2904
E/flutter (29729): #33 ComponentElement.performRebuild
package:flutter/…/widgets/framework.dart:3961
E/flutter (29729): #34 Element.rebuild
package:flutter/…/widgets/framework.dart:3738
E/flutter (29729): #35 ComponentElement._firstBuild
package:flutter/…/widgets/framework.dart:3924
E/flutter (29729): #36 ComponentElement.mount
package:flutter/…/widgets/framework.dart:3919
E/flutter (29729): #37 Element.inflateWidget
E/flutter (29729): #38 Element.updateChild
package:flutter/…/widgets/framework.dart:2904
E/flutter (29729): #39 ComponentElement.performRebuild
package:flutter/…/widgets/framework.dart:3961
E/flutter (29729): #40 Element.rebuild
package:flutter/…/widgets/framework.dart:3738
E/flutter (29729): #41 ComponentElement._firstBuild
package:flutter/…/widgets/framework.dart:3924
E/flutter (29729): #42 ComponentElement.mount
package:flutter/…/widgets/framework.dart:3919
E/flutter (29729): #43 ParentDataElement.mount
package:flutter/…/widgets/framework.dart:4314
E/flutter (29729): #44 Element.inflateWidget
package:flutter/…/widgets/framework.dart:3101
E/flutter (29729): #45 Element.updateChild
package:flutter/…/widgets/framework.dart:2904
E/flutter (29729): #46 Componen
print gave me this:
{listProduct: [{id: 127, Title: car -en, Date: 2019-10-31T10:03:35, Price: 25.0, category: car child 2, categoryId: 8, status: 1, brandId: 1, brand: mercedes, brandModelId: 6, brandModel: M300, kilometer: 300.0, modelYearId: 2, modelYear: 2010, fuelType: benz, carFeatureFuelId: 3, gearType: automatic, carFeatureGearId: 2, image: {path: Upload/UploadCarMain/UploadCarMain-200-200/carCar127.jpeg, name: carCar127.jpeg}, vendorId: 2}, {id: 44, Title: null, Date: 2019-10-26T09:16:23.0265211, Price: 3454.0, category: car child 1, categoryId: 7, status: 1, brandId: 2, brand: BM, brandModelId: 7, brandModel: BM X5, kilometer: 345.0, modelYearId: 2, modelYear: 2010, fuelType: dezil, carFeatureFuelId: 4, gearType: normal, carFeatureGearId: 1, image: {path: Upload/UploadCarMain/UploadCarMain-200-200/1Car44.jpg, name: 1Car44.jpg}, vendorId: 1}, {id: 43, Title: null, Date: 2019-10-25T09:40:46.4631028, Price: 25.0, category: car child 1, categoryId: 7, status: 1, brandId: 1, brand: mercedes, brandModelId: 6,
after printing loadedCars:
[{id: 127, Title: car -en, Date: 2019-10-31T10:03:35, Price: 25.0, category: car child 2, categoryId: 8, status: 1, brandId: 1, brand: mercedes, brandModelId: 6, brandModel: M300, kilometer: 300.0, modelYearId: 2, modelYear: 2010, fuelType: benz, carFeatureFuelId: 3, gearType: automatic, carFeatureGearId: 2, image: {path: Upload/UploadCarMain/UploadCarMain-200-200/carCar127.jpeg, name: carCar127.jpeg}, vendorId: 2}, {id: 44, Title: null, Date: 2019-10-26T09:16:23.0265211, Price: 3454.0, category: car child 1, categoryId: 7, status: 1, brandId: 2, brand: BM, brandModelId: 7, brandModel: BM X5, kilometer: 345.0, modelYearId: 2, modelYear: 2010, fuelType: dezil, carFeatureFuelId: 4, gearType: normal, carFeatureGearId: 1, image: {path: Upload/UploadCarMain/UploadCarMain-200-200/1Car44.jpg, name: 1Car44.jpg}, vendorId: 1}, {id: 43, Title: null, Date: 2019-10-25T09:40:46.4631028, Price: 25.0, category: car child 1, categoryId: 7, status: 1, brandId: 1, brand: mercedes, brandModelId: 6, brandModel

Answer 1

First of all you have to access the listProduct by this.
final response = await http.get(url);
final extractedData = json.decode(response.body);
List loadedCars = extractedData['listProduct'];
for(var i in loadedCars) {
_cars.add(AddCar(
id: i["id"],
name: i['Title'],
currencyT: i['gearType'],
price: i['Price'],
date: i['Date'],
model: i['brandModel'],
year: i['modelYear'],
distanceCovered: i['kilometer'],
transmission: i['gearType'],
oilT: i['fuelType'],
image: File(i['image']),
));
}
This way you will create a data arraylist and in view you have to access the
that arraylist _cars.
Hope it will help you.