【Flutter】簡単なToDoアプリの作成手順

皆さんこんにちは！現役大学生のKamichan_R(@Kamichan_R)です。
今回は、世界中で多く利用されているクロスプラットフォーム開発のフレームワークであるFlutterでアプリ開発をしました。Flutterでアプリ開発をするためにDart,SQLiteを勉強しました。そして、学習のアウトプットとしてToDoアプリを制作しました。
この記事では、今回制作したToDoアプリの説明・開発手順と学習の振り返りを紹介します。

#アプリ制作の説明と経緯
ここでは、ToDoアプリの概要と使用した技術と学習の目的を説明します。
##アプリの概要
今回開発したアプリは基本的なToDoアプリの機能が実装されています。タスクの追加・読取・編集・削除(CRUD)の機能があります。タスク作成時は、タスク名・優先度・期限・メモを入力します。複数のタスクがある場合は期日が早い順に並べるという機能があります。

【Todoアプリ完成】

1ヶ月前位から #Flutter を勉強して、#アプリ制作 をしていました。そしてついに完成です！
クロスプラットフォーム開発やデータベースの勉強が出来ました。
制作中に少しずつ理解が深まっていくことが楽しかったです！#プログラミング #駆け出しエンジニアと繋がりたい pic.twitter.com/tGJJnZ2l2E

— Kamichan_R@プログラミング学習中 (@Kamichan_R) September 26, 2021

##技術選定

• Flutter
• iOSとAndroidアプリを同時に作成できるクロスプラットフォーム開発のフレームワーク
• Dart
• Flutterでコードを書く際に使用するプログラミング言語
• オブジェクト指向型の言語であり、JavaScriptに似た言語
• SQLite
• MySQLと比較して高速で動き、記述が楽である

##学習の目的
以前、大学で所属しているサークルのホームページやよじメーカーというWebページ・サービスを作成しました。これらの制作では主に以下のことを経験することが出来ました。

• Progateやドットインストールなどで学習した言語でのサービス開発
• 要件定義・外部設計・内部設計などの開発手順の実践

今回のアプリ開発では、

• 今までやったことがないアプリ開発に挑戦
• クロスプラットフォーム開発の体験と実践
• データベース操作の実践

を主な目的としました。FlutterでのToDoアプリ開発はこの学習目的の達成にピッタリだったので、1ヶ月で勉強してアプリを完成させました。

#開発手順
ToDOアプリの制作のために要件定義・外部設計・内部設計を行いました。
##要件定義
今回のToDoアプリでは開発のスピードを重視して、複雑な機能は取り入れず、基本的なCRUD機能の実装を目的にしました。なぜなら、データベースの実践においてCRUD機能は基本であり、ToDoアプリには必要不可欠だからです。

##外部設計
次にアプリの操作で必要な画面は何かを考えます。要件定義でCRUD機能の実装を決定したので、タスク作成や編集の画面(Create, Updateの部分)、必要な画面は全タスクの表示の画面と各タスクの詳細や編集・削除ボタンが表示されるする画面(Read, Deleteの部分)が必要であると考えました。この方針でToDoアプリを制作していきます。

##内部設計
内部設計では主にデータベースの設計に注意しました。今回のToDoアプリでは、タスク名・優先度・期限・メモの機能を実装するので、データベースは下の画像のようにしました。idはINTEGER PRIMARY KEY AUTOINCREMENTによって主キーの機能を果たします。そして、タスク名・優先度・期限はNULLを許可しない構造になっています。

##実装
実際のコードはGitHubに載せています。参考にしたい方は以下のリンクへ。

#振り返り
##Flutterは便利
Flutterは1つのコードでiOS, Androidに適したウィジェットと表示してくれるので、同じようなコードを複数回書く必要もなくなる。そして、UIも使いやすく、様々なものが用意されているので使い勝手の良いものを使えば便利なアプリが簡単に制作できることも実感できました。

##データベースの実装
データベースを用いたサービス制作は今回が初めてでしたが、無事にアプリが正常に動作することが確認できたので一安心です。今回はSQLiteだったので、主キーの用意やデータ型に気をつければ無事に動作しました。
しかし、SQLiteはデータ型としてDateTime型を使うことができないので、String型に直してからデータベースに挿入して、データを持ってくるときはString型からDateTime型に直すという手順が必要だったので、少し苦戦しました。
今回は単一のテーブルで、挿入するデータ構造も単純だったから時間がかからずに実装できました。しかし、複数のテーブルと連携させるとなるとさらに複雑なコードや構造になると思うので、機会があれば実践してみたいと思いました。

##改善点
今回はCRUD機能の実装が最優先事項でした。しかし、さらに見やすく操作しやすいUIの実装をしてみてもいいのかなと思いました。そして、ToDoアプリにはほとんどあるタスクの完了・未完了を操作するチェックボタンのようなものは一回実装してみてもいいかなと思ったけれど、実装の方法がいまいち頭に浮かばなかったので実は諦めました。もう少し、関数の呼び出しについての理解を深めていく必要があると思いました。

#最後に
私は、プログラミングやITについての勉強をしていて、今回のようにプログラミングでアプリ・サービスを作成や、データサイエンスについて学習をしています。Twitterもやっていますので、よろしければフォローよろしくおねがいします。私が今まで作成したサービス・アプリのポートフォリオもありますので、ぜひお立ち寄りください。