'how i can add multiple themes in flutter?
i'm new in flutter space 'just 3 weeks from first code i wrote' and wanna to help in this issue, i develop an application with multiple themes 'just colors' and i want to get it in settings page like this: this is the page:
so when the colors containers pressed, it's should to change the colors of whole app to selected pattern....
is there any way to get this functionality?
the whole code of the page:
import 'package:flutter/material.dart';
import 'package:fonapp_be/modals/colors.dart';
import 'package:fonapp_be/provider/theme_provider.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:animated_theme_switcher/animated_theme_switcher.dart';
class ColorsPage extends StatefulWidget {
ColorsPage({ Key? key }) : super(key: key);
@override
State<ColorsPage> createState() => _ColorsPageState();
}
class _ColorsPageState extends State<ColorsPage> {
bool whiteMode = true;
bool darkMode = false;
bool whitePurple = false;
bool whiteRed = false;
bool darkBlue = false;
bool darkYellow = false;
bool darkPink = false;
bool whiteBlue = false;
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: backgroundColor,
appBar: AppBar(
automaticallyImplyLeading: false,
actions: [
GestureDetector(
onTap: () => Navigator.of(context).pop(),
child: const Icon(Icons.arrow_forward_ios_outlined,
size: 30,
color: knights),
),
const SizedBox(width: 20),
],
elevation: 0.0,
toolbarHeight: 70,
backgroundColor: Colors.transparent,
centerTitle: true,
title: Column(
children: const [
SizedBox(height: 10),
Text('الإعدادات',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Almarai',
fontSize: 20,
fontWeight: FontWeight.bold,
color: knights,
),
),
SizedBox(height: 10),
Text('ألوان العرض',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Almarai',
fontSize: 15,
fontWeight: FontWeight.w300,
color: knights,
),
),
],
),
),
body: Container(
margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
child: Column(
children: [
const SizedBox(height: 30),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children:
const [Text(
'أختر التنسيق الإفتراضي',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Almarai',
fontWeight: FontWeight.w400,
fontSize: 15,
color: knights
),
),
],
),
const SizedBox(height: 30),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
GestureDetector(
onTap: () {
setState(() {
darkMode = !darkMode;
});
},
child: Column(
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: knights,
),
child: Row(
children: [
Container(
height: 40,
width: 60,
decoration: BoxDecoration(
color: const Color.fromARGB(255, 29, 29, 29),
borderRadius: BorderRadius.circular(20),
),
),
const SizedBox(width: 10),
Container(
height: 40,
width: 60,
decoration: BoxDecoration(
color: const Color.fromARGB(255, 90, 90, 90),
borderRadius: BorderRadius.circular(20),
),
),
],
),
),
const SizedBox(height: 10,),
const Text('الوضع الداكن',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Almarai',
fontSize: 14,
fontWeight: FontWeight.w200,
color: knights
),
),
],
),
),
GestureDetector(
onTap: () {
setState(() {
whiteMode = !whiteMode;
});
},
child: Column(
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: darkContainer,
),
child: Row(
children: [
Container(
height: 40,
width: 60,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(20),
),
),
const SizedBox(width: 10),
Container(
height: 40,
width: 60,
decoration: BoxDecoration(
color: const Color.fromARGB(255, 238, 238, 238),
borderRadius: BorderRadius.circular(20),
),
),
],
),
),
const SizedBox(height: 10,),
const Text('الوضع العادي',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Almarai',
fontSize: 14,
fontWeight: FontWeight.w200,
color: knights
),
),
],
),
),
],
),
const SizedBox(height: 40),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
GestureDetector(
onTap: (){
setState(() {
whiteRed = !whiteRed;
});
},
child: Column(
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: knights,
),
child: Row(
children: [
Container(
height: 40,
width: 60,
decoration: BoxDecoration(
color: const Color(0xffff003c),
borderRadius: BorderRadius.circular(20),
),
),
const SizedBox(width: 10),
Container(
height: 40,
width: 60,
decoration: BoxDecoration(
color: const Color.fromARGB(255, 255, 255, 255),
borderRadius: BorderRadius.circular(20),
),
),
],
),
),
const SizedBox(height: 10,),
const Text('أحمر I أبيض',
textAlign: TextAlign.center,
style: const TextStyle(
fontFamily: 'Almarai',
fontSize: 14,
fontWeight: FontWeight.w200,
color: knights
),
),
],
),
),
GestureDetector(
onTap: (){
setState(() {
whitePurple = !whitePurple;
});
},
child: Column(
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: knights,
),
child: Row(
children: [
Container(
height: 40,
width: 60,
decoration: BoxDecoration(
color: const Color(0xff4801ff),
borderRadius: BorderRadius.circular(20),
),
),
const SizedBox(width: 10),
Container(
height: 40,
width: 60,
decoration: BoxDecoration(
color: const Color.fromARGB(255, 255, 255, 255),
borderRadius: BorderRadius.circular(20),
),
),
],
),
),
const SizedBox(height: 10,),
const Text('بنفسجي I أبيض',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Almarai',
fontSize: 14,
fontWeight: FontWeight.w200,
color: knights
),
),
],
),
),
],
),
const SizedBox(height: 40),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
GestureDetector(
onTap: (){
setState(() {
darkYellow = !darkYellow;
});
},
child: Column(
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: knights,
),
child: Row(
children: [
Container(
height: 40,
width: 60,
decoration: BoxDecoration(
color: const Color(0xffffea01),
borderRadius: BorderRadius.circular(20),
),
),
const SizedBox(width: 10),
Container(
height: 40,
width: 60,
decoration: BoxDecoration(
color: const Color.fromARGB(255, 54, 54, 54),
borderRadius: BorderRadius.circular(20),
),
),
],
),
),
const SizedBox(height: 10,),
const Text('أصفر I أسود',
textAlign: TextAlign.center,
style: const TextStyle(
fontFamily: 'Almarai',
fontSize: 14,
color: knights,
fontWeight: FontWeight.w200,
),
),
],
),
),
GestureDetector(
onTap: (){
setState(() {
darkBlue = !darkBlue;
});
},
child: Column(
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: knights,
),
child: Row(
children: [
Container(
height: 40,
width: 60,
decoration: BoxDecoration(
color: const Color(0xff00ffdf),
borderRadius: BorderRadius.circular(20),
),
),
const SizedBox(width: 10),
Container(
height: 40,
width: 60,
decoration: BoxDecoration(
color: const Color.fromARGB(255, 51, 51, 51),
borderRadius: BorderRadius.circular(20),
),
),
],
),
),
const SizedBox(height: 10,),
const Text('أزرق سماوي I أبيض',
textAlign: TextAlign.center,
style: const TextStyle(
fontFamily: 'Almarai',
fontSize: 14,
fontWeight: FontWeight.w200,
color: knights
),
),
],
),
),
],
),
const SizedBox(height: 40),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
GestureDetector(
onTap: (){
setState(() {
whiteBlue = !whiteBlue;
});
},
child: Column(
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: knights,
),
child: Row(
children: [
Container(
height: 40,
width: 60,
decoration: BoxDecoration(
color: const Color.fromARGB(255, 1, 18, 255),
borderRadius: BorderRadius.circular(20),
),
),
const SizedBox(width: 10),
Container(
height: 40,
width: 60,
decoration: BoxDecoration(
color: const Color.fromARGB(255, 255, 255, 255),
borderRadius: BorderRadius.circular(20),
),
),
],
),
),
const SizedBox(height: 10,),
const Text('أزرق غامق I أسود',
textAlign: TextAlign.center,
style: const TextStyle(
fontFamily: 'Almarai',
fontSize: 14,
fontWeight: FontWeight.w200,
color: knights
),
),
],
),
),
GestureDetector(
onTap: (){
setState(() {
darkPink = !darkPink;
});
},
child: Column(
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: knights,
),
child: Row(
children: [
Container(
height: 40,
width: 60,
decoration: BoxDecoration(
color: const Color.fromARGB(255, 43, 43, 43),
borderRadius: BorderRadius.circular(20),
),
),
const SizedBox(width: 10),
Container(
height: 40,
width: 60,
decoration: BoxDecoration(
color: const Color.fromARGB(255, 255, 0, 234),
borderRadius: BorderRadius.circular(20),
),
),
],
),
),
const SizedBox(height: 10,),
const Text('وردي I أسود',
textAlign: TextAlign.center,
style: const TextStyle(
fontFamily: 'Almarai',
fontSize: 14,
fontWeight: FontWeight.w200,
color: knights
),
),
],
),
),
],
),
],
)
)
);
}
}
class WhiteMode extends ColorsPage{
late Function callback;
static Color knights = const Color.fromARGB(255, 0, 0, 0);
static Color subTitle = const Color.fromARGB(255, 90, 90, 90);
static Color backgroundColor = const Color.fromARGB(255, 240, 240, 240);
static Color darkContainer = const Color.fromARGB(255, 255, 255, 255);
}
class DarkMode extends ColorsPage{
static Color knights = const Color.fromARGB(255, 255, 255, 255);
static Color subTitle = const Color.fromARGB(255, 236, 236, 236);
static Color backgroundColor = const Color.fromARGB(255, 12, 12, 12);
static Color darkContainer = const Color.fromARGB(255, 29, 29, 29);
}
class WhitePurple extends ColorsPage{
static Color knights = const Color.fromARGB(255, 119, 0, 255);
static Color subTitle = const Color.fromARGB(255, 115, 40, 255);
static Color backgroundColor = const Color.fromARGB(255, 240, 240, 240);
static Color darkContainer = const Color.fromARGB(255, 255, 255, 255);
}
class WhiteRed extends ColorsPage{
static Color knights = const Color.fromARGB(255, 255, 0, 64);
static Color subTitle = const Color.fromARGB(255, 146, 1, 37);
static Color backgroundColor = const Color.fromARGB(255, 240, 240, 240);
static Color darkContainer = const Color.fromARGB(255, 255, 255, 255);
}
class DarkBlue extends ColorsPage{
static Color knights = const Color.fromARGB(255, 0, 255, 136);
static Color subTitle = const Color.fromARGB(255, 0, 158, 97);
static Color backgroundColor = const Color.fromARGB(255, 12, 12, 12);
static Color darkContainer = const Color.fromARGB(255, 29, 29, 29);
}
class DarkYellow extends ColorsPage{
static Color knights = const Color.fromARGB(255, 255, 217, 0);
static Color subTitle = const Color.fromARGB(255, 255, 220, 106);
static Color backgroundColor = const Color.fromARGB(255, 12, 12, 12);
static Color darkContainer = const Color.fromARGB(255, 29, 29, 29);
}
class DarkPink extends ColorsPage{
static Color knights = const Color.fromARGB(255, 255, 0, 140);
static Color subTitle = const Color.fromARGB(255, 255, 122, 233);
static Color backgroundColor = const Color.fromARGB(255, 12, 12, 12);
static Color darkContainer = const Color.fromARGB(255, 29, 29, 29);
}
class WhiteBlue extends ColorsPage{
static Color knights = const Color.fromARGB(255, 38, 0, 255);
static Color subTitle = const Color.fromARGB(255, 72, 52, 255);
static Color backgroundColor = const Color.fromARGB(255, 240, 240, 240);
static Color darkContainer = const Color.fromARGB(255, 255, 255, 255);
}
thanks for listening to me!
Solution 1:[1]
To change the theme in your flutter application you need to organize your themeData like this
import 'package:flutter/material.dart';
ThemeData blueTheme = ThemeData(
appBarTheme: AppBarTheme(
color: Color.fromARGB(255, 240, 240, 240),
iconTheme: IconThemeData(color: Color.fromARGB(255, 38, 0, 255))),
backgroundColor: Color.fromARGB(255, 240, 240, 240),
primaryColor: Color.fromARGB(255, 255, 255, 255),
textTheme: TextTheme(
subtitle2: TextStyle(
color: Color.fromARGB(255, 38, 0, 255),
),
),
);
ThemeData darkTheme = ThemeData(
appBarTheme: AppBarTheme(
color: Color.fromARGB(255, 12, 12, 12),
iconTheme: IconThemeData(color: Colors.white)),
backgroundColor: Color.fromARGB(255, 12, 12, 12),
primaryColor: Color.fromARGB(255, 29, 29, 29),
textTheme: TextTheme(
subtitle2: TextStyle(
color: Color.fromARGB(255, 236, 236, 236),
),
),
);
ThemeData lightTheme = ThemeData(
appBarTheme: AppBarTheme(
color: Color.fromARGB(255, 240, 240, 240),
iconTheme: IconThemeData(color: Color.fromARGB(255, 0, 0, 0))),
backgroundColor: Color.fromARGB(255, 240, 240, 240),
primaryColor: Color.fromARGB(255, 255, 255, 255),
textTheme: TextTheme(
subtitle2: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
),
),
);
Then you need a function that should sit in a provider that would look something like this and it should sit in a provider.
bool _newTheme = false;
bool get newTheme => _newTheme;
ThemeData _appTheme = lightTheme;
ThemeData get appTheme => _appTheme;
void toggleDarkTheme() async {
_newTheme = !_newTheme;
var box = await Hive.openBox('theme');
if (_newTheme) {
_appTheme = darkTheme;
box.put('newTheme', _newTheme);
notifyListeners();
} else {
_appTheme = lightTheme;
box.put('newTheme', _newTheme);
notifyListeners();
}
}
void setAppTheme() async {
try {
var box = await Hive.openBox('theme');
bool theNewTheme = box.get('newTheme') ?? false;
_newTheme = theNewTheme;
if (theNewTheme) {
_appTheme = darkTheme;
notifyListeners();
} else {
_appTheme = lightTheme;
notifyListeners();
}
} catch (e) {
print(e);
}
}
I don't fully understand why you want to switch between so many colors but for you to make yours work, you have to know which theme is the new theme, so that in the setAppTheme method you can put in the new correct theme.
your main.dart should look something like this too
void main() async {
await Hive.initFlutter();
await Hive.openBox('theme');
runApp(
//This is where your provider COULD sit
MaterialApp(home: MultiProvider(providers: providers, child: Theme())),
);
}
class Theme extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// This is where you provide the theme
// Also like I have said you need to figure out how you want to change between each theme
theme: Provider.of<ThemeViewModel>(context).appTheme,
home: SplashScreen(),
);
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Denzel |