この Doc でやること

ボタンを押してローカルにデータ保存したりする。
超ラフな Todo リストみたいなものを作りながら覚える

✍アプリを作るならいずれデータの保存や取り出しなどは必須というもの。しかし Firebaseはまだ早い。ってことでまずはローカルの App State に入れる実験をしてみる。

App State って？

ローカルの変数で、型を持っていて、Persist のオプションを有効にしたら keyChain (iOS) や sharedPreference (Android) みたいセキュアな領域に保存されるらしい。昔は "local State" と呼んだそうな。

早速やってみます。
おおよそ以下のようなセクション

1. UI パーツの用意 (List View)

2. App State の用意

3. ボタンを押すとTodoが保存されるようにアクションを作る

4. 保存された Todo を List View に反映する

5. Todo を削除できるようにする

1.UI パーツの用意 (List View)

まずはパーツだけ。

・ListView と、その下に Todo を入れるための TextField + Icon を追加

アイコンのボタンを押すと、TextFieldの値を変数に格納し、ListViewは変数の値を引っ張り出すような仕組みをまずは作る。

・ListViewのサイズ調整をする

ListViewを選んで→[Padding & Alignment] → [Expansion] の項目で、一番右のなんか黒いブラックタイルをクリックすると、目いっぱい広がる。Expandedっていうプロパティらしい。真ん中のは Flexible. （意味は忘れた）

・List の行のスタイルとしてListTileを突っ込む

こんな感じでリストタイルをあてがうよ。

今回はサブタイトルを使わないので、消しとく

こうなる

リストの右側のアロー ( >)が気に入らんので変えたいと思っていたところ、右下の Leading/Trailing Icon Propeties をいじる。デフォでは Arrow Forwards が設定されているので、これを消して、今回は Leading にハンバーガーアイコン🍔を使う。（アディダスみたいな三本線のアレ）

Leading Icon の none のところを押すとアイコンが変わるので、dehaze ってやつが三本線のやつなので選ぶ

こうなりました。

・アイコンの変更と、TodoテキストフィールドのLabel調整

こんな感じ。Icon Properties でサイズやアイコンの見た目を変える。なんとなく Android 君にしてみた。

基本材料はここまで。あとでActionを足してく。

＊おまけ
Childのパーツ (Widget) は右の [+] アイコンのやつを使うとハメやすいよ。知らなくてドラドロで移動してた。。orz そんな奴いないか。。

2.App State の用意

Todoを入れる箱となる変数 (App State) を用意しましょう。
おなじみの左の [App Values] -> 右上の[+Add App State Variable] ボタンをクリックして変数を作る

以下のように作ってみましょう
・Field Name :適当
・Data Type : String 
・Is List : Onにする（Todoはたくさんあるからね）
・Persisted : On にする (アプリ内でずっと使いまわしたいので）

3.ボタンを押すとTodoが保存されるようにアクションを作る

TexiField に文字を入れて、Androidボタンを押すと 2. の List に保存するようなアクションを作ってみましょう

例によって、Androidくんボタンを選んで、→みたいなアイコン を推すとアクションが定義できる。[+Add Action] 行ってみましょう。

[State Management] -> [Updte App State] と選択 

で。Add Fieldして

さっき作った変数を選ぶじゃろ

Select Update Typeで

Add To List を推すとリストに入るンゴ

で、どのリストに突っ込むかを設定しなきゃいけないので「Value to Add」の横にあるオレンジのスライダーボタンを押すじゃろ

[App State] を推すと候補のリストが出てくるので、さっき作った [todoAll] が出てくる。 

で、今度はどのデータをリストに入れるか指定する必要があるので、Available Options で [List Contains Item] をチェック

んで、どこから持ってくるのか？を指示するが、TextFieldにして、ボタンの横のフィールドに入れた値を突っ込むように指示する。

オレンジのUNSETをクリック

このValue to Addにちゃんとテキストフィールドを選ばないと、True  / FalseのBooleanが入っていってしまうので注意。

こうなってしまうので注意・

これで入力した値が変数に入っていくようになりました！
ここまでできた方は FlutterFlow におけるデータ保存を完全に理解しました🤗

4.保存された Todo を List View に反映する

次のセクションで最後に、リストビューのリストタイルに変数の値を表示するような実装をします。

4-1.リストビューにまずは リストの App State をバインド

リストビューを選んだ状態で（Listタイルではなく！）左から4番目のソラマメみたいなアイコンを選び、以下のようにする

・Variable Name：適当
・Value：以下のように設定して、App Stateを選ぶ

オレンジのConfirmボタンを押すと以下のメッセージが出るが、そのままOKにする。Childのウィジェットの見た目を設定しろ？って書いてあるようだけどそれは次やる。

4-2.リストビューの各行のデータを App State のリストから引っこ抜く

タイルをえらび、[Title] - [Text] のところのオレンジ色のスライダーを押す。

で、いつも通りAppStateから todoList のリストを選択し

・Available Option : List Contains Item
・Tt : UNSET -> [<先ほど4-1.で作ったVariable Name> Item] を選ぶ。
たとえば 下だとtodoListBind Item というのを選ぶ。これがわかりにくい。

あとはそのまま Confirm 2つ推す。

ここまででいったんテストしてみましょう

こんな具合でTextfieldに書いたTodoがリストに表示されていれば成功。

5.Todo を削除できるようにする

データ消せないとたまっていく一方なので、削除もできるようにする。
よくあるリストをスライドするとゴミバコに捨てられるようにしましょう
ListTileのウィジェットから [Slidable Propeties] のトグルをオンにしてみる

で、Add Action

Shareアイコンが出てくるので、🚮に変えましょうか。

Shareボタンを押して好きな奴に

まあこれはUIパーツなので細かいのは好きに設定しましょう

で、スライド時に出るアイコンを押したらリストからデータを消せるようにしよう

で、またUpdate App State しよう

いつも通り、リストの変数を選び、[Select Update Type] には

Remove From Listにする

で、Value To Removeを、例によって先の 4-1 で定義した変数のアイテムを選ぶとする。

これで消せるようになるはず。
テストする

今値がおかしいのだけど、、スライドすると消すアイコンが出る。
押してみる

一行減りました！

というわけで、おわり。

[終わってのお気持ち]
思ったよりシンプル。慣れてきただけ？
普通の flutter とか kotlin とかと比べると、ListViewで選択した行を編集する的なアクションが作りやすいような気がする。