Flutter Bloc Pattern with PageView builder skips RadioListTile selection

Question

Creating PageView that suggests, set of suggestions, like set 1 show (Banana, that suggests['fruits', 'vegetables'], the second Potato suggests ['vegetables' or could be different]). Its implemented with the right/left slide, which suggests banana at a single screen if slide left it suggests potato.

Issue: the radio is not getting selected. In case if I move to-fro, the radio button list reflects the selected value, not at the moment it is selected

Widget



  @override
  Widget build(BuildContext context) {
    final GlobalBloc _globalBloc = Provider.of<GlobalBloc>(context);
    _globalBloc.suggestionBloc.fetchRecords();
    PageController controller = PageController();
    return Scaffold(
      appBar: AppBar(
        titleSpacing: 0,
        title: Text("Songs Suggestion"),
        elevation: 1,
        backgroundColor: Theme.of(context).accentColor,
        actions: <Widget>[
          IconButton(icon: const Icon(Icons.refresh), tooltip: 'Refresh', onPressed: () => {}),
        ],
      ),
      body: StreamBuilder<List<SuggestionTagSong>>(
        stream: _globalBloc.suggestionBloc.recordTagToSong$,
        builder: (BuildContext context, AsyncSnapshot<List<SuggestionTagSong>> snapshot) {
          if (!snapshot.hasData) return LoadingWidget();
          final List<SuggestionTagSong> recordList = snapshot.data;
          if (recordList.length == 0) return EmptyScreenV2();
          return PageView.builder(
            key: PageStorageKey<String>("tags-song"),
            controller: controller,
            pageSnapping: false,
            physics: PageScrollPhysics(),
            itemCount: recordList.length,
            itemBuilder: (context, index) {
              return Container(
                child: Column(
                  children: [
                    Expanded(
                      child: recordList[index].songSuggestion.length == 0
                          ? Container(child: EmptyScreenV2())
                          : ListView.builder(
                              itemCount: recordList[index].songSuggestion.length,
                              itemBuilder: (BuildContext context, int i) {
                                return Container(
                                  child: RadioListTile(
                                    groupValue: _globalBloc.suggestionBloc.selectedSong$.value,
                                    title: Text(recordList[index].songSuggestion[i].name),
                                    activeColor: Theme.of(context).primaryColor,
                                    value: recordList[index].songSuggestion[i].id,
                                    onChanged: (String val) => _globalBloc.suggestionBloc.selectSong(val),
                                  ),
                                );
                              },
                            ),
                    ),
                  ],
                ),
              );
            },
          );
        },
      ),
    );
  }

Sample Bloc Class

class SuggestionBloc {
  BehaviorSubject<String> _selectedSong$;

  BehaviorSubject<String> get selectedSong$ => _selectedSong$;


  selectSong(String recordId) {
    _selectedSong$.add(recordId);
    print("----");
    print(_selectedSong$.value == recordId);
    print(_selectedSong$.value);
    print(recordId);
  }
}

score 0 · Answer 1 · answered Aug 12 '21 at 07:58

here is the solution for your problem :-

You need to wrap RadioListTile with StatefulBuilder
Then use setState((){}) on onChanged method in RadioListTile
Last wrap entire PageView child with KeepAlivePage custom widget

For KeepAlivePage custom widget, please check this post -> Losing widget state when switching pages in a Flutter PageView

Code for reference to use StatefulBuilder:

StatefulBuilder(
   builder: (context, setState) {
     return Container(
         child: RadioListTile(
              groupValue: _globalBloc.suggestionBloc.selectedSong$.value,
              title: Text(recordList[index].songSuggestion[i].name),
              activeColor: Theme.of(context).primaryColor,
              value: recordList[index].songSuggestion[i].id,
              onChanged: (String val) {
                 setState(() => _globalBloc.suggestionBloc.selectSong(val))
             },
           ),
         );
       },
),

Flutter Bloc Pattern with PageView builder skips RadioListTile selection

1 Answers1