#63 Jetpack ComposeでToDoアプリを作る - 概要

AndroidでToDoアプリを作ってみるシリーズを15回にわけてお届けしました。今回はこれをJetpack Composeで作るとどうなるか試してみます。

モケラボ代表の練習素材的な側面があるので、途中でやりなおしが発生したりした場合はごめんなさい。 今回はGithubにコードを残しながら進めていきます。

目次

タイトル部分をタップ/クリックで該当記事に移動できます

プロジェクトを作る

Jetpack Composeを使うアプリプロジェクトを作ります。

エントリーポイント

Jetpack ComposeアプリのエントリーポイントとなるComposableを作ります。

Navigation Compose

Jetpack Composeアプリの画面遷移に使うNavigation Composeを導入します。

各画面のベースを作る

各画面のベースとなるComposableを作ってみます。

Room

ToDoをデータベースに保存するため、Roomを導入します。

HiltとViewModel

Jetpack ComposeアプリにHiltとViewModelを導入してみます。

ScaffoldとTopAppBar

各画面にScaffoldとTopAppBarを配置してみます。

ToDo作成画面

ToDo作成画面を実装し、ToDoをデータベースに追加できるようにします。

ToDoのリスト表示

LazyColumnを使ってToDoをリスト表示してみます。

ToDoの詳細表示

リスト表示されているToDoをタップした際、詳細が表示されるようにしてみます。

ToDoの編集機能

詳細画面から編集画面への遷移と、編集機能を実装してみます。

ToDoの削除機能

詳細画面にToDo削除機能を追加してみます。