Fetching data from Json file but map is not working

Question

I have a list that is fetching data from JSON file I want to show it in GridView through map in such a way GridView items will expand according to my JSON file but I am getting and error that is "type '_InternalLinkedHashMap' is not a subtype of type 'int'". Json file link is here http://salterz.com/ukjalsa_data/directions.json

  import 'dart:convert';
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:percent_indicator/percent_indicator.dart';
import 'dart:async';
import 'package:sweetalert/sweetalert.dart';

void main() => runApp(News1());
List data = [];

class News1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter",
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    fetchData();
    Timer(
        Duration(seconds: 3),
            () => Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => showdata(),
          ),
        ));
    super.initState();
  }

  void fetchData() async {
    final response =
    await http.get('http://salterz.com/ukjalsa_data/directions.json');

    if (response.statusCode == 200) {
      setState(() {
        data = json.decode(response.body);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    SystemChrome.setPreferredOrientations(
        [DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);

    return Scaffold(
        body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                CircularPercentIndicator(
                    radius: 130.0,
                    animation: true,
                    progressColor: Colors.green,
                    animationDuration: 3000,
                    lineWidth: 15.0,
                    percent: 1.0,
                    center: new Text(
                      "Loading",
                      style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
                    )),
                Text('Please wait News are Loading'),
              ],
            )));
  }
}

class showdata extends StatefulWidget {
  @override
  _showdataState createState() => _showdataState();
}

class _showdataState extends State<showdata> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: GridView.count(
          crossAxisCount: 2,
          children: data.map((TransID){
            return  Card(
              margin: EdgeInsets.all(20),
              child: InkWell(
                onTap: () {
                  print('Card tapped.');
                },
                child: Container(
                  margin: EdgeInsets.all(10),
                  width: 300,
                  height: 100,
                child: Text(data[TransID].Head),
                ),
              ),
            );
          }).toList(),
        ));
  }
}

Answer 1

You have problem with parsing json. I have added one Data class for it, try now.

    import 'dart:convert';
    import 'package:flutter/services.dart';
    import 'package:flutter/material.dart';
    import 'package:http/http.dart' as http;
    import 'package:percent_indicator/percent_indicator.dart';
    import 'dart:async';
    import 'package:sweetalert/sweetalert.dart';

    void main() => runApp(News1());
    List data = [];

    class News1 extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
        title: "Flutter",
        debugShowCheckedModeBanner: false,
        home: HomePage(),
        );
    }
    }

    class HomePage extends StatefulWidget {
    @override
    _HomePageState createState() => _HomePageState();
    }

    class _HomePageState extends State<HomePage> {

    List<Data> dataList = List();

    @override
    void initState() {
        fetchData();
        Timer(
            Duration(seconds: 3),
                () => Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => showdata(),
            ),
            ));
        super.initState();
    }

    void fetchData() async {
        final response =
        await http.get('http://salterz.com/ukjalsa_data/directions.json');

        if (response.statusCode == 200) {
        setState(() {

            dataList.addAll(Data.fromMapList(json.decode(response.body)));
            print(dataList.length);
        });
        }
    }

    @override
    Widget build(BuildContext context) {
        SystemChrome.setPreferredOrientations(
            [DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);

        return Scaffold(
            body: Center(
                child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    CircularPercentIndicator(
                        radius: 130.0,
                        animation: true,
                        progressColor: Colors.green,
                        animationDuration: 3000,
                        lineWidth: 15.0,
                        percent: 1.0,
                        center: new Text(
                        "Loading",
                        style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
                        )),
                    Text('Please wait News are Loading'),
                ],
                )));
    }
    }

    class showdata extends StatefulWidget {
    @override
    _showdataState createState() => _showdataState();
    }

    class _showdataState extends State<showdata> {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            body: GridView.count(
            crossAxisCount: 2,
            children: data.map((TransID){
                return  Card(
                margin: EdgeInsets.all(20),
                child: InkWell(
                    onTap: () {
                    print('Card tapped.');
                    },
                    child: Container(
                    margin: EdgeInsets.all(10),
                    width: 300,
                    height: 100,
                    child: Text(data[TransID].Head),
                    ),
                ),
                );
            }).toList(),
            ));
    }
    }

Here is your Data class

    class Data {
    int _transID;
    String _head;
    String _imgUrl;
    String _description;
    String _mapLink;

    static Data fromMap(Map<String, dynamic> map) {
        Data data = new Data();
        data._transID = map['TransID'];
        data._head = map['Head'];
        data._imgUrl = map['ImgUrl'];
        data._description = map['Description'];
        data._mapLink = map['MapLink'];

        return data;
    }


    static List<Data> fromMapList(dynamic mapList) {
        List<Data> list = new List(mapList.length);
        for (int i = 0; i < mapList.length; i++) {
        list[i] = fromMap(mapList[i]);
        }
        return list;
    }
    }