phpflutterflutter-layoutflutter-dependenciesflutter-test
Dynamic display using Flutter and PHP
Hi guys I'm new in flutter. Please help me to solve by problem
I want to create a display using parse json on php url result And defined the result on final blockBustorDealList.
I am looking for a solution for this code. I've provided the entire code below.
I just want a result like
final blockBustorDealList = [
{
'image':
'https://is.simplify.cool/component/admin/upload_img/demo/backend/files/thumbnail/NEC56049_thumbnail.webp?v=20220602014017',
'title': 'Trick R Treat Ultimate Sam',
'offer': 'RMB 54.90'
},
{
'image':
'https://is.simplify.cool/component/admin/upload_img/demo/backend/files/thumbnail/NEC61901_thumbnail.webp?v=20220602014017',
'title': 'Blockbustor Deals On TVs',
'offer': 'From ₹5,499'
},
{
'image':
'https://is.simplify.cool/component/admin/upload_img/demo/backend/files/thumbnail/NEC54206_thumbnail.webp?v=20220602014017',
'title': 'Asian, Kraasa & more',
'offer': 'Min. 55% Off'
},
{
'image':
'https://is.simplify.cool/component/admin/upload_img/demo/backend/files/thumbnail/NEC54226_thumbnail.webp?v=20220602014017',
'title': 'Puma, FILA & more',
'offer': 'Min. 60% Off'
}
];
using the result of http://192.168.1.4/flutter/get_products.php url
import 'dart:convert';
import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
// My Own Imports
import 'package:go_kart/pages/category/top_offers.dart';
import 'package:http/http.dart' as http;
class BlockBusterDeals extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
child: Column(
children: <Widget>[
// TopImage(),
OfferGrid(),
],
),
);
}
}
final blockBustorDealList = [
{
'image':
'https://is.simplify.cool/component/admin/upload_img/demo/backend/files/thumbnail/NEC56049_thumbnail.webp?v=20220602014017',
'title': 'Trick R Treat Ultimate Sam',
'offer': 'RMB 54.90'
},
{
'image':
'https://is.simplify.cool/component/admin/upload_img/demo/backend/files/thumbnail/NEC61901_thumbnail.webp?v=20220602014017',
'title': 'Blockbustor Deals On TVs',
'offer': 'From ₹5,499'
},
{
'image':
'https://is.simplify.cool/component/admin/upload_img/demo/backend/files/thumbnail/NEC54206_thumbnail.webp?v=20220602014017',
'title': 'Asian, Kraasa & more',
'offer': 'Min. 55% Off'
},
{
'image':
'https://is.simplify.cool/component/admin/upload_img/demo/backend/files/thumbnail/NEC54226_thumbnail.webp?v=20220602014017',
'title': 'Puma, FILA & more',
'offer': 'Min. 60% Off'
}
];
class OfferGrid extends StatelessWidget {
// var url = "http://192.168.1.4/flutter/get_products.php";
@override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
InkWell getStructuredGridCell(blockBustorDeal) {
final item = blockBustorDeal;
return InkWell(
child: Container(
margin: EdgeInsets.all(2.0),
decoration: BoxDecoration(
color: Color.fromARGB(255, 15, 13, 13),
borderRadius: BorderRadius.circular(10.0),
),
child: Column(
children: <Widget>[
Container(
margin: const EdgeInsets.only(top: 10.0, bottom: 10.0),
height: 170.0,
child: Image.network(
item['image'],
fit: BoxFit.fitWidth,
),
),
Container(
// alignment: Alignment.center,
child: Column(
children: <Widget>[
Text(
'${item['title']}',
style: TextStyle(fontSize: 12.0, color: Colors.white),
),
Text(
'${item['offer']}',
style: TextStyle(
color: const Color(0xFF67A86B), fontSize: 16.0),
),
],
),
),
],
),
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TopOffers(title: '${item['title']}')),
);
},
);
}
return Column(
children: <Widget>[
SizedBox(
width: width,
height: 479.0,
child: Stack(
children: <Widget>[
Container(
width: width,
height: 460.0,
decoration: BoxDecoration(
color: Colors.transparent,
),
),
Container(
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(5.0),
),
padding: EdgeInsets.only(top: 5.0, right: 5.0, left: 5.0),
width: width - 20.0,
margin: EdgeInsets.only(right: 10.0, left: 10.0, top: 10.0),
child: GridView.count(
primary: false,
crossAxisSpacing: 0,
mainAxisSpacing: 0,
crossAxisCount: 2,
childAspectRatio: ((width) / 500),
children: List.generate(blockBustorDealList.length, (index) {
return getStructuredGridCell(blockBustorDealList[index]);
}),
),
),
],
),
),
],
);
}
}
- version: 1.0.0+1
- sdk: ">=2.7.0 <3.0.0"
Solution
Try below code.
Your JSON string :
List blockBustorDealList = [
{
'image':
'https://is.simplify.cool/component/admin/upload_img/demo/backend/files/thumbnail/NEC56049_thumbnail.webp?v=20220602014017',
'title': 'Trick R Treat Ultimate Sam',
'offer': 'RMB 54.90'
},
{
'image':
'https://is.simplify.cool/component/admin/upload_img/demo/backend/files/thumbnail/NEC61901_thumbnail.webp?v=20220602014017',
'title': 'Blockbustor Deals On TVs',
'offer': 'From ₹5,499'
},
{
'image':
'https://is.simplify.cool/component/admin/upload_img/demo/backend/files/thumbnail/NEC54206_thumbnail.webp?v=20220602014017',
'title': 'Asian, Kraasa & more',
'offer': 'Min. 55% Off'
},
{
'image':
'https://is.simplify.cool/component/admin/upload_img/demo/backend/files/thumbnail/NEC54226_thumbnail.webp?v=20220602014017',
'title': 'Puma, FILA & more',
'offer': 'Min. 60% Off'
}
];
Your Widget:
GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: blockBustorDealList.length,
itemBuilder: (BuildContext context, int index) {
return Card(
elevation: 5,
shadowColor: Colors.grey,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
20,
),
),
margin: EdgeInsets.all(5),
child: Container(
height: 300,
width: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(
10,
),
topRight: Radius.circular(
10,
),
),
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
blockBustorDealList[index]['image'],
),
),
),
),
),
Container(
height: 2,
color: Colors.black,
),
Container(
height: 80,
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20.0),
bottomRight: Radius.circular(20.0),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
blockBustorDealList[index]['title'],
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 15,
),
),
SizedBox(
height: 5,
),
Text(
blockBustorDealList[index]['offer'],
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 12,
),
),
],
),
),
],
),
),
);
},
),
Your Result Screen:
Updated Answer
Add http: ^0.13.4 dependency/package in your pubspec.yaml file, refer http
Import below libraries in your code:
import 'package:http/http.dart' as http;
import 'dart:convert';
Your API Call function:
Future<List<dynamic>> getJobsData() async {
String url = 'https://is.simplify.cool/flutter/products.php';
var response = await http.get(Uri.parse(url), headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
});
return json.decode(response.body);
}
Your Widget:
FutureBuilder<List<dynamic>>(
future: getJobsData(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: GridView.builder(
shrinkWrap: true,//add this line
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
var title = snapshot.data[index]['title'];
var image = snapshot.data[index]['image'];
var offer = snapshot.data[index]['offer'];
return Card(
elevation: 5,
shadowColor: Colors.grey,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
20,
),
),
margin: EdgeInsets.all(5),
child: Container(
height: 300,
width: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(
10,
),
topRight: Radius.circular(
10,
),
),
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
image,
),
),
),
),
),
Container(
height: 2,
color: Colors.black,
),
Container(
height: 80,
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20.0),
bottomRight: Radius.circular(20.0),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 15,
),
),
SizedBox(
height: 5,
),
Text(
offer,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 12,
),
),
],
),
),
],
),
),
);
},
),
);
}
return Center(
child: CircularProgressIndicator(),
);
},
),
Result screen:
