Flutter fetch data from rest with reuse code - rest

Question

I try to reuse this codes:"https://github.com/rajayogan/flutterui-plants" and i will fetch data with a rest api.
I don't know how to.
Someone please help or explain.
Thanks by advance.
Best regards

Answer 1

i try to explain my problem with code:
in flutterui-plants /plantlist.dart we have this code:
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
Container(
height: 350.0,
child: ListView(
padding: EdgeInsets.only(left: 25.0),
controller: _scrollController,
scrollDirection: Axis.horizontal,
children: <Widget>[
getPlantCard(
'assets/whiteplant.png', '25', 'OUTDOOR', 'Aloe Vera'),
SizedBox(width: 15.0),
getPlantCard('assets/smallplant.png', '25', 'INDOOR', 'Ficus'),
SizedBox(width: 15.0),
getPlantCard('assets/smallplant.png', '25', 'INDOOR', 'Ficus'),
SizedBox(width: 15.0),
],
),
),
Padding(
padding: EdgeInsets.only(left: 25.0, top: 10.0),
child: Text(
'Description',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.black,
fontSize: 17.0,
fontWeight: FontWeight.w500),
),
),
Padding(
padding: EdgeInsets.only(left: 25.0, top: 10.0),
child: Text(
description,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 12.0,
),
),
)
],
);
}
getPlantCard(
String imgPath, String price, String plantType, String plantName) {
return Stack(
children: <Widget>[
Container(
height: 325.0,
width: 225.0,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Color(0xFF399D63)),
height: 250.0,
width: 225.0,
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Column(
children: <Widget>[
SizedBox(height: 10.0),
Text(
'FROM',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 12.0,
fontWeight: FontWeight.w600,
color: Color(0xFF8AC7A4)),
),
Text(
'\$' + price,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 20.0,
fontWeight: FontWeight.w400,
color: Colors.white),
)
],
),
SizedBox(width: 10.0)
],
),
Image(
image: AssetImage(imgPath),
height: 165.0,
),
Row(
children: <Widget>[
SizedBox(width: 25.0),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
plantType,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 12.0,
fontWeight: FontWeight.w600,
color: Color(0xFF8AC7A4)),
),
Text(
plantName,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 20.0,
fontWeight: FontWeight.w600,
color: Colors.white),
)
],
),
],
),
SizedBox(height: 10.0),
Row(
children: <Widget>[
SizedBox(width: 25.0),
Container(
height: 30.0,
width: 30.0,
decoration: BoxDecoration(
border: Border.all(
color: Color(0xFF8AC7A4),
style: BorderStyle.solid,
width: 0.5),
borderRadius: BorderRadius.circular(5.0),
color: Color(0xFF399D63)),
child: Icon(Icons.wb_sunny,
color: Colors.white.withOpacity(0.4), size: 20.0),
),
SizedBox(width: 15.0),
Container(
height: 30.0,
width: 30.0,
decoration: BoxDecoration(
border: Border.all(
color: Color(0xFF8AC7A4),
style: BorderStyle.solid,
width: 0.5),
borderRadius: BorderRadius.circular(5.0),
color: Color(0xFF399D63)),
child: Icon(Icons.branding_watermark,
color: Colors.white.withOpacity(0.4), size: 20.0),
),
SizedBox(width: 15.0),
Container(
height: 30.0,
width: 30.0,
decoration: BoxDecoration(
border: Border.all(
color: Color(0xFF8AC7A4),
style: BorderStyle.solid,
width: 0.5),
borderRadius: BorderRadius.circular(5.0),
color: Color(0xFF399D63)),
child: Icon(Icons.hot_tub,
color: Colors.white.withOpacity(0.4), size: 20.0),
),
SizedBox(width: 10.0),
InkWell(
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => PlantDetail()
));
},
child: Container(
height: 30.0,
width: 30.0,
decoration: BoxDecoration(color: Color(0xFF399D63)),
child: Icon(Icons.help_outline,
color: Colors.white.withOpacity(0.4), size: 20.0),
),
)
],
)
],
),
),
),
Padding(
padding: EdgeInsets.only(left: 90.0, top: 300.0),
child: Container(
height: 50.0,
width: 50.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25.0), color: Colors.black),
child:
Center(child: Icon(Icons.shopping_cart, color: Colors.white)),
),
)
],
);
}
}
I tried to fectch data like this:
i add this code
List<Product> parseProducts(String responseBody) {
final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();
return parsed.map<Product>((json) =>Product.fromMap(json)).toList();
}
Future<List<Product>> fetchProducts() async {
final response = await http.get('http://192.168.1.12:8000/plants/',headers: {
"Authorization": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1OTYxODM2NjUsImlhdCI6MTU5NjA5NzI2MCwic3ViIjoyfQ.Hz8gbT0bgaj7rNhs4SYl2I8iWxvn5sZ_liqXmHofgSE"
});
if (response.statusCode == 200) {
return parseProducts(response.body);
} else {
throw Exception('Unable to fetch products from the REST API');
}
}
and replace this block
getPlantCard(
'assets/whiteplant.png', '25', 'OUTDOOR', 'Aloe Vera'),
SizedBox(width: 15.0),
getPlantCard('assets/smallplant.png', '25', 'INDOOR', 'Ficus'),
SizedBox(width: 15.0),
getPlantCard('assets/smallplant.png', '25', 'INDOOR', 'Ficus'),
SizedBox(width: 15.0),
by this
FutureBuilder<List<Product>>(
future: product,
builder: (context, snapshot) {
if (snapshot.hasData) {
return getPlantCard('assets/'+snapshot.data[0].image,snapshot.data[0].price,snapshot.data[0].outorindoor,snapshot.data[0].name);
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
// By default, show a loading spinner.
return CircularProgressIndicator();
}),
its works for one result but how to have all getplant() list .
I hope i was clear this time and thanks by advance