Flutter 在窗口小部件上显示表中的数据

我有下面的代码，从url获取数据，并将其显示在小部件中，这是一个csv数据，如何将其显示为表

导入“包装：颤振/材料.省道”；
导入“dart:convert”；
导入“dart:io”；
导入“dart:async”；
导入“包：csv/csv.dart”；
void main（）{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
//此小部件是应用程序的根。
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
主题：主题数据(
主样本：颜色。蓝色，
视觉密度：视觉密度。自适应平台密度，
),
主页：MyHomePage（标题：“颤振演示主页”），
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage（{Key，this.title}）：超级（Key:Key）；
最后的字符串标题；
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
Future fetchUserData（）异步{
最终请求=等待HttpClient（）.getUrl（Uri.parse(
'https://docs.google.com/spreadsheets/d/e/2PACX-1vQvf9tp4-fETDJbC-HRmRKvVFAXEAGO4lrYPpVeiYkB6nqqXdSs3CjX0eBMvjIoEeX9_qU6K2RWmzVk/pub?gid=0&single=true&output=csv'));
最终响应=等待请求。关闭（）；
列出行和值列表；
等待（response.transform（const Utf8Decoder（））中的最终csvString）{
行值列表=
const CsvToListConverter（）.convert（csvString）；
}
//打印（rowsAsListOfValues）；
返回rowsAsListOfValues；
}
类_MyHomePageState扩展状态{
var RowsaListofValues；
@凌驾
void initState（）{
super.initState（）；
rowsAsListOfValues=“正在加载数据…”；
}
@凌驾
void didChangeDependencies（）异步{
super.didChangeDependencies（）；
rowsAsListOfValues=Wait fetchUserData（）；
super.setState（（）{}）；//更新小部件数据
打印（rowsAsListOfValues）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（widget.title），
),
正文：中(
子：列(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
正文(
“$rowsAsListOfValues”，
),
],
),
),
);
}
}

我知道有小部件，但不知道如何将其与动态数据连接起来

对于静态数据，代码如下所示：

导入“包装：颤振/材料.省道”；
导入“dart:convert”；
导入“dart:io”；
导入“dart:async”；
导入“包：csv/csv.dart”；
void main（）{
runApp（App（））；
}
类应用程序扩展了无状态小部件{
//此小部件是应用程序的根。
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
主题：主题数据(
主样本：颜色。蓝色，
视觉密度：视觉密度。自适应平台密度，
),
主页：主页（标题：“颤振演示主页”），
);
}
}
类主页扩展了StatefulWidget{
主页（{Key，this.title}）：超级（Key:Key）；
最后的字符串标题；
@凌驾
_AppState createState（）；
}
Future fetchUserData（）异步{
最终请求=等待HttpClient（）.getUrl（Uri.parse(
'https://docs.google.com/spreadsheets/d/e/2PACX-1vQvf9tp4-fETDJbC-HRmRKvVFAXEAGO4lrYPpVeiYkB6nqqXdSs3CjX0eBMvjIoEeX9_qU6K2RWmzVk/pub?gid=0&single=true&output=csv'));
最终响应=等待请求。关闭（）；
列出行和值列表；
等待（response.transform（const Utf8Decoder（））中的最终csvString）{
行值列表=
const CsvToListConverter（）.convert（csvString）；
}
返回rowsAsListOfValues；
}
类_AppState扩展了状态{
var RowsaListofValues；
@凌驾
void didChangeDependencies（）异步{
super.didChangeDependencies（）；
rowsAsListOfValues=Wait fetchUserData（）；
super.setState（（）{}）；//更新小部件数据
///新的
打印（rowsAsListOfValues）；
}
@凌驾
void initState（）{
super.initState（）；
rowsAsListOfValues=“正在加载数据…”；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（widget.title），
),
正文：中(
子：列(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
正文(
“$rowsAsListOfValues”，
),
数据表(
列：常量[
数据列(
标签：文本(
"城市",，
样式：TextStyle（fontStyle:fontStyle.italic），
),
),
数据列(
标签：文本(
“分支机构”，
样式：TextStyle（fontStyle:fontStyle.italic），
),
),
],
行：常量[
数据行(
单元格：[
数据单元（文本（'Dammam'）），
数据单元（文本（'2'）），
],
),
数据行(
单元格：[
数据单元（文本（'Khobar'）），
数据单元（文本（'3'）），
],
),
],
),
],
),
),
);
}
}

