【Flutter】ファイル選択ダイアログを表示する【file_picker】

Flutterのパッケージ`file_pickerを使ってファイル選択ダイアログを表示したい！

概要

今回の記事では、Flutterのパッケージ`file_pickerを使ってファイル選択ダイアログを表示する手順を掲載する。

仕様書

環境

Android Studio Giraffe | 2023.2.1 Patch 2
Flutter 3.19.6
file_picker 8.0.3

手順書

インストール編とコード編の2部構成です。

インストール編

ターミナルでコマンドを実行するか

flutter pub add file_picker

pubspec.yamlのdependencies:に下記のような感じで追加して

dependencies:
  file_picker: ^8.0.3

ターミナルでflutter pub getする。

flutter pub get

コード編

上部のアップロードのIconButtonをタップするとファイル選択ダイアログを表示され選択したテキストファイルを読み込みTextFeildに出力、ダウンロードのIconButtonをタップするとファイル選択ダイアログを表示され指定したファイルにTextFeildの中身を出力する例。

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

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: const FilePickerSample1()
      )
    )
  );
}

class FilePickerSample1 extends StatelessWidget {
  FilePickerSample1({super.key});
  TextEditingController textEditingController = TextEditingController();

  void saveText() async {
    String? outputFile = await FilePicker.platform.saveFile(
      dialogTitle: 'Please select an text file:',
      fileName: 'output.txt',
    );

    if (outputFile == null) {
      return;
    }

    final file = File(outputFile);
    await file.create();
    await file.writeAsString(textEditingController.text);
  }

  void loadText() async {
    FilePickerResult? result = await FilePicker.platform.pickFiles(
      type: FileType.custom,
      allowedExtensions: ['txt'],
    );

    if (result != null) {
      File file = File(result.files.single.path!);
      if (await file.exists()) {
        final data = await file.readAsString();
        textEditingController.text = data;
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        child: Column(children: [
          Row(children:[
            IconButton(
              icon: const Icon(Icons.upload),
              onPressed: () {
                loadText();
              },
            ),
            IconButton(
              icon: const Icon(Icons.download),
              onPressed: () {
                saveText();
              },
            ),
          ]),
          const SizedBox(height: 8),
          Expanded(
            //width: double.infinity,
            child: TextField(
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'テキスト',
                floatingLabelBehavior: FloatingLabelBehavior.always,
              ),
              controller: textEditingController,
              maxLines: null,
              expands: true,
              textAlignVertical: TextAlignVertical.top,
            ),
          ),
        ]),
      ),
    );
  }
}

ファイルを出力する際に既にファイルが存在する場合は上書き、ファイルがない場合は新規に作成する。

まとめ（感想文）

なにかしらのファイルを編集するアプリを作るのに使えるかもね！

引用・参考文献

下記の記事を参考にさせていただきました。ありがとうございました。

file_picker | Flutter package

A package that allows you to use a native file explorer to p?