flutter for web でfile pickerを使う

November 04, 2020

完成イメージ

import 'dart:convert';

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: '',
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      routes: {
        '/': (_) => App(),
      },
      initialRoute: '/',
    );
  }
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(''),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          try {
            final _paths = (await FilePicker.platform.pickFiles(
                    type: FileType.any, allowMultiple: false, withData: true))
                ?.files;
            final data = utf8.decode(_paths.first.bytes);
            print(data);
          } on PlatformException catch (e) {
            print("Unsupported operation" + e.toString());
          } catch (ex) {
            print(ex);
          }
        },
      ),
    );
  }
}

この辺

withData: trueにするのがミソこのフラグを立てることで選択したファイルのbytesにデータが入ってくる。あとはこのデータがテキストであればよしなにutf8.decodeなりを噛ませればStringとして読み込みできるようになる。

final _paths = (await FilePicker.platform.pickFiles(
        type: FileType.any, allowMultiple: false, withData: true))
    ?.files;
final data = utf8.decode(_paths.first.bytes);