Q&A
こんにちは。
今、カテゴリ絞り込み検索をポップアップ画面内に作っています。
カテゴリをFilterChipでリストアップさせているのですが、タップしても選択色に変化しなく困っています。
▼アプリバー
_sortPopupで、ポップアップさせるためのボタンを表示しています。
//チップスのモデル class ActorFilterEntry { const ActorFilterEntry(this.name); final String name; } //画面 class GuestSearchAppBar extends StatefulWidget implements PreferredSizeWidget { GuestSearchAppBar({Key key}); Size get preferredSize => Size.fromHeight(Settings().appBarHeight()); _GuestSearchAppBarState createState() => _GuestSearchAppBarState(); } class _GuestSearchAppBarState extends State<GuestSearchAppBar> { bool _alreadyDisposed = false; final _cast = List<ActorFilterEntry>(); bool _fresh = false; //選択したチップスを入れとく箱 final _filters = <String>[]; @override void initState() { super.initState(); setState(() { //チップスの種類 _cast.addAll([ const ActorFilterEntry('タイプA'), const ActorFilterEntry('タイプB'), const ActorFilterEntry('タイプC'), const ActorFilterEntry('タイプD'), const ActorFilterEntry('タイプE'), const ActorFilterEntry('タイプF'), const ActorFilterEntry('タイプG'), ]); }); } @override void setState(Function fn) { if (_alreadyDisposed) return; super.setState(fn); } @override void dispose() { _alreadyDisposed = true; super.dispose(); } @override Widget build(BuildContext context) { return AppBar( centerTitle: true, title: Container( width: 160, padding: EdgeInsets.symmetric(horizontal: Settings().sidePadding()), height: 30, decoration: BoxDecoration( borderRadius: BorderRadius.circular(15), color: Colors.white, ), //ポップアップのボタン child: _sortPopup(setState), ), );
▼ポップアップボタンと、ポップアップ画面
//絞り込み検索ポップアップ Widget _sortPopup(setState) { return GestureDetector( child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Icon( Icons.location_searching, size: 18, color: Colors.black, ), Container( child: Text( '絞り込み検索', style: TextStyle( fontSize: 14, color: Colors.black, ), ), ), ], ), //ポップアップ onTap: () { showDialog( context: context, builder: (BuildContext context) { return StatefulBuilder(builder: (context, setState) { return Material( color: Colors.white, child: Stack( children: [ Column( children: [ AppBar( leading: IconButton( icon: Icon( Icons.close, color: Colors.white, ), onPressed: () => Navigator.of(context).pop(), ), title: Text('絞り込み検索'), ), SpaceBox(height: 10.0), Container( padding: EdgeInsets.symmetric( horizontal: Settings().sidePadding()), child: Row( mainAxisAlignment: MainAxisAlignment.start, children: [ Text('スタッフ一覧'), ], ), ), SpaceBox(height: 12.0), Container( padding: const EdgeInsets.symmetric(horizontal: 0), child: Wrap( //ここでチップスを一覧で出す children: actorWidgets.toList(), ), ) ], ), Positioned( bottom: 0, right: 0, left: 0, child: SizedBox( height: 52.0, child: FlatButton( color: myTheme.accentColor, child: Text( 'この条件で検索する', style: TextStyle( fontWeight: FontWeight.bold, color: Colors.white), ), onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) => SearchCastResult(), ), ); }, ))) ], ), ); }); }).then((value) => setState(() {})); }, ); }
▼チップスを一覧で出す
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: _filters.contains(actor.name) ? Colors.transparent : Colors.grey[400], width: 1.0, ), ), label: Text(actor.name, style: _filters.contains(actor.name) == true ? TextStyle(color: Colors.white) : TextStyle(color: Colors.black87)), selectedColor: Colors.pink[100], selected: _filters.contains(actor.name), onSelected: (context) { setState(() { if (context && _filters.length <= 4 && _filters.contains(actor.name) == false) { _filters.add(actor.name); print(_filters.contains(actor.name)); } else { _filters.removeWhere((String name) { return name == actor.name; }); } }); }, ), ); } }
理想は、どれかのチップをタップすると、そのチップの色が変化するというのが理想です。
実はタップしたチップを入れておく変数(配列)には、タップした瞬間にprintを走らせたところ、ちゃんと配列に入っているっぽく、機能はしているみたいです。
しかし、色だけが変わらず、ポップアップを閉じて再度開いてから初めて、選択した色が変わっているという状況です。
この場合、何が原因で、どのように対処したら良いのでしょうか？不足している情報があればお申し付けください。
よろしくお願いいたします。
あなたの回答
tips
プレビュー
