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アプリ開発 |
コメント