将数据从csv转换为动态列表（Flutter） [英] convert data from a csv to a dynamic List (Flutter)

问题描述

我创建了一个加载CSV文件并将其显示为列表视图的应用程序，我使用了以下示例。

完整代码

  import'package：flutter / material.dart'; 
导入 package：csv / csv.dart； 
导入的 dart：async显示 Future； 
导入的 package：flutter / services.dart显示rootBundle; 
 
 void main（）=> runApp（MyApp（））; 
 
类MyApp扩展了StatelessWidget {
 //此小部件是应用程序的根。 
 @override 
小部件build（BuildContext context）{
 return MaterialApp（
 title：'Flutter Demo'，
 theme：ThemeData（
 //这是应用程序的主题
 // 
 //尝试使用 flutter run运行应用程序。您会看到
 //应用程序具有蓝色工具栏，然后不退出在应用程序中，尝试
 //将下面的primarySwatch更改为Colors.green，然后调用
 //热重载（在运行 flutter run的控制台中按 r，
 //或只是将更改保存到Flutter IDE中的热重载中）
 //请注意，计数器并未重置为零；应用程序
 //不会重新启动。 b $ b primarySwatch：Colors.blue，
），
主页：TableLayout（），
）； 
} 
} 
 
 
类TableLayout扩展了StatefulWidget {
 @override 
 _TableLayoutState createState（）=> _TableLayoutState（）; 
} 
 
类_TableLayoutState扩展了State< TableLayout> {
 List< List< dynamic>>数据= []; 
 loadAsset（）async {
 final myData = await rootBundle.loadString（ assets / ford.csv）; 
 List< List< dynamic>> csvTable = CsvToListConverter（）。convert（myData）; 
 print（csvTable）; 
 data = csvTable; 
 setState（（）{
 
}）; 
} 
 
 @override 
小部件构建（BuildContext上下文）{
 return Scaffold（
 floatActionButtonLocation：FloatingActionButtonLocation.centerFloat，
 floatActionButton：FloatingActionButton （
 child：Icon（Icons.refresh），
 onPressed：（）async {
 await loadAsset（）; 
 // print（data）; 
}） ，
 appBar：AppBar（
标题：Text（表格布局和CSV），
），
 
正文：SingleChildScrollView（
子元素：表格（
 columnWidths：{
 0：FixedColumnWidth（100.0），
 1：FixedColumnWidth（200.0），
}，
 border：TableBorder.all（width：1.0） ，
子项：data.map（（item）{
 return TableRow（
子项：item.map（（row）{
 return Container（
 color：
 row.toString（）。 contains（ NA）吗？ Colors.red：Colors.green，
子元素：Padding（
填充元素：const EdgeInsets.all（8.0），
子元素：Text（
 row.toString（），
 style：TextStyle（fontSize：20.0），
），
），
）; 
}）。toList（））; 
}）。toList（），
），
），
）； 
} 
} 
  

I create an app that loads the CSV file and displays it as a list view, I have used the following example. https://gist.github.com/Rahiche/9b4b2d3b5c24dddbbe662b58c5a2dcd2

The problem is that my List, don't generate rows

I/flutter ( 2158): [[M01, Plastics, 50, NA
I/flutter ( 2158): M02, Plastics, 85, NA
I/flutter ( 2158): M03, Wood, 50, NA
I/flutter ( 2158): M04, Wood, 15, 3
I/flutter ( 2158): M05, Plastics, 50, NA]]

Here is my code

class TableLayout extends StatefulWidget {
  @override
  _TableLayoutState createState() => _TableLayoutState();
}

class _TableLayoutState extends State<TableLayout> {
  List<List<dynamic>> data = [];
  loadAsset() async {
    final myData = await rootBundle.loadString("assets/ford.csv");
    List<List<dynamic>> csvTable = CsvToListConverter().convert(myData);
    print(csvTable);
    data = csvTable;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.refresh),
          onPressed: () async {
            await loadAsset();
            //print(data);
          }),
      appBar: AppBar(
        title: Text("Table Layout and CSV"),
      ),

      body: SingleChildScrollView(
        child: Table(
          columnWidths: {
            0: FixedColumnWidth(100.0),
            1: FixedColumnWidth(200.0),
          },
          border: TableBorder.all(width: 1.0),
          children: data.map((item) {
            return TableRow(
                children: item.map((row) {
                  return Container(
                    color:
                    row.toString().contains("NA") ? Colors.red : Colors.green,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(
                        row.toString(),
                        style: TextStyle(fontSize: 20.0),
                      ),
                    ),
                  );
                }).toList());
          }).toList(),
        ),
      ),
    );
  }
}

and my ford.csv

M01,Plastics,50,NA
M02,Plastics,85,NA
M03,Wood,50,NA
M04,Wood,15,3
M05,Plastics,50,NA

enter image description here

---

i tried the hints from https://pub.dev/packages/csv#-readme-tab- and from Not viewing Table Layout from a csv in flutter and I have read several csv files but every time i have the same issues.

what am I doing wrong??

Please help a new flutter developer. ;)

解决方案

You can copy paste run full code below
I add setState in function loadAsset()
I did not encounter column width issue, if you still have this issue, please try to add column 2 , 3 or shrink width of FixedColumnWidth

columnWidths: {
            0: FixedColumnWidth(100.0),
            1: FixedColumnWidth(100.0),
            2: FixedColumnWidth(50.0),
          },

code snippet

loadAsset() async {
    final myData = await rootBundle.loadString("assets/ford.csv");
    List<List<dynamic>> csvTable = CsvToListConverter().convert(myData);
    print(csvTable);
    data = csvTable;
    setState(() {

    });
  }

working demo
animated gif did not show correct green color,
so I paste final result in second picture

full code

import 'package:flutter/material.dart';
import 'package:csv/csv.dart';
import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: TableLayout(),
    );
  }
}


class TableLayout extends StatefulWidget {
  @override
  _TableLayoutState createState() => _TableLayoutState();
}

class _TableLayoutState extends State<TableLayout> {
  List<List<dynamic>> data = [];
  loadAsset() async {
    final myData = await rootBundle.loadString("assets/ford.csv");
    List<List<dynamic>> csvTable = CsvToListConverter().convert(myData);
    print(csvTable);
    data = csvTable;
    setState(() {

    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.refresh),
          onPressed: () async {
            await loadAsset();
            //print(data);
          }),
      appBar: AppBar(
        title: Text("Table Layout and CSV"),
      ),

      body: SingleChildScrollView(
        child: Table(
          columnWidths: {
            0: FixedColumnWidth(100.0),
            1: FixedColumnWidth(200.0),
          },
          border: TableBorder.all(width: 1.0),
          children: data.map((item) {
            return TableRow(
                children: item.map((row) {
                  return Container(
                    color:
                    row.toString().contains("NA") ? Colors.red : Colors.green,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(
                        row.toString(),
                        style: TextStyle(fontSize: 20.0),
                      ),
                    ),
                  );
                }).toList());
          }).toList(),
        ),
      ),
    );
  }
}

这篇关于将数据从csv转换为动态列表（Flutter）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！