---

您可以像这样使用

表

小部件：

  List<List<dynamic>> rowsAsListOfValues;

  @override
  Widget build(BuildContext context) {
    return Scaffold(      
      body: SingleChildScrollView(
        child: Table(
          columnWidths: {
            0: FixedColumnWidth(100.0),
            1: FixedColumnWidth(200.0),
          },
          border: TableBorder.all(width: 1.0),
          children: rowsAsListOfValues.map((item) {
            return TableRow(
                children: item.map((row) {
                  return Container(
                   
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(
                        row.toString(),
                        style: TextStyle(fontSize: 20.0),
                      ),
                    ),
                  );
                }).toList());
          }).toList(),
        ),
      ),
    );
  }

列出行和值列表；
@凌驾
小部件构建（构建上下文）{
返回脚手架（
正文：SingleChildScrollView(
孩子：桌子(
列宽：{
0：固定柱宽（100.0），
1：固定柱宽（200.0），
},
边框：表格边框。全部（宽度：1.0），
子项：rowsAsListOfValues.map（（项）{
返回表行(
子项：item.map（（行）{
返回容器(
孩子：填充(
填充：常数边集全部（8.0），
儿童：
List<List<dynamic>> rowsAsListOfValues;
...
rowsAsListOfValues == null
                ? CircularProgressIndicator()
                : DataTable(
                    ...
                    rows: List.generate(rowsAsListOfValues.length - 1, (index) {
                      return DataRow(
                        cells: <DataCell>[
                          DataCell(Text('${rowsAsListOfValues[index + 1][0]}')),
                          DataCell(Text('${rowsAsListOfValues[index + 1][1]}')),
                        ],
                      );
                    })),

import 'package:flutter/material.dart';
import 'dart:convert';
import 'dart:io';
import 'dart:async';
import 'package:csv/csv.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class HomePage extends StatefulWidget {
  HomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _AppState createState() => _AppState();
}

Future<List<List<dynamic>>> fetchUserData() async {
  final request = await HttpClient().getUrl(Uri.parse(
      'https://docs.google.com/spreadsheets/d/e/2PACX-1vQvf9tp4-fETDJbC-HRmRKvVFAXEAGO4lrYPpVeiYkB6nqqXdSs3CjX0eBMvjIoEeX9_qU6K2RWmzVk/pub?gid=0&single=true&output=csv'));
  final response = await request.close();
  List<List<dynamic>> rowsAsListOfValues;
  await for (final csvString in response.transform(const Utf8Decoder())) {
    rowsAsListOfValues = const CsvToListConverter().convert(csvString);
  }
  return rowsAsListOfValues;
}

class _AppState extends State<HomePage> {
  List<List<dynamic>> rowsAsListOfValues;

  @override
  void didChangeDependencies() async {
    super.didChangeDependencies();
    rowsAsListOfValues = await fetchUserData();
    super.setState(() {}); // to update widget data
    /// new
    print(rowsAsListOfValues);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            rowsAsListOfValues == null
                ? Text("Loading data...")
                : Text(
                    '$rowsAsListOfValues',
                  ),
            rowsAsListOfValues == null
                ? CircularProgressIndicator()
                : DataTable(
                    columns: const <DataColumn>[
                        DataColumn(
                          label: Text(
                            'City',
                            style: TextStyle(fontStyle: FontStyle.italic),
                          ),
                        ),
                        DataColumn(
                          label: Text(
                            'Branches',
                            style: TextStyle(fontStyle: FontStyle.italic),
                          ),
                        ),
                      ],
                    rows: List.generate(rowsAsListOfValues.length - 1, (index) {
                      return DataRow(
                        cells: <DataCell>[
                          DataCell(Text('${rowsAsListOfValues[index + 1][0]}')),
                          DataCell(Text('${rowsAsListOfValues[index + 1][1]}')),
                        ],
                      );
                    })),
          ],
        ),
      ),
    );
  }
}