FlutterProjectDessertListSolved.dart

import 'dart:async';
import 'dart:convert';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

import 'DessertDetails.dart';

/// to see the response go to
/// https://gist.github.com/Eng-MFQ/483ac384385134dc3d5d30d236419b6c
final String dessertResposePlaceHolder =
    '[ { "product_id" : 1, "name" : "Chocolate Cake", "imgUrl" : "https://github.com/Eng-MFQ/imges_uplader/blob/master/Dessert/chcolate%20cake.jpg?raw=true", "description" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", "type" : "dessert", "quantity" : 13, "Price" : "1.80 JD" }, { "product_id" : 2, "name" : "Toffee Cake", "imgUrl" : "https://github.com/Eng-MFQ/imges_uplader/blob/master/Dessert/niscafi%20cake.jpg?raw=true", "description" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", "type" : "dessert", "quantity" : 15, "Price" : "2.80 JD" }, { "product_id" : 3, "name" : "Layers Cake", "imgUrl" : "https://github.com/Eng-MFQ/imges_uplader/blob/master/Dessert/layers%20cake.jpg?raw=true", "description" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", "type" : "dessert", "quantity" : 10, "Price" : "1.40 JD" }, { "product_id" : 4, "name" : "Cheese Cake", "imgUrl" : "https://github.com/Eng-MFQ/imges_uplader/blob/master/Dessert/cheese%20cake.jpg?raw=true", "description" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", "type" : "dessert", "quantity" : 30, "Price" : "1.00 JD" }, { "product_id" : 5, "name" : "Red Cake", "imgUrl" : "https://github.com/Eng-MFQ/imges_uplader/blob/master/Dessert/red%20cake.jpg?raw=true", "description" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", "type" : "dessert", "quantity" : 32, "Price" : "1.30 JD" }, { "product_id" : 6, "name" : "Despacito", "imgUrl" : "https://github.com/Eng-MFQ/imges_uplader/blob/master/Dessert/decpacito.jpg?raw=true", "description" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", "type" : "dessert", "quantity" : 16, "Price" : "1.50 JD" } ]';

main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        DessertDetails.routeName: (context) => DessertDetails(),
      },
      home: DessertList(),
    );
  }
}

// dessert class
class Dessert {
  /// Implement the variables by yourself
  int productId;
  int quantity;
  String name;
  String imgUrl;
  String description;
  String type;
  String price;

  Dessert(
      {this.productId,
      this.quantity,
      this.name,
      this.imgUrl,
      this.description,
      this.type,
      this.price});



  factory Dessert.fromJson(Map<String, dynamic> json) {
    return Dessert(
      name: json['name'],
      price: json['Price'],
      quantity: json['quantity'],
      description: json['description'],
      imgUrl: json['imgUrl'],
    );
  }

  @override
  String toString() {
    return 'Dessert{productId: $productId, quantity: $quantity, name: $name, imgUrl: $imgUrl, description: $description, type: $type, price: $price}';
  }
}

class DessertList extends StatefulWidget {
  @override
  _DessertListState createState() => _DessertListState();
}

class _DessertListState extends State<DessertList> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),

      /// implement the Future builder by yourself
      /// implement the design by yourself
      body: FutureBuilder(
          future: fetchDesserts(),
          builder: (context, snapShot) {
            if (snapShot.hasData) {
              List<Dessert> dessertList = snapShot.data;
              return Padding(
                padding: const EdgeInsets.all(10.0),
                child: GridView.builder(
                    itemCount: dessertList.length,
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      mainAxisSpacing: 10,
                      crossAxisSpacing: 10,
                      crossAxisCount: 2,
                    ),
                    itemBuilder: (context, index) {
                      return InkWell(
                        onTap: () {
                          Navigator.pushNamed(context,
                              DessertDetails.routeName,
                              arguments:dessertList[index]);
                        },
                        child: Card(
                          elevation: 4,
                          child: Column(
                            children: <Widget>[
                              Image.network(
                                dessertList[index].imgUrl,
                              ),
                              Text(
                                dessertList[index].name,
                                style: Theme.of(context).textTheme.headline,
                              )
                            ],
                          ),
                        ),
                      );
                    }),
              );
            } else
              return Center(child: CircularProgressIndicator());
          }),
    );
  }
}

Future<List<Dessert>> fetchDesserts() async {
  // fake call to API
  final response =
      await http.get('https://jsonplaceholder.typicode.com/photos');
  // move parsing to another thread
  return compute(parseDesserts, dessertResposePlaceHolder);
}

// A function that converts a response body into a List<Dessert>.
List<Dessert> parseDesserts(String dessertResp) {
  final parsed = json.decode(dessertResp).cast<Map<String, dynamic>>();
  return parsed.map<Dessert>((json) => Dessert.fromJson(json)).toList();
}