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アプリ開発 |

コメント