首页 > 解决方案 > 文件选择器 excel 文件 (.CSV) Flutter

问题描述

我想要一个可以将 excel .csv 文件上传到页面中的页面。因此,我使用文件选择器来选择文件,但我无法选择 CSV 文件。凸起的按钮将我导航到谷歌驱动器并选择文件,我可以上传除 CSV 文件以外的其他文件类型的文件。如何将 CSV 文件上传到 Flutter 页面?

问题 2:当我导航到 google drive 时,我无法返回上传页面,并且会显示错误。

string_patch.dart 字符串运算符 +(String other) native "String_concat"; 发生了异常。ArgumentError(无效参数)

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class UploadPage extends StatefulWidget {
  @override
  _MyUploadPageState createState() => new _MyUploadPageState();
}

class _MyUploadPageState extends State<UploadPage> {
  String _filePath;

  void getFilePath() async {
    try {
      String filePath = await FilePicker.getFilePath();
      if (filePath == '') {
        return;
      }
      print("File path: " + filePath);
      setState(() {
        this._filePath = filePath;
      });
    } on PlatformException catch (e) {
      print("Error while picking the file: " + e.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Upload CSV File'),
      ),
      body: new Center(
        child: new ButtonBar(
            alignment: MainAxisAlignment.center,
            children: <Widget>[
              new RaisedButton(
                onPressed: () => {},
                color: Colors.purple,
                padding: EdgeInsets.all(12.0),
                child: _filePath == null
                    ? new Text('No file selected.')
                    : new Text('Path' + _filePath),
              ), // Replace with a Row for horizontal icon + text
              new RaisedButton(
                onPressed: getFilePath,
                child: new Icon(Icons.sd_storage),
                color: Colors.purple,
              )
            ]),
      ),
    );
  }
}

标签: csvflutter

解决方案


您可以使用 CSV、csv_reader 甚至 pdftron 之类的软件包,这将允许您获取所有类型的文件,甚至 pptx 也具有签名和印章等编辑功能。

或者我希望它将 CSV 文件转换为表格或列表,然后是完整代码

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(),
        ),
      ),
    );
  }
}

工作演示

工作演示 1

工作演示 2


推荐阅读