How to display the saved state of a button when the page opens?

Question

I have three buttons. The maximum that I can select (activate) is only one button. When switching buttons, I have activated should be true, and not activated - false. I write these values ​​to SharedPreferences for each button, store true or false. When I open the pages all the buttons are gray out (they are not selected). I need to save the button state that it was selected and display it when the page is opened. For example, I just need if the variable isVoltageAC = true, then the AC button will immediately turn purple when the page is opened. How to do it?

enum VoltageMode {
  ac,
  dc,
  all,
}
class FilterDialog extends StatefulWidget {
  const FilterDialog({
    Key? key,
  }) : super(key: key);

  @override
  State<FilterDialog> createState() => _FilterDialogState();
}

class _FilterDialogState extends State<FilterDialog> {
  VoltageMode? selectedMode;

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<MapPreferencesCubit, MapPreferencesState>(
      builder: (context, statePreferences) {
        final MapPreferencesCubit mapPreferencesCubit =
            BlocProvider.of<MapPreferencesCubit>(context);
        if (statePreferences is MapPreferencesInitial) {
          mapPreferencesCubit.getPreferences();
        }

        if (statePreferences is MapPreferencesLoaded) {
          return BlocBuilder<MapfilterCubit, MapFilterState>(
            builder: (context, stateFilter) {
              final MapfilterCubit mapFilterCubit =
                  BlocProvider.of<MapfilterCubit>(context);
              if (stateFilter is MapFilterInitial) {
                mapFilterCubit.getFilter();
              }
if (stateFilter is MapFilterLoaded) {
                bool isVoltageAC = stateFilter.mapFilter.voltagePowerAC;
                bool isVoltageDC = stateFilter.mapFilter.voltagePowerDC;
                bool isVoltageAll = stateFilter.mapFilter.voltagePowerAll;
                return SingleChildScrollView(
                  child: Dialog(
                    insetPadding: const EdgeInsets.only(
                        top: 121, left: 24, right: 24, bottom: 60),
                    child: Container(
                      decoration: const BoxDecoration(
                        color: constants.Colors.greyDark,
                        borderRadius: BorderRadius.all(Radius.circular(24)),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.fromLTRB(0, 26, 0, 24),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [,
                            Padding(
                              padding:
                                  const EdgeInsets.symmetric(horizontal: 21),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  GestureDetector(
                                    onTap: () => setState(() {
                                      selectedMode = VoltageMode.ac;
                                    }),
                                    child: _buttonVoltage(
                                        'AC', selectedMode == VoltageMode.ac),
                                  ),
                                  const SizedBox(width: 16),
                                  GestureDetector(
                                    onTap: () => setState(() {
                                      selectedMode = VoltageMode.dc
                                    }),
                                    child: _buttonVoltage(
                                        'DC', selectedMode == VoltageMode.dc),
                                  ),
                                  const SizedBox(width: 16),
                                  GestureDetector(
                                    onTap: () => setState(() {
                                      selectedMode = VoltageMode.all;
                                    }),
                                    child: _buttonVoltage(
                                        'All', selectedMode == VoltageMode.all),
                                  ),
                                ],
                              ),
                            ),
                            Padding(
                              padding:
                                  const EdgeInsets.symmetric(horizontal: 21),
                              child: DefaultButtonGlow(
                                  text: 'Done',
                                  onPressed: () {
                                    Navigator.pop(context);;
                                    mapFilterCubit
                                        .setFilter(
                                      MapFilter(
                                        voltagePowerAC:
                                            selectedMode == VoltageMode.ac,
                                        voltagePowerDC:
                                            selectedMode == VoltageMode.dc,
                                        voltagePowerAll:
                                            selectedMode == VoltageMode.all,
                                      ),
                                    )
                                  },
                            ),

Widget _buttonVoltage(String nameButton, bool isActive) => Container(
        padding: const EdgeInsets.symmetric(vertical: 11),
        height: 40,
        width: 87,
        decoration: BoxDecoration(
          color: isActive
              ? constants.Colors.purpleMain
              : constants.Colors.white.withOpacity(0.15),
          borderRadius: BorderRadius.circular(20),
          border: Border.all(
            color: isActive ? Colors.transparent : constants.Colors.greyDark,
          ),
          boxShadow: [
            BoxShadow(
                color: isActive
                    ? constants.Colors.purpleMain.withOpacity(0.34)
                    : Colors.transparent,
                blurRadius: 10,
                spreadRadius: 2,
                offset: const Offset(0.0, 1.0)),
          ],
        ),
        alignment: Alignment.center,
        child:
            Text(nameButton, style: constants.Styles.smallBoldTextStyleWhite),
      );

cubit

Future setFilter(MapFilter mapFilter) async {
    await _repository.setFilter(mapFilter: mapFilter);
    final MapFilter? filter = await _repository.getFilter();
    emit(MapFilterLoaded(filter!));
    return filter;}

sharedpreferences

Future setFilter({required MapFilter mapFilter}) async {
    final SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setString(_filterName, jsonEncode(mapFilter.toJson()));
  }

Answer 1

you can read this values from SharedPreferences in initState of page. In this way your default value is ready when page loaded.

then make everything after SingleChildScrollView in separate widget like this:

Widget _buildBody(){
return SingleChildScrollView(
     child: Dialog(
       ...
      ),
   );
}

and pass this widget in your bloc builder after all if statement by default.

then do this:

void initState() {
    super.initState();
    final SharedPreferences prefs = await SharedPreferences.getInstance();
    var result = prefs.readData(_filterName);
    if (result != null) {
        MapFilter mapFilter = jsonDecode(mapFilter.fromJson(result));
        if (mapFilter.voltagePowerAC){
          selectedMode = VoltageMode.ac;
        }else if (mapFilter.voltagePowerDC){
           selectedMode = VoltageMode.dc;
        } else {
          selectedMode = VoltageMode.all;
        }

      }

}