Flutter Navigation to new page throwing error - json

Question

I have created Gridview builder through JSON data but when i navigate to new Page, I am getting Error: Could not find the correct Provider above this SingleItemScreen Widget
To fix, please:
Ensure the Provider is an ancestor to this SingleItemScreen Widget
Provide types to Provider
Provide types to Consumer
Provide types to Provider.of()
Ensure the correct context is being used.
I am not sure where I am going wrong with this.
List<Product> productFromJson(String str) => List<Product>.from(json.decode(str).map((x) => Product.fromJson(x)));
String productToJson(List<Product> data) => json.encode(List<dynamic>.from(data.map((x) => x.toJson())));
class Product {
String productId;
String sku;
String itemName;
String listPrice;
String publishedPrice;
String onsale;
String stockQuantity;
StockStatus stockStatus;
String ratingCount;
String averageRating;
String totalSales;
String imagePath;
String category;
Product({
this.productId,
this.sku,
this.itemName,
this.listPrice,
this.publishedPrice,
this.onsale,
this.stockQuantity,
this.stockStatus,
this.ratingCount,
this.averageRating,
this.totalSales,
this.imagePath,
this.category,
});
factory Product.fromJson(Map<String, dynamic> json) => Product(
productId: json["product_id"],
sku: json["sku"],
itemName: json["item_name"],
listPrice: json["list_price"],
publishedPrice: json["published_price"],
onsale: json["onsale"],
stockQuantity: json["stock_quantity"],
stockStatus: stockStatusValues.map[json["stock_status"]],
ratingCount: json["rating_count"],
averageRating: json["average_rating"],
totalSales: json["total_sales"],
imagePath: json["image_path"],
category: json["category"],
);
Map<String, dynamic> toJson() => {
"product_id": productId,
"sku": sku,
"item_name": itemName,
"list_price": listPrice,
"published_price": publishedPrice,
"onsale": onsale,
"stock_quantity": stockQuantity,
"stock_status": stockStatusValues.reverse[stockStatus],
"rating_count": ratingCount,
"average_rating": averageRating,
"total_sales": totalSales,
"image_path": imagePath,
"category": category,
};
}
enum StockStatus { INSTOCK }
final stockStatusValues = EnumValues({
"instock": StockStatus.INSTOCK
});
class EnumValues<T> {
Map<String, T> map;
Map<T, String> reverseMap;
EnumValues(this.map);
Map<T, String> get reverse {
if (reverseMap == null) {
reverseMap = map.map((k, v) => new MapEntry(v, k));
}
return reverseMap;
}
}
Future<List<Product>> fetchPhotos(http.Client client) async {
final response =
await client.get('http://flutter.bizsupplier.in/product.php');
return compute(parsePhotos, response.body);
}
Future<List<Product>> parsePhotos(String responseBody) async {
final parsed = jsonDecode(responseBody).cast<Map<String, dynamic>>();
return parsed.map<Product>((json) => Product.fromJson(json)).toList();
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return FutureBuilder<List<Product>>(
future: fetchPhotos(http.Client()),
builder: (context, snapshot) {
if (snapshot.hasError) print(snapshot.error);
if (snapshot.hasData) {
return PhotosList(product: snapshot.data);
} else {
return Center(child: CircularProgressIndicator());
}
},
);
}
}
class PhotosList extends StatelessWidget {
final List<Product> product;
PhotosList({Key key, this.product}) : super(key: key);
#override
Widget build(BuildContext context) {
return GridView.builder(
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: product.length,
itemBuilder: (context, index) {
return Card(
child: Column(
children: <Widget>[
Container(
height: 150,
child: GestureDetector(
onTap: (){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SingleItemScreen(),
settings: RouteSettings(
arguments: product[index]
)
)
);
},
child: Image.network(product[index].imagePath)),
),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
onPressed: () {},
child: Text('Buy Now'),
color: Colors.redAccent,
),
],
),
)
],
),
);
},
);
}
}
class SingleItemScreen extends StatelessWidget {
final List<Product> product;
SingleItemScreen({Key key, this.product}) : super(key: key);
#override
Widget build(BuildContext context) {
final Product product = Provider.of<Product>(context, listen: false);
return Scaffold(
appBar: AppBar(
title: Text('Test PhP Navigation'),
actions: <Widget>[
new IconButton(
icon: Icon(
Icons.search,
color: Colors.white,
),
onPressed: () {}),
new IconButton(
icon: Icon(
Icons.shopping_cart,
color: Colors.white,
),
onPressed: () {}),
],
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
height: 300,
child: Image.network(product.imagePath),
),
Container(
child: Text(product.productId),
),
],
),
),
bottomNavigationBar: Container(
width: MediaQuery.of(context).size.width,
height: 50.0,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Flexible(
fit: FlexFit.tight,
flex: 1,
child: RaisedButton(
onPressed: () {},
color: Colors.grey,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.list,
color: Colors.white,
),
SizedBox(
width: 4.0,
),
Text(
"SAVE",
style: TextStyle(color: Colors.white),
),
],
),
),
),
),
Flexible(
flex: 2,
child: RaisedButton(
onPressed: (){},
color: Colors.greenAccent,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.card_travel,
color: Colors.white,
),
SizedBox(
width: 4.0,
),
Text(
"ADD TO BAG",
style: TextStyle(color: Colors.white),
),
],
),
),
),
),
],
),
));
}
}

Answer 1

