Abdalrahman Wael
Abdalrahman Wael

Reputation: 1

I can't switch states flutter cubit

Trying to swap themes using cubit added print statements to the bottom and the cubit function it calles and it seems to work but the pring statment in the bloc provider in the main file only prints once so I guess thats the problem IDK how do I swap states

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => AppCubit(),
      child: BlocConsumer<AppCubit, AppStates>(
        listener: (context, state) {

        },
        builder: (context, state) {
          print('staring application with ${AppCubit.get(context).currentTheme}');
          return MaterialApp(
            title: 'Flutter Demo',
            theme: AppCubit.get(context).currentTheme,

            home: Home(),
          );
        },
      ),
    );
  }

Here is the cubit function

void changeTheme(){
      if(currentTheme==darkTheme){
        print("Switching to light");
        currentTheme=lightTheme;
        emit(ChangeThemeState());
      }else{
        print("Switching to Dark");
        currentTheme=darkTheme;
        emit(ChangeThemeState());
      }

  }

Here is the bottom in the screen itself

 return BlocProvider(
      create: (context) => AppCubit(),
      child: BlocConsumer<AppCubit, AppStates>(
        listener: (context, state) {},
        builder: (context, state) {
          return Scaffold(
            appBar: AppBar(
              actions: [
                IconButton(
                  onPressed: () {
                        AppCubit.get(context).changeTheme();

                  },

Upvotes: 0

Views: 30

Answers (1)

Naser Ebedo
Naser Ebedo

Reputation: 297

You can use as following code to toggle between dark theme and light theme.

theme_state.dart

part of 'theme_cubit.dart';

class ThemeState extends Equatable {
  const ThemeState({required this.isDarkTheme});

  final bool isDarkTheme;

  ThemeState copyWith({bool? isDarkTheme}) {
    return ThemeState(isDarkTheme: isDarkTheme ?? this.isDarkTheme);
  }

  @override
  List<Object?> get props => [isDarkTheme];
}

theme_cubit.dart

import 'package:equatable/equatable.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

part 'theme_state.dart';

class ThemeCubit extends Cubit<ThemeState> {
  ThemeCubit() : super(const ThemeState(
    isDarkTheme: false,
  ));

  void toggleTheme() {
    if (state.isDarkTheme) {
      emit(state.copyWith(isDarkTheme: false));
    } else {
      emit(state.copyWith(isDarkTheme: true));
    }
  }
}

main.dart

// Packages
import '/theme_cubit.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

void main() {

  runApp(
    MultiBlocProvider(
      providers: [
        BlocProvider(create: (context) => ThemeCubit()),
      ],
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<ThemeCubit, ThemeState>(
      builder: (context, state) {
        return MaterialApp(
          themeMode: state.isDarkTheme ? ThemeMode.dark : ThemeMode.light,
          theme: ThemeData(),
          darkTheme: ThemeData(),
          home: Scaffold(
            backgroundColor: state.isDarkTheme ? Colors.black : Colors.white,
            body: SizedBox(
              width: double.infinity,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  TextButton(
                    onPressed: () => context.read<ThemeCubit>().toggleTheme(),
                    child: Text(
                      "Toggle Theme",
                      style: TextStyle(color: state.isDarkTheme ? Colors.white : Colors.purple),
                    ),
                  ),
                  Container(
                    width: 200,
                    height: 200,
                    color: state.isDarkTheme ? Colors.green.shade200 : Colors.purple.shade200,
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

Upvotes: 0

Related Questions