title: How to create a class of List of arrays and fetch data in flutter
body: <p>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.</p>
  
  <p>Here is how the code in the API looks(will change the real values just to show an example):</p>
  
  <pre><code>{
      "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"
              },
      ],
  }
  </code></pre>
  
  <p>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"):</p>
  
  <pre><code>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,
    });
  }
  </code></pre>
  
  <p>Here is my fetch code (these are the values i need to fetch for my current code displayed):</p>
  
  <pre><code> Future&lt;void&gt; fetchAndSetCars() async {
      const url =
          'My link';
  
        final response = await http.get(url);
        final extractedData = json.decode(response.body) as Map&lt;String, dynamic&gt;;
        List&lt;AddCar&gt; 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();
    }
  </code></pre>
  
  <p>here is where I display my fetch code:</p>
  
  <pre><code>class CarArea extends StatefulWidget {
    @override
    _CarAreaState createState() =&gt; _CarAreaState();
  }
  
  class _CarAreaState extends State&lt;CarArea&gt; {
    var _isInit = true;
  
    @override
    void didChangeDependencies() {
      if (_isInit) {
        Provider.of&lt;Cars&gt;(context).fetchAndSetCars();
      }
      _isInit = false;
      super.didChangeDependencies();
    }
  
    @override
    Widget build(BuildContext context) {
      final carsData = Provider.of&lt;Cars&gt;(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 &lt; 2
              ? ListView.builder(
                  physics: NeverScrollableScrollPhysics(),
                  itemCount: car.length = 1,
                  shrinkWrap: true,
                  itemBuilder: (ctx, i) =&gt; 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) =&gt; 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,
                  ),
                );
    }
  }
  
  </code></pre>
  
  <p>And my CarItem where the code is displayed to the UI:</p>
  
  <pre><code>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: &lt;Widget&gt;[
            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: &lt;Widget&gt;[
                    Container(
                      child: Row(
                        textDirection: TextDirection.rtl,
                        children: &lt;Widget&gt;[
                          Padding(
                            padding: const EdgeInsets.fromLTRB(5.0, 0, 0, 0),
                            child: Icon(
                              MyFlutterApp.cars,
                            ),
                          ),
                          Text(
                            AppLocalizations.of(context).itemListCar,
                          ),
                        ],
                      ),
                    ),
                    Container(
                      child: Row(
                        children: &lt;Widget&gt;[
                          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: &lt;Widget&gt;[
                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: &lt;Widget&gt;[
                                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: &lt;Widget&gt;[
                      Container(
                          width: double.infinity,
                          padding: EdgeInsets.only(
                            bottom: 5.8,
                            top: 0,
                          ),
                          child: Text(
                            name,
                          )),
                      Container(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: &lt;Widget&gt;[
                            Expanded(
                              child: Text(
                                model,
                                ),
                            ),
                            Text(
                              currencyT + price.toStringAsFixed(1),
                             ),
                          ],
                        ),
                      ),
                      Container(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: &lt;Widget&gt;[
                            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,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      );
    }
  }
  
  </code></pre>
  
  <p>here is the error i get in my stacktrace:</p>
  
  <pre><code>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.&lt;anonymous closure&gt; 
  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): &lt;asynchronous suspension&gt;
  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
  </code></pre>
  
  <p>print gave me this:</p>
  
  <pre><code>{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,
  </code></pre>
  
  <p>after printing loadedCars:</p>
  
  <pre><code>[{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
  </code></pre>