You can copy paste run full code below
Step 1: remark settings and use SingleItemScreen(product: product[index])
MaterialPageRoute(
builder: (context) =>
SingleItemScreen(product: product[index]),
/*settings: RouteSettings(
arguments: product[index]
)*/
));
Step 2: Modify SingleItemScreen to accept product
class SingleItemScreen extends StatelessWidget {
final Product product;
SingleItemScreen({Key key, this.product}) : super(key: key);
Step 3: Remark Provider
//final Product product = Provider.of<Product>(context, listen: false);
working demo
full code
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;
List<Product> productFromJson(String str) =>
List<Product>.from(json.decode(str).map((x) => Product.fromJson(x)));
String productToJson(List<Product> data) =>
json.encode(List<dynamic>.from(data.map((x) => x.toJson())));
class Product {
String productId;
String sku;
String itemName;
String listPrice;
String publishedPrice;
String onsale;
String stockQuantity;
StockStatus stockStatus;
String ratingCount;
String averageRating;
String totalSales;
String imagePath;
String category;
Product({
this.productId,
this.sku,
this.itemName,
this.listPrice,
this.publishedPrice,
this.onsale,
this.stockQuantity,
this.stockStatus,
this.ratingCount,
this.averageRating,
this.totalSales,
this.imagePath,
this.category,
});
factory Product.fromJson(Map<String, dynamic> json) => Product(
productId: json["product_id"],
sku: json["sku"],
itemName: json["item_name"],
listPrice: json["list_price"],
publishedPrice: json["published_price"],
onsale: json["onsale"],
stockQuantity: json["stock_quantity"],
stockStatus: stockStatusValues.map[json["stock_status"]],
ratingCount: json["rating_count"],
averageRating: json["average_rating"],
totalSales: json["total_sales"],
imagePath: json["image_path"],
category: json["category"],
);
Map<String, dynamic> toJson() => {
"product_id": productId,
"sku": sku,
"item_name": itemName,
"list_price": listPrice,
"published_price": publishedPrice,
"onsale": onsale,
"stock_quantity": stockQuantity,
"stock_status": stockStatusValues.reverse[stockStatus],
"rating_count": ratingCount,
"average_rating": averageRating,
"total_sales": totalSales,
"image_path": imagePath,
"category": category,
};
}
enum StockStatus { INSTOCK }
final stockStatusValues = EnumValues({"instock": StockStatus.INSTOCK});
class EnumValues<T> {
Map<String, T> map;
Map<T, String> reverseMap;
EnumValues(this.map);
Map<T, String> get reverse {
if (reverseMap == null) {
reverseMap = map.map((k, v) => new MapEntry(v, k));
}
return reverseMap;
}
}
Future<List<Product>> fetchPhotos(http.Client client) async {
final response =
await client.get('http://flutter.bizsupplier.in/product.php');
return compute(parsePhotos, response.body);
}
Future<List<Product>> parsePhotos(String responseBody) async {
final parsed = jsonDecode(responseBody).cast<Map<String, dynamic>>();
return parsed.map<Product>((json) => Product.fromJson(json)).toList();
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return FutureBuilder<List<Product>>(
future: fetchPhotos(http.Client()),
builder: (context, snapshot) {
if (snapshot.hasError) print(snapshot.error);
if (snapshot.hasData) {
return PhotosList(product: snapshot.data);
} else {
return Center(child: CircularProgressIndicator());
}
},
);
}
}
class PhotosList extends StatelessWidget {
final List<Product> product;
PhotosList({Key key, this.product}) : super(key: key);
#override
Widget build(BuildContext context) {
return GridView.builder(
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: product.length,
itemBuilder: (context, index) {
return Card(
child: Column(
children: <Widget>[
Container(
height: 150,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
SingleItemScreen(product: product[index]),
/*settings: RouteSettings(
arguments: product[index]
)*/
));
},
child: Image.network(product[index].imagePath)),
),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
onPressed: () {},
child: Text('Buy Now'),
color: Colors.redAccent,
),
],
),
)
],
),
);
},
);
}
}
class SingleItemScreen extends StatelessWidget {
final Product product;
SingleItemScreen({Key key, this.product}) : super(key: key);
#override
Widget build(BuildContext context) {
//final Product product = Provider.of<Product>(context, listen: false);
return Scaffold(
appBar: AppBar(
title: Text('Test PhP Navigation'),
actions: <Widget>[
new IconButton(
icon: Icon(
Icons.search,
color: Colors.white,
),
onPressed: () {}),
new IconButton(
icon: Icon(
Icons.shopping_cart,
color: Colors.white,
),
onPressed: () {}),
],
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
height: 300,
child: Image.network(product.imagePath),
),
Container(
child: Text(product.productId),
),
],
),
),
bottomNavigationBar: Container(
width: MediaQuery.of(context).size.width,
height: 50.0,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Flexible(
fit: FlexFit.tight,
flex: 1,
child: RaisedButton(
onPressed: () {},
color: Colors.grey,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.list,
color: Colors.white,
),
SizedBox(
width: 4.0,
),
Text(
"SAVE",
style: TextStyle(color: Colors.white),
),
],
),
),
),
),
Flexible(
flex: 2,
child: RaisedButton(
onPressed: () {},
color: Colors.greenAccent,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.card_travel,
color: Colors.white,
),
SizedBox(
width: 4.0,
),
Text(
"ADD TO BAG",
style: TextStyle(color: Colors.white),
),
],
),
),
),
),
],
),
));
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}