Flutterプログラム解説 簡単なメモアプリを作成してみたよ! その2 データ保存、ドラムロール実装、ローカル通知実装編

クロ【喜び】

今回もFlutterのプログラム解説をしていこうと思います!

霊夢【普通】

今回は、端末に入力した内容を保存できるようにしてみたわ

魔理沙【普通】
あとは、時刻入力をパッケージを利用して
ドラムロールで行えるようにしてみたぞ

妖夢【普通】
かなり久しぶりの更新ですが、Flutterのプログラム解説言ってみます!

解説動画もあるよ!

クロ【喜び】
大部分は動画で解説していますので、
こちらを見ていただけると嬉しいです!

霊夢【悲しみ】
今回、いつもより詳しく解説した関係で
内容自体はあまり進んでないわね

魔理沙【楽しい】
動画内でも言ってるけど、
このアプリ制作は前座のつもりだったから1回で終えるはずだったんだけどね

妖夢【普通】
初めて解説する内容が多くて
どうしても時間がかかってしまったというわけですね

Githubにプロジェクトをアップロードしてます!

Githubのプロジェクトリンク:https://github.com/Syungetu/text_editor

クロ【喜び】
解説とかはどうでもいい!
ソースを見せろ!といった方はGithubにプロジェクトファイルを上げてますのでご確認ください~

霊夢【悲しみ】
解説をするために作ったプロジェクトなのであまり難しいことしていないのでロジックに参考にできる物は少ないかもね

魔理沙【喜び】
このプロジェクトを改良して作るのも全然OKだから、気軽にみていってね

妖夢【普通】
このプロジェクトを利用した場合は「すたじお・くろす!」の明記をしていただけるとうれしいです

動画について補足的解説をします

クロ【普通】
ソースコード全てを不解説すると10回更新しても間に合わないので、要と貼る部分を解説したいと思います

霊夢【普通】
今回でいうとデータを端末に保存したり読み込みする部分と、ドラムロールの処理を追加するところね

魔理沙【普通】
ドラムロールは基本機能として実装されていないので、パッケージを追加するところからだね

妖夢【普通】
基本的なことは前回のブログで書いてるからそちらも参考にしていただけると嬉しいです

Flutterプログラム解説 簡単なメモアプリを作成してみたよ! その1 UI作成編

端末にデータを保存する

クロ【普通】
まずは端末にデータを保存したり、読み込むことの解説を行いたいと思います

霊夢【普通】
と言ってもこのあたりは標準で用意されているものが有るからそれを使っていくわ

魔理沙【普通】
実際のソースコードは「memo_page.dart」になるので、Githubなどでこれを見ながら確認してみてね

https://github.com/Syungetu/text_editor/blob/main/lib/page/memo_page.dart

妖夢【普通】
上のリンクからGithubに保存されている該当のソースコードがあるのでご参考にしてください

データを端末に保存する
import ‘package:shared_preferences/shared_preferences.dart’;

クロ【普通】
まずは処理を呼び出すために、インポートを追加します
インポートはごく普通な感じですね
// インスタンス取得
SharedPreferences prefs = await SharedPreferences.getInstance();
// titleという項目に文字列データを保存する
prefs.setString(‘title’, titleTextEditingController.text);
// contentsという項目に文字列データを保存する
prefs.setString(‘contents’, contentsTextEditingController.text);

霊夢【普通】
上のコードが端末にデータを保存する処理になるわ
今回はテキストデータを保存するものになるわね

// インスタンス取得
SharedPreferences prefs = await SharedPreferences.getInstance();

魔理沙【普通】
1行目のコードはおまじないに近いもので、
データをやり取りするときは必ずSharedPreferences.getInstance();を呼び出す必要があるぞ

妖夢【普通】
インスタンスを生成されるまでには時間がかかるので、生成されるまで処理を待つように「await 」しています

// titleという項目に文字列データを保存する
prefs.setString(‘title’, titleTextEditingController.text);

クロ【普通】
2行目以降のコードで1行目で取得したインスタンスを使ってデータを保存しています

霊夢【普通】

保存する「setString()」関数の第一引数は項目名を指定するわ

魔理沙【普通】
項目名は保存するデータを識別するものなので、複数の保存データがある場合はすべて別の項目名を文字列で入れる必要があるわ

妖夢【普通】
第二引数に保存したいデータを入力します
今回は文字列を入力しています

prefs.setInt(‘hogehoge’, title1); → int型で保存
prefs.setDouble(‘hogehoge’, title1.0001); → double型で保存
prefs.setBool(‘hogehoge’, title true); → bool型で保存
prefs.setString(‘hogehoge’, title “hagehage”); → String型で保存
prefs.getStringList(‘hogehoge’, title [“aaa”, “bbb”, “ccc”]); → String型のリストで保存

