Max
Max

Reputation: 1301

Why are the buttons not switching?

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 ​​in SharedPreferences for each button, store true or false. When I open the page, I get data about these buttons and display the button I chose and saved in purple. But I ran into an error, I can't switch to another button, I always have one selected and it doesn't change. What could be the problem?

enum VoltageMode {
  ac,
  dc,
  all,
}


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) {
                if (stateFilter.mapFilter.voltagePowerAC) selectedMode = VoltageMode.ac;
                if (stateFilter.mapFilter.voltagePowerDC) selectedMode = VoltageMode.dc;
                if (stateFilter.mapFilter.voltagePowerAll) selectedMode = VoltageMode.all;

                    return 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: () {
                                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),
      );

enter image description here

Upvotes: 0

Views: 46

Answers (1)

Jilmar Xa
Jilmar Xa

Reputation: 206

If you use setState the Bloc logic runs again because is part of the build method so you always get the same button selection. Use StatefulBuilder to rebuild the buttons without run that code each time. Hope that helps..

..
return StafulBuilder(
  builder: (BuildContext context, StateSetter setState) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 21),
      ..
    );
  }
)

Upvotes: 1

Related Questions