Flutter如何加载URL中的CSV文件并显示为ListView

前置准备 #

• 首先添加依赖，在pubspec.yaml中添加如下配置：

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0
  csv: ^5.1.1

配置完成后执行flutter pub get安装依赖。

• 配置网络权限（未配置过网络权限的项目需要添加）：
  • Android 端：在android/app/src/main/AndroidManifest.xml的manifest标签下添加权限：

    <uses-permission android:name="android.permission.INTERNET" />
    

  • iOS 端：如果你的CSV地址是HTTP协议，需要在ios/Runner/Info.plist的dict标签下添加配置：

    <key>NSAppTransportSecurity</key>
    <dict>
      <key>NSAllowsArbitraryLoads</key>
      <true/>
    </dict>
    

完整实现代码 #

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

class CsvFromUrlPage extends StatefulWidget {
  const CsvFromUrlPage({super.key});

  @override
  State<CsvFromUrlPage> createState() => _CsvFromUrlPageState();
}

class _CsvFromUrlPageState extends State<CsvFromUrlPage> {
  Future<List<List<dynamic>>> _loadCsvFromUrl() async {
    // 替换为你实际的CSV文件地址
    const csvUrl = 'https://example.com/your_test.csv';
    final response = await http.get(Uri.parse(csvUrl));
    if (response.statusCode == 200) {
      // 用utf8解码避免中文乱码
      final csvString = utf8.decode(response.bodyBytes);
      // 可根据CSV实际格式调整转换器参数，比如分隔符、换行符规则
      return const CsvToListConverter().convert(csvString);
    } else {
      throw Exception('CSV请求失败，状态码：${response.statusCode}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('CSV加载演示')),
      body: FutureBuilder<List<List<dynamic>>>(
        future: _loadCsvFromUrl(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }
          if (snapshot.hasError) {
            return Center(child: Text('加载出错：${snapshot.error}'));
          }
          if (!snapshot.hasData || snapshot.data!.isEmpty) {
            return const Center(child: Text('CSV无有效数据'));
          }
          final csvData = snapshot.data!;
          return ListView.builder(
            itemCount: csvData.length,
            itemBuilder: (context, index) {
              final rowData = csvData[index];
              // 可根据业务需求自定义列表项样式
              return Card(
                margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
                child: Padding(
                  padding: const EdgeInsets.all(12),
                  child: Text(rowData.join(' | ')),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Neural