I am a newbie to Flutter. I am trying to build a Data Table with data fetched from a http server. I can successfully fetch the data and is able to print the contents in console. However, the emulator prompted an error:

type 'List is not a subtype of type 'List'

can somebody help to take a look at my code below and show me a direction?

P.S. this is a page navigated from home page.

IconButton(
                        icon: Image.asset('images/index-ico8_75px.png'),
                        iconSize: 60,
                        onPressed: () {
                            Navigator.push(context,
                               MaterialPageRoute(builder: (context) => transactions()),
                          );
                        },
                      ),






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

class dataRecord {
    int id = 0;
    String district = '';
    double consideration = 0;

    dataRecord(this.id, this.district, this.consideration);
}

class transactions extends StatefulWidget {
    //const ({Key? key}) : super(key: key);
    @override
    _transactionsState createState() => _transactionsState();
}

class _transactionsState extends State<transactions> {
    @override
    Future<List<dataRecord>> _func = FetchData();

    void initState() {
        super.initState();
    }

  Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
        title: Text('成交走勢'),
        centerTitle: true,
        backgroundColor: Colors.blue[400],
      ),
      body: FutureBuilder(
        builder: (ctx, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            final data = snapshot.data as List<dataRecord>;
            return buildBody(data);
          } else
            return Center(
              //child: CircularProgressIndicator(),
              child: Text('Loading...'),
            );
        },
        future: _func,
      ),
    );
  }


  buildBody(data) {
      // for (dataRecord rec in data){
      //   print(rec.id.toString());
      // }
      return DataTable(columns: _createColumns(), rows: _createRows(data));
  }

  List<DataColumn> _createColumns() {
      return [
          DataColumn(label: Text('ID')),
          DataColumn(label: Text('District')),
          DataColumn(label: Text('Consideration')),
      ];
  }

  List<DataRow> _createRows(data) {
     for (dataRecord rec in data){
       print(rec.id.toString()   ' '   rec.district);
     }
    return data.map((e) =>
        DataRow(cells: [
            DataCell(Text(e.id.toString())),
            DataCell(Text(e.district)),
            DataCell(Text(e.consideration.toString())),
        ])).toList();
  }
}
Future<List<dataRecord>> FetchData() async {
    List<dataRecord> _dataList = [];
    var response = await http.get(Uri.parse('a https url'));
    if (response.statusCode == 200) {
        Map data = convert.jsonDecode(response.body);
        List<dynamic> record = data["data"];
        record.forEach((record) {
            _dataList.add(dataRecord(
                 record['ID'], record['DIST_NAME'], double.parse(record['AMOUNT'])));
        });
    } else {
        print('Request failed with status: ${response.statusCode}.');
  }
  return _dataList;
}

CodePudding user response：

In your List<DataRow> _createRows(data) function you should specify which data type a map will return:

return data.map<DataRow>((e) =>

Because if you don't specify it, it will return a List, even if all the objects in it are of DataRow type.