theme_switcher_dialog.dart

Go to the documentation of this file.

import 'package:connect/core/localization/app_localizations.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:hugeicons/hugeicons.dart';
 
import '../../logic/theme_cubit/theme_cubit.dart';
 
class ThemeSwitcherDialog extends StatelessWidget {
  const ThemeSwitcherDialog({super.key});
 
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<ThemeModeBloc, ThemeModeState>(
      builder: (context, state) {
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            Column(
              children: [
                _buildThemeModeEnablerButton(
                  label: AppLocalizations.of(context).translate('Light'),
                  icon: HugeIcons.strokeRoundedSun01,
                  isActive: state.themeMode == ThemeMode.light,
                  context: context,
                  isEnabled: true,
                  onPressed: () {
                    context
                        .read<ThemeModeBloc>()
                        .add(const ChangeThemeMode(ThemeMode.light));
                  },
                ),
                SizedBox(height: 8.sp),
                _buildThemeModeEnablerButton(
                  label: AppLocalizations.of(context).translate('Dark'),
                  icon: HugeIcons.strokeRoundedMoon02,
                  isActive: state.themeMode == ThemeMode.dark,
                  context: context,
                  isEnabled: true,
                  onPressed: () {
                    context
                        .read<ThemeModeBloc>()
                        .add(const ChangeThemeMode(ThemeMode.dark));
                  },
                ),
                SizedBox(height: 8.sp),
                _buildThemeModeEnablerButton(
                  label: AppLocalizations.of(context).translate('System'),
                  icon: HugeIcons.strokeRoundedSettings03,
                  isActive: state.themeMode == ThemeMode.system,
                  context: context,
                  isEnabled: true,
                  onPressed: () {
                    context
                        .read<ThemeModeBloc>()
                        .add(const ChangeThemeMode(ThemeMode.system));
                  },
                ),
              ],
            ),
          ],
        );
      },
    );
  }
 
  Widget _buildThemeModeEnablerButton({
    required String label,
    required IconData icon,
    required bool isActive,
    required BuildContext context,
    required bool isEnabled,
    required VoidCallback onPressed,
  }) {
    return Opacity(
      opacity: isEnabled ? .9 : .2,
      child: ElevatedButton(
        onPressed: isEnabled ? onPressed : null,
        style: ElevatedButton.styleFrom(
          backgroundColor: Theme.of(context).colorScheme.surface,
          overlayColor: Theme.of(context).primaryColor.withOpacity(0.11),
          padding: EdgeInsets.all(15.sp),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8.sp),
          ),
          elevation: 0,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              children: [
                Icon(
                  icon,
                  color: Theme.of(context).colorScheme.onSurface,
                  size: 20.sp,
                ),
                SizedBox(width: 15.sp),
                Text(
                  label,
                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                        color: Theme.of(context).colorScheme.onSurface,
                      ),
                ),
              ],
            ),
            CupertinoSwitch(
              value: isActive,
              onChanged: (value) => onPressed(),
              activeColor: Theme.of(context).colorScheme.primary,
            ),
          ],
        ),
      ),
    );
  }
}
 
// Example of how to show the dialog
void showThemeSwitcher(BuildContext context) {
  showDialog(
    context: context,
    builder: (context) => Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12.sp),
      ),
      child: Padding(
        padding: EdgeInsets.all(16.sp),
        child: const ThemeSwitcherDialog(),
      ),
    ),
  );
}