[Flutter] CSV ファイルを asset から読み出す

CSVファイルをAssetに入れて読み出すには、
package:csv/csv.dart　を使うと簡単にできます

CSVファイルの読み出し

CSVファイル、test.csv をAssetに保存されているとして
それを読み出すには rootBundle.loadString を使います

rootBundle.loadString('assets/test.csv')

1	rootBundle.loadString('assets/test.csv')

CsvToListConverter() を使って読み出したCSVデータをリスト形式に変換

List<List<dynamic>> row = CsvToListConverter().convert(csvDataString);

1	List<List<dynamic>> row = CsvToListConverter().convert(csvDataString);

async 〜 await を使った非同期で読み出すFutureクラスを作成します

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

Future<void> loadCsv() async {
  // Assetにある CSV ファイルの読み込み
  final csvDataString = await rootBundle.loadString('assets/test.csv');

  // CSVデータをリストに変換
  List<List<dynamic>> row = const CsvToListConverter().convert(csvDataString);

  // CSV データのパース処理
  for (var row in csvData) {
    debugPrint(row);
  }
}

import 'dart:async';

import 'package:flutter/services.dart' show rootBundle;

import 'package:csv/csv.dart';

Future<void> loadCsv() async {

// Assetにある CSV ファイルの読み込み

final csvDataString = await rootBundle.loadString('assets/test.csv');

// CSVデータをリストに変換

List<List<dynamic>> row = const CsvToListConverter().convert(csvDataString);

// CSV データのパース処理

for (var row in csvData) {

debugPrint(row);

}

目次
1. 事前準備
2. サンプルコード
3. 実行結果

事前準備

　package:csv/csv.dart

CSVを扱いやすするためのパッケージ、
package:csv/csv.dart のインストールします

$ flutter pub add csv

1	$ flutter pub add csv

これで pubspec.yaml に以下の設定が追加されます

dependencies:
  flutter:
    sdk: flutter
  csv: ^6.0.0

dependencies:

flutter:

sdk: flutter

csv: ^6.0.0

AssetにCSVファイルを設定

例として test.csv を以下のように作成して
assets ディレクトリを作成して入れます

test.csv

1,Google,167.43
2,Apple,226.84
3,Facebook(Meta),528.00
4,Amazon,177.04
5,Microsoft,416.79

1,Google,167.43

2,Apple,226.84

3,Facebook(Meta),528.00

4,Amazon,177.04

5,Microsoft,416.79

Assetの設定
pubspec.yaml にassets以下を追加

flutter:
  uses-material-design: true
  assets:
    - assets/

flutter:

uses-material-design: true

assets:

- assets/

サンプルコード

実際にCSVファイルを読み出してみましょう
簡単なボタンをタップするこちらのサンプルに追加してみます
ElevatedButton Widget の作成

main.dart

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter/services.dart' show rootBundle;
import 'package:csv/csv.dart';
 
void main() => runApp(const ElevatedButtonApp());
 
class ElevatedButtonApp extends StatelessWidget {
  const ElevatedButtonApp({super.key});
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('ElevatedButton')),
        body: const ElevatedButtonExample(),
      ),
    );
  }
}
 
class ElevatedButtonExample extends StatefulWidget {
  const ElevatedButtonExample({super.key});
 
  @override
  State<ElevatedButtonExample> createState() => _ElevatedButtonExampleState();
}
 
class _ElevatedButtonExampleState extends State<ElevatedButtonExample> {
  
  String _displayText = "Text";
 
  void changeText(){
    setState((){
      _displayText = "Changed !";
      loadCSV();
    });
  }
 
  @override
  Widget build(BuildContext context) {
    final ButtonStyle style =
        ElevatedButton.styleFrom(textStyle: const TextStyle(fontSize: 20));
 
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(
            _displayText,
            style: const TextStyle(fontSize: 24),          
          ),
          const SizedBox(height: 30),
          ElevatedButton(
            style: style,
            onPressed: changeText,
            child: const Text('ElevatedButton'),
          ),
        ],
      ),
    );
  }
}

Future<void> loadCSV() async {
  // CSV ファイル読み込む
  String csvString = await rootBundle.loadString('assets/test.csv');

  // CSV リスト変換
  List<List<dynamic>> csvData = const CsvToListConverter().convert(csvString);

  // CSV データ処理
  for (var row in csvData) {
    debugPrint(row.toString());
  }
}

import 'package:flutter/material.dart';

import 'dart:async';

import 'package:flutter/services.dart' show rootBundle;

import 'package:csv/csv.dart';

void main() => runApp(const ElevatedButtonApp());

class ElevatedButtonApp extends StatelessWidget {

const ElevatedButtonApp({super.key});

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(title: const Text('ElevatedButton')),

body: const ElevatedButtonExample(),

);

}

class ElevatedButtonExample extends StatefulWidget {

const ElevatedButtonExample({super.key});

@override

State<ElevatedButtonExample> createState() => _ElevatedButtonExampleState();

}

class _ElevatedButtonExampleState extends State<ElevatedButtonExample> {

String _displayText = "Text";

void changeText(){

setState((){

_displayText = "Changed !";

loadCSV();

});

}

@override

Widget build(BuildContext context) {

final ButtonStyle style =

ElevatedButton.styleFrom(textStyle: const TextStyle(fontSize: 20));

return Center(

child: Column(

mainAxisSize: MainAxisSize.min,

children: <Widget>[

Text(

_displayText,

style: const TextStyle(fontSize: 24),

const SizedBox(height: 30),

ElevatedButton(

style: style,

onPressed: changeText,

child: const Text('ElevatedButton'),

);

}

Future<void> loadCSV() async {

// CSV ファイル読み込む

String csvString = await rootBundle.loadString('assets/test.csv');

// CSV リスト変換

List<List<dynamic>> csvData = const CsvToListConverter().convert(csvString);

// CSV データ処理

for (var row in csvData) {

debugPrint(row.toString());

}

実行結果

実行させてみます

ボタンをタップすると

VSCodeのDEBUG CONSOLE にdebugPrintで出力されました

これでCSVファイルを読み出すことができました
ただ、このケースではAssetに入れてあるものを読み出すだけで
書き込み、保存はAssetにはできないので、読み書きしたい場合は別の方法を取ります

References:
csv Dart Package
rootBundle property
CsvToListConverter class