FlutterのFilterChipで、選択時のボーダー色を変更したい

Question

こんにちは。
今回FlutterのFilterChipを使って、複数のカテゴリ選択エリアを作っています。
選択カテゴリだけ、ボーダーの色を変えたいのですが、現状上手くいかず。。

下記コードでは、カテゴリのボーダー色をselectedBorderColorという変数に渡していて、タップで選択されたらそのカテゴリのselectedBorderColorだけ別の色を代入するイメージで書いています。

しかし現状だと、どれかを選択したら、全てのカテゴリのボーダー色が変わってしまいます。

class ActorFilterEntry {
  const ActorFilterEntry(this.name);
  final String name;
}

class SearchCast2 extends StatefulWidget {
  @override
  _SearchCast2State createState() => _SearchCast2State();
}

class _SearchCast2State extends State<SearchCast2> {
  //カテゴリチップス
  final List<ActorFilterEntry> _cast = <ActorFilterEntry>[
    const ActorFilterEntry('AAA'),
    const ActorFilterEntry('BBB'),
    const ActorFilterEntry('CCC'),
    const ActorFilterEntry('DDD'),
    const ActorFilterEntry('EEE'),
    const ActorFilterEntry('FFF'),
  ];
  List<String> _filters = <String>[];

  //選択時のボーダー色
  var selectedBorderColor = Colors.grey[400];

  //チップスの設定
  Iterable<Widget> get actorWidgets sync* {
    for (final ActorFilterEntry actor in _cast) {
      yield Container(
        padding: const EdgeInsets.symmetric(horizontal: 4.0),
        child: FilterChip(
          showCheckmark: false,
          checkmarkColor: Colors.transparent,
          backgroundColor: Colors.transparent,
          shape: StadiumBorder(
            side: BorderSide(
              color: selectedBorderColor,
              width: 1.0,
            ),
          ),
          label: Text(actor.name),
          selectedColor: Colors.amber,
          selected: _filters.contains(actor.name),
          onSelected: (bool value) {
            setState(() {
              //選択されたらselectedBorderColorの値を変更(しかし全てのカテゴリに適用されてしまう)
              if (value) {
                _filters.add(actor.name);
                this.selectedBorderColor = Colors.transparent;
              } else {
                _filters.removeWhere((String name) {
                  return name == actor.name;
                });
                this.selectedBorderColor = Colors.grey[400];
              }
            });
          },
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(Settings().appBarHeight()),
          child: AppBar(
            leading: FlatButton(
              child: Icon(Icons.arrow_back_ios),
              onPressed: () => Navigator.of(context).pop(),
            ),
            backgroundColor: Color(Settings().appBarColor()),
          ),
        ),
        body: Container(
          padding: EdgeInsets.symmetric(
              horizontal: Settings().sidePadding(), vertical: 20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SpaceBox.height(7),
　　　　　　　//ここでチップスを出力
              Wrap(
                children: actorWidgets.toList(),
              ),
              FlatButton(
                height: 42.0,
                minWidth: double.infinity,
                color: Colors.amber,
                child: Text(
                  '次に進む(2/5)',
                  style: TextStyle(
                      fontWeight: FontWeight.bold, color: Colors.white),
                ),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => SearchCast3(),
                    ),
                  );
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

どのようにすれば実現できますでしょうか？
どうか、よろしくお願いいたします。

Answer 1

これで試してみてください。

child: FilterChip(
  shape: StadiumBorder(
    side: BorderSide(
      color: _filters.contains(actor.name)
        ? Colors.transparent
        : Colors.grey[400],
      width: 1.0,
    ),
  ),

Comments

[Yariii]

ありがとうございます。
こちらで上手く反映されました！