I want to create gridView using dynamic JSON data in Flutter as shown in the screenshot . Thanks

2
votes

I want to create GridView as in the screenshot using the below JSON Data. I will be grateful if someone create the GridView with the given below JSON Data and explain the Logic behind.I am new to flutter development.Thanks.! 

{
"count": 7,
"result": [
    {
        "iconId": 1,
        "id": 1,
        "name": "Kitchen",
        "timestamp": 1586951631
    },
    {
        "iconId": 2,
        "id": 2,
        "name": "android",
        "timestamp": 1586951646
    },
    {
        "iconId": 3,
        "id": 3,
        "name": "mobile",
        "timestamp": 1586951654
    },
    {
        "iconId": 4,
        "id": 4,
        "name": "bathroom",
        "timestamp": 1586951665
    },
    {
        "iconId": 5,
        "id": 5,
        "name": "parking",
        "timestamp": 1586974393
    },
    {
        "iconId": 6,
        "id": 6,
        "name": "theatre",
        "timestamp": 1586974429
    },
    {
        "iconId": 7,
        "id": 7,
        "name": "bedroom",
        "timestamp": 1586974457
    }
  ]
}

enter image description here

1
jsonflutterdart

1 Answers

3
votes

Use convert library to convert your json string to Dart object and use it how you want, here is your example:

import 'package:flutter/material.dart';
import 'dart:convert';

//add this library to get data from the internet
import 'package:http/http.dart' as http;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _jsonString =
      '{ "count": 7, "result": [ { "iconId": 1, "id": 1, "name": "Kitchen", "timestamp": 1586951631 }, { "iconId": 2, "id": 2, "name": "android", "timestamp": 1586951646 }, { "iconId": 3, "id": 3, "name": "mobile", "timestamp": 1586951654 }, { "iconId": 4, "id": 4, "name": "bathroom", "timestamp": 1586951665 }, { "iconId": 5, "id": 5, "name": "parking", "timestamp": 1586974393 }, { "iconId": 6, "id": 6, "name": "theatre", "timestamp": 1586974429 }, { "iconId": 7, "id": 7, "name": "bedroom", "timestamp": 1586974457 } ] }';

  Future<String> _getDataFromWeb() async {
    http.Response response = await http.get("your-url.com");

    if (response.statusCode == 200) {
      // If you are sure that your web service has json string, return it directly
      return response.body;
    } else {
      // create a fake response against any stuation that the data couldn't fetch from the web
      return '{ "count": 7, "result": []}';
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Your App Title"),
      ),
      body: FutureBuilder<String>(
        future: _getDataFromWeb(),
        builder: (context, snapshot) {
          Map jsonMap = json.decode(snapshot.data);

          return GridView.builder(
            gridDelegate:
                SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
            itemCount: jsonMap['count'],
            itemBuilder: (BuildContext c, int i) {
              Map resultItem = jsonMap['result'][i];

              return Card(
                child: Center(child: Text("${resultItem['name']}")),
              );
            },
          );
        },
      ),
    );
  }
}