Reputation: 1
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
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