【Flutter入門】ファイルの読み書き・操作

Flutterでファイル読み書きする方法を整理しました。

## 【dart:io編】入力した内容をファイルに読み書き

ファイル出力用ライブラリ「dart:io」を浸かって、以下のようなファイル読み書きができるアプリを作ってみます。

項目 動作
[エクスポート]ボタンを押下 テキストフィールドに入力した内容をファイルに保存
[インポート]ボタンを押下 出力したファイルを読み込み、画面に表示

■lib/main.dart

//非同期処理用ライブラリ
import 'dart:async';
import 'dart:io';  //ファイル出力用ライブラリ

import 'package:flutter/material.dart';
//アプリがファイルを保存可能な場所を取得するライブラリ
import 'package:path_provider/path_provider.dart';

//テキストフィールドの状態を管理するためのクラス
final _textController = TextEditingController();
//出力するテキストファイル名
final _fileName = 'editTextField.txt';

void main() => runApp(MyApp());

//ステートレス
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter ファイル 出力テスト',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter ファイル 出力テスト'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

//ステートフル
class _MyHomePageState extends State {
  //読み込んだテキストファイルを出力
  String _out = '';

  //ファイルの出力処理
  void outButton() async {
    getFilePath().then((File file) {
      file.writeAsString(_textController.text);
    });
  }

  //ファイルの読み込みと変数への格納処理
  void loadButton() async {
    setState(() {
      load().then((String value) {
        setState(() {
          _out = value;
        });
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('テキストを入力してください'),
            Padding(
              padding: EdgeInsets.all(10.0),
              child: TextField(
                autofocus: true,
                controller: _textController,
                decoration: InputDecoration(icon: Icon(Icons.arrow_forward)),
              ),
            ),
            Padding(
              padding: EdgeInsets.all(10.0),
              //ファイル出力用のボタン(ボタン押下でoutButtonメソッドを呼び出し)
              child:RaisedButton(child: Text('ファイルに出力する'), onPressed: outButton),
            ),
            Padding(
              padding: EdgeInsets.all(10.0),
              //ファイル読み込み用のボタン(ボタン押下でloadButtonメソッドを呼び出し)
              child: RaisedButton(
                  child: Text('出力したファイルを読み込む'), onPressed: loadButton),
            ),
            Padding(
                padding: EdgeInsets.all(10.0),
                //読み込みだファイルの内容を表示
                child: Text(
                  '出力したファイルの内容は「' + _out + '」です!',
                )),
          ],
        ),
      ),
    );
  }
}

//テキストファイルを保存するパスを取得する
Future getFilePath() async {
  final directory = await getTemporaryDirectory();
  return File(directory.path + '/' + _fileName);
}

//テキストファイルの読み込み
Future load() async {
  final file = await getFilePath();
  return file.readAsString();
}

■pubspec.yaml

name: calc
depreion: A new Flutter project.

dependencies:
  flutter:
    sdk: flutter
  path_provider: any

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true
関連記事
1 【Flutter入門】iOS、Android、Windowsアプリ開発
flutter
スポンサーリンク

コメント