मैं नीचे दिए गए JSON डेटा का उपयोग करके स्क्रीनशॉट की तरह GridView बनाना चाहता हूं। मैं आभारी रहूंगा यदि कोई नीचे दिए गए JSON डेटा के साथ ग्रिड व्यू बनाता है और तर्क को समझाता है। मैं स्पंदन विकास के लिए नया हूं। धन्यवाद।!

{
"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

3
Krishnanand Pathak 15 अप्रैल 2020, 21:31

1 उत्तर

सबसे बढ़िया उत्तर

अपने जोंस स्ट्रिंग को डार्ट ऑब्जेक्ट में बदलने के लिए कन्वर्ट लाइब्रेरी का उपयोग करें और इसे अपनी इच्छानुसार उपयोग करें, यहाँ आपका उदाहरण है:

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']}")),
              );
            },
          );
        },
      ),
    );
  }
}
4
malibayram91 16 अप्रैल 2020, 08:16