クロ【普通】

第二引数に入れるデータは関数ごとに分かれてます

霊夢【普通】
上の処理のように数値や文字列の配列型など複数の種類で保存できるようになっているわ

保存したデータの読み込み

// インスタンス取得
SharedPreferences prefs = await SharedPreferences.getInstance();

// titleという項目に保存した文字列データを読み込む

String? titleText = prefs.getString(‘title’);
if (titleText != null) {
    titleTextEditingController.text = titleText;
}

// contentsという項目に保存した文字列データを読み込む

String? contentsText = prefs.getString(‘contents’);
if (contentsText != null) {
    contentsTextEditingController.text = contentsText;
}

魔理沙【普通】
次に保存したデータの読み込み部分だな
こちらも同じ様な処理で出来るからわかりやすいな

// インスタンス取得
SharedPreferences prefs = await SharedPreferences.getInstance();

妖夢【普通】
こちらも保存のときのようにインスタンスが必要なので、取得します
保存時と同じようにインスタンスが生成されるまで待ちます

// titleという項目に保存した文字列データを読み込む
String? titleText = prefs.getString(‘title’);

if (titleText != null) {
    titleTextEditingController.text = titleText;
}

クロ【普通】
そしてデータの読み込みの処理をしていきますが、こちらも保存の処理に似た感じの処理になってますね

霊夢【普通】
データの読み込みの場合は項目のみで良いので、保存したときに使った要目を使ってデータを読み込むわ

魔理沙【普通】

保存されてないものを呼び出そうとするとnullが返されるぞ

妖夢【普通】
受け取ったデータがnullだった場合はデータを反映しないようにif文で分岐させています

ドラムロールの選択ウィジェットを追加する

クロ【普通】
次に時間設定機能のドラムロールを追加して実装してみたいと思います

パッケージを追加する
$ flutter pub add flutter_datetime_picker

霊夢【普通】
まずはパッケージを追加するわ、
まずはドラムロールが出来るFlutter Datetime Pickerを追加するわ

魔理沙【普通】
上のコマンドはVisual Studio Codeのターミナルウインドウに入力するぞ

$ flutter pub add flutter_native_timezone

妖夢【普通】
日付管理周りの処理を行うので、タイムゾーンのパッケージも追加します

ドラムロールを追加する

import ‘package:flutter_datetime_picker/flutter_datetime_picker.dart’;

 

import ‘package:timezone/data/latest.dart’ as tz;
import ‘package:timezone/timezone.dart’ as tz;

クロ【普通】
まずはインポートを追加します
先程追加した2つのパッケージを追加した感じですね

霊夢【普通】
下の2行のas tzと言うのは、インポートで呼び出したクラスをtzで呼び出すということになるわ

魔理沙【普通】
timezone処理は標準のDateTime処理と同じ関数名のものがあり、同じ関数名を呼び出そうとするとエラーになるんだな

妖夢【普通】

そのため別名で飛び出すことでエラーを回避する事ができます

// 通知日付設定を行う
await DatePicker.showDateTimePicker(
   context,
   showTitleActions: true,
   locale: LocaleType.jp,
   currentTime: DateTime.now(),
   // ピッカーを動かしたときに呼ばれる
   onChanged: (time) {},
   // 日付設定が完了したときに呼ばれる
   onConfirm: (time) {
      setSheetState(() {
          selectDateTime = time;
      });
   },
);

クロ【普通】
実際のドラムロールを表示する処理です
DatePicker.showDateTimePicker()」がドラムロールを呼び出す処理となります

霊夢【普通】
日本時間に設定するひつようがあるので、「 locale: LocaleType.jp」を指定するわ

魔理沙【普通】
そして、設定する前の時間は現在時間を入れるために「currentTime: DateTime.now(),」を設定するぞ

妖夢【普通】
あとは、入力した後の値を取得したいので、 onConfirm: (time) {}からデータを受け取るようにしています

次回はローカル通知の解説です

クロ【普通】
なんか解説することがあまりなくて薄味になってしまいましたね……

霊夢【普通】
1回目に多くのことを排泄したので、そちらを参考にしてもらえればと思うわ

魔理沙【普通】
次回は、ローカル通知周りの解説を書いていこうかなと思ってるぞ

妖夢【普通】
ローカル通知はちょっと面倒くさい実装なので、詳しく解説していきたいと思います

気軽にコメントをどうぞ!

この記事に関すること冬月に聞きたいこと等、小さいことでもコメントしていただける嬉しいです。
冬月に直接連絡したい方は下のお問合せフォームをお使いください。(メール送信されます)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。
※メールアドレスは公開されることは有りません。


The reCAPTCHA verification period has expired. Please reload the page.

プログラム解説の関連記事