CONTENT
ここから
この章で学ぶこと
この章では、ユーザーが入力したデータを、アプリに追加する画面の考え方を学びます。
最初に覚えることは、これだけです。
入力する
↓
ボタンを押す
↓
データを保存する
↓
画面に表示する
Todoアプリで考えると、ユーザーが「レポートを書く」と入力し、保存ボタンを押すと、Todo一覧に追加されます。
8-1. 入力フォームとは何か
入力フォームとは、ユーザーが文字や数字を入力する場所です。
例えば、次のようなものです。
名前を入力する
メールアドレスを入力する
Todoの内容を入力する
メモを書く
金額を入力する
Todoアプリなら、入力フォームには「やること」を入力します。
レポートを書く
買い物に行く
英単語を覚える
入力フォームの役割
入力フォームの役割は、ユーザーからデータを受け取ることです。
ユーザーが入力
↓
Flutterが受け取る
↓
保存処理に渡す
つまり、入力フォームは「ユーザーとアプリの入口」です。
8-2. TextFieldで文字を入力する
Flutterで文字を入力する場所を作るときは、TextField を使います。
TextField(
decoration: InputDecoration(
labelText: 'Todoを入力',
),
)
これは、文字を入力できるフォームです。
画面には、このような入力欄が表示されます。
Todoを入力
[ ]
入力した文字を受け取る
入力した文字を使うには、TextEditingController を使います。
final TextEditingController _titleController = TextEditingController();
そして、TextField に設定します。
TextField(
controller: _titleController,
decoration: const InputDecoration(
labelText: 'Todoを入力',
),
)
これで、入力された文字をあとから取り出せます。
入力内容を取り出す
入力された文字は、このように取り出します。
final String title = _titleController.text;
例えば、ユーザーが「レポートを書く」と入力していた場合、
title = レポートを書く
になります。
8-3. ボタンを押してデータを保存する
入力欄だけでは、まだ保存されません。
保存するには、ボタンを用意します。
ElevatedButton(
onPressed: () {
final String title = _titleController.text;
},
child: const Text('保存'),
)
onPressed は、ボタンが押されたときに動く処理です。
保存ボタンを押す
↓
onPressedが動く
↓
入力内容を取り出す
↓
保存する
保存処理の流れ
Todoを保存する流れは、こうです。
1. TextFieldにTodoを入力する
2. 保存ボタンを押す
3. 入力された文字を取り出す
4. データベースへ保存する
5. 入力欄を空にする
6. Todo一覧を更新する
最初は、全部を完璧に覚えなくて大丈夫です。
まずは、
入力欄 + 保存ボタン
の組み合わせを理解しましょう。
データベースに保存するイメージ
Supabaseなどのデータベースに保存する場合、考え方はこうです。
title: レポートを書く
is_done: false
created_at: 今の日時
Todoを追加するときは、最初は未完了なので、is_done は false にします。
false = 未完了
true = 完了
8-4. 入力ミスを防ぐ考え方
入力フォームでは、入力ミスを防ぐことが大事です。
例えば、空のまま保存できてしまうと、何も書かれていないTodoが追加されます。
□
これでは分かりにくいです。
空文字を防ぐ
入力欄が空の場合は、保存しないようにします。
final String title = _titleController.text.trim();
if (title.isEmpty) {
return;
}
意味はこうです。
入力文字を取り出す
↓
前後の空白を消す
↓
空なら保存しない
trim() は、前後の余計な空白を消すために使います。
エラーメッセージを出す
空のまま保存しようとしたときは、メッセージを出すと親切です。
Todoを入力してください
ユーザーは、何が足りないのか分かります。
入力ミスを防ぐために考えること
入力フォームでは、次のことを考えます。
空のまま保存できないようにする
長すぎる文字を防ぐ
必要な項目が入力されているか確認する
保存後に入力欄を空にする
保存できたか分かるようにする
最初は、空文字チェックだけで十分です。
実装イメージ
Todoを追加する画面のシンプルなイメージです。
final TextEditingController _titleController = TextEditingController();
Column(
children: [
TextField(
controller: _titleController,
decoration: const InputDecoration(
labelText: 'Todoを入力',
),
),
ElevatedButton(
onPressed: () {
final String title = _titleController.text.trim();
if (title.isEmpty) {
return;
}
// ここでデータベースに保存する
_titleController.clear();
},
child: const Text('保存'),
),
],
)
このコードで大事なのは、次の3つです。
TextFieldで入力する
ボタンで保存処理を動かす
空なら保存しない
よくある勘違い
TextFieldに入力しただけで保存される？
保存されません。
TextField は、文字を入力する場所です。
保存するには、ボタンを押したときの処理が必要です。
TextField = 入力する場所
Button = 保存するきっかけ
入力された文字は勝手に使える？
勝手には使えません。
入力された文字を取り出すには、TextEditingController を使います。
_titleController.text
これで、入力された文字を取得できます。
空のTodoを保存してもよい？
基本的には、保存しない方がよいです。
空のデータが増えると、アプリが使いにくくなります。
空なら保存しない
このチェックは、初心者のうちから入れておくと良いです。
インストールや準備について
この章では、まだ新しいインストール作業はしません。
ただし、実装に進む場合は、以下を使います。
Flutter SDK
Visual Studio Code
Supabase
supabase_flutter
参考URLです。
Flutter公式インストール
https://docs.flutter.dev/install
Flutter × VS Code
https://docs.flutter.dev/tools/vs-code
Supabase Flutter Quickstart
https://supabase.com/docs/guides/getting-started/quickstarts/flutter
supabase_flutter
https://pub.dev/packages/supabase_flutter
この章では、まず「入力して保存する流れ」を理解できればOKです。
8-5. この章のまとめ
この章では、データを追加する画面の考え方を学びました。
入力フォームは、ユーザーからデータを受け取る場所です。
Flutterでは、文字入力に TextField を使います。
入力された文字を取り出すには、TextEditingController を使います。
保存ボタンを押したときに、入力内容を取り出してデータベースへ保存します。
TextFieldで入力
↓
ボタンを押す
↓
入力内容を取り出す
↓
保存する
↓
一覧に表示する
また、空のまま保存しないように、入力ミスを防ぐチェックも大切です。
次の章では、保存したデータを更新・削除する考え方を学びます。