Flutter:Listtileが選択状態(selectedがtrue)にならない

Question

FlutterのListViewで選択した項目の色を変えたいです。
調べたコードのコピペで書いたのですが、上手くいきません。

onTapで_selectedIndex =indexにし、
そのタイルのselectedを_selectedIndex == indexでtrueにする、というコードと理解しているのですが、色が変わりません。

selected:を直接trueにすると全タイルが選択色に変わることは確認できました。
print("$_selectedIndex"+"$index");で、数字が一致することも確認しています。

どこがおかしいのか、指摘いただけると幸いです。

class RecipeAdd extends StatefulWidget {
  const RecipeAdd({Key? key}) : super(key: key);
  @override
  State<RecipeAdd> createState() => _RecipeAddState();

}
var _list =["a","b","c"];
String _addMenu ='';

class _RecipeAddState extends State<RecipeAdd> {
  @override
  Widget build(BuildContext context) {
    var addSite = ModalRoute.of(context)?.settings.arguments;
    int _selectedIndex = -1;
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            SizedBox( height: 250, width: 300,
              child: ListView.builder(
                itemCount: _list.length,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                      title: Text(_list[index]),
                      onTap: (){
                        setState(() {
                          _addMenu = _list[index];
                          _selectedIndex = index;
                          print("$_selectedIndex"+"$index");
                        });
                        },
                      selected: _selectedIndex == index,
                      selectedTileColor: Colors.pink.withOpacity(0.2),
                    );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

自己解決済みですが。

変数の有効な場所は、その変数の宣言位置により決まっています。
基本的に{}でくくられたブロック内が有効な場所です。

リスト初期のコードでは、_selectedIndexはWidget build(BuildContext context)というメソッド内でのみの有効です。そのためこの関数から抜けたら利用できなくなり、またこの関数にはいったら毎回初期化されます。
onTapで値を変更しても、buildが呼び出されたらまた-1に設定しなおされてしまうというわけです。
もしかしたらbuild内でしか有効な場所でしかない_selectedIndexがonTapで使えるのかという疑問も出てくるとは思うのですが、Dartのオブジェクト管理的なもので、onTapもう少し具体的に言うとsetStateの匿名関数が破棄されるまで利用可能になってしまっています。

修正後のコードは、クラスのメンバー変数という関係になり、このオブジェクトが生きてる間保持され続けます。
そのため、onTapで値を変更し、再度buildが呼び出されても、onTapで変更した値が保持されています。

ただ修正後の方も、その上位RecipeAddが再作成されてしまうと、_RecipeAddStateも再作成されるので、_selectedIndexは-1で初期化されます。

Comments

[nugio.kutusita]

ありがとうございました。
初歩的な話で申し訳ありませんが、　
勉強になりました。

Answer 2

各変数をwidgetに表示させて変化を見てみると、
_selectedIndexの値が-1に固定されているような挙動を示していました。

int _selectedIndex = -1;
の位置を、

@override
Widget build(BuildContext context) {
int _selectedIndex = -1;
のではなく、
class _RecipeAddState extends State<RecipeAdd> {
int _selectedIndex = -1;
@override
Widget build(BuildContext context) {

としたら解決しました。

どうしてこうなるのか、いまひとつ理解できませんので、
どなたか引き続きご教授いただけると幸いです。

Setstateを走らせた際、
Widget build(BuildContext context) {　
が走るため、_selectedIndexが-1に戻ってしまっていた、
という理解であっていますか？