convert data from a csv to a dynamic List (Flutter)
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(),
),
),
);
}
}
S0id
Updated on December 15, 2022Comments
-
S0id over 1 year
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
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. ;)