Flutterアプリ開発講座　UI基礎編　その８

８｜Todoタスク完了処理を書いてみよう

Todoの情報をクラス内で使用できるように変数として管理する。（インスタンス変数）
以下のように、String型が入る配列todoItemsを定義します。

class _MyHomePageState extends State<MyHomePage> {
  List<String> todoItems = ['ボールペンを買う', '本を読む', '電話をする'];

  @override
  Widget build(BuildContext context) {
    ...
  }

そうしたら、今作ったインスタンス変数の情報からListViewの中身を作ります。
todoItems.lengthで配列の要素の数を、todoItems[index]でindex番目の要素を取得できます。

child: ListView.builder(
    itemCount: todoItems.length,
    itemBuilder: (context, index) {
      return ListTile(
        title: Text(todoItems[index]),
        leading: Radio<bool?>(value: false, groupValue: null, onChanged: null),
      );
    },
  ),

変更後: 配列todoItemsの情報からリストが作られているはずです👇

では次に、「ボタンをクリックした時の処理」を担当するメソッドを用意します。
このメソッドは「配列の何番目がクリックされたのか」というint型の情報を必要とします。
やりたいことは、「配列todoItemsのタップされた行番目の要素の削除」です。
以下のように書きます。

void clickDone(int index) {
    todoItems.removeAt(index);
  }
}

これは、
「戻り値なしのメソッドclickDoneを定義した。引数としてint型の値を要求し、それをindexと呼ぶ。」
という意味です。

次に、今設定したclickDoneをRadioボタンのonChangedプロパティに設定しましょう。こうすることで、RadioボタンがタップされたタイミングでclickDoneが発動するようになります。
onChangedには、bool?型の引数を要求する関数が求められています。（これはRadioの上でcommand+カーソルでわかる）
今回は、bool?型の引数を要求する名前のない関数を渡してしまって、その関数の中でclickDoneを呼び出します。
これはindexをclickDoneに渡すためです。indexは本来ListView.builderの中でしか使えないのでこのような書き方をする必要があります。

👇まずonChangedにbool?型の引数を要求する無名関数を渡しておく

leading: Radio<bool?>(
    value: false,
    groupValue: null,
    onChanged: (bool? value) {},
  ),

👇そして無名関数の中でclickDoneを呼び出して、引数としてindexを渡してあげる。

leading: Radio<bool?>(
    value: false,
    groupValue: null,
    onChanged: (bool? value) {
      clickDone(index);
    },
  ),

最後に画面の更新をするためにsetStateを追加しましょう。

void clickDone(int index) {
    setState(() {
      todoItems.removeAt(index);
    });
  }

変更後: ラジオボタンタップでリストから消えるはずです👇