themeProvider top-level property
final
Implementation
final themeProvider = StateProvider<ThemeData>(
(ref) => ThemeData(
useMaterial3: false,
brightness: ref.watch(isDarkThemeProvider) == true
? Brightness.dark
: Brightness.light,
primaryColor: ref.watch(accentColorProvider),
fontFamily: ref.watch(fontFamilyProvider),
scaffoldBackgroundColor:
ref.watch(isDarkThemeProvider) == true ? black : white,
bottomNavigationBarTheme: BottomNavigationBarThemeData(
type: BottomNavigationBarType.fixed,
showSelectedLabels:
ref.watch(showBottomNavigationBarLabelsProvider) == true,
showUnselectedLabels:
ref.watch(showBottomNavigationBarLabelsProvider) == true,
enableFeedback:
ref.watch(enableBottomNavigationBarFeedbackProvider) == true,
selectedItemColor: ref.watch(accentColorProvider),
unselectedItemColor: ref.watch(isDarkThemeProvider) == true
? greyColorDark
: greyColorLight,
backgroundColor: ref.watch(isDarkThemeProvider) == true
? ref.watch(darkFillColorProvider)
: ref.watch(lightFillColorProvider),
),
cupertinoOverrideTheme: MaterialBasedCupertinoThemeData(
materialTheme: ThemeData(
iconTheme: IconThemeData(
color: ref.watch(isDarkThemeProvider) == true
? greyColorDark
: greyColorLight),
),
),
iconTheme: IconThemeData(
color: ref.watch(isDarkThemeProvider) == true
? greyColorDark
: greyColorLight),
expansionTileTheme: ExpansionTileThemeData(
collapsedShape: RoundedRectangleBorder(
side: const BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.all(
Radius.circular(ref.watch(borderRadiusProvider)),
),
),
shape: RoundedRectangleBorder(
side: const BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.all(
Radius.circular(ref.watch(borderRadiusProvider)),
),
),
),
tabBarTheme: TabBarTheme(
labelStyle: const TextStyle(
color: white, fontSize: 12, fontWeight: FontWeight.bold),
unselectedLabelStyle: TextStyle(
color: ref.watch(accentColorProvider),
fontSize: 14,
fontWeight: FontWeight.bold),
labelPadding: const EdgeInsets.symmetric(vertical: 5, horizontal: 8),
overlayColor: WidgetStateProperty.resolveWith<Color>(
(Set<WidgetState> states) {
return Colors.transparent;
// return ref
// .watch(accentColorProvider)
// .withOpacity(0.2); // Use the component's default.
},
),
splashFactory: NoSplash.splashFactory,
indicator: BoxDecoration(
color: ref.watch(accentColorProvider),
borderRadius: BorderRadius.all(
Radius.circular(ref.watch(borderRadiusProvider)),
),
),
),
navigationBarTheme: const NavigationBarThemeData(
overlayColor: WidgetStatePropertyAll(Colors.transparent),
height: 75,
elevation: 0,
labelBehavior: NavigationDestinationLabelBehavior.onlyShowSelected),
bottomAppBarTheme: const BottomAppBarTheme(height: 75),
appBarTheme: AppBarTheme(
iconTheme: IconThemeData(
color: ref.watch(isDarkThemeProvider) == true
? greyColorDark
: greyColorLight),
elevation: 0,
backgroundColor: ref.watch(isDarkThemeProvider) == true
? ref.watch(darkFillColorProvider)
: ref.watch(lightFillColorProvider),
shape: Border(
bottom: BorderSide(
color: ref.watch(isDarkThemeProvider) == true
? ref.watch(darkLineColorProvider)
: ref.watch(lightLineColorProvider),
),
)),
dividerColor: ref.watch(isDarkThemeProvider) == true
? ref.watch(darkLineColorProvider)
: ref.watch(lightLineColorProvider),
inputDecorationTheme: InputDecorationTheme(
filled: true,
isCollapsed: true,
isDense: true,
contentPadding:
const EdgeInsets.only(top: 15, bottom: 10, left: 15, right: 15),
fillColor: ref.watch(isFilledProvider) == true
? ref.watch(isDarkThemeProvider) == true
? ref.watch(darkFillColorProvider)
: ref.watch(lightFillColorProvider)
: Colors.transparent,
floatingLabelBehavior: FloatingLabelBehavior.always,
alignLabelWithHint: true,
floatingLabelStyle: WidgetStateTextStyle.resolveWith((states) {
if (states.contains(WidgetState.error)) {
return const TextStyle(
fontSize: 12,
height: 0.5,
fontWeight: FontWeight.w500,
color: Colors.red,
);
} else {
return TextStyle(
fontSize: 12,
height: 0.5,
fontWeight: FontWeight.w400,
color: ref.watch(isDarkThemeProvider) == true
? greyColorDark
: greyColorLight,
);
}
}),
labelStyle: WidgetStateTextStyle.resolveWith((states) {
if (states.contains(WidgetState.error)) {
return const TextStyle(
fontSize: 14,
height: 2,
fontWeight: FontWeight.w400,
color: Colors.red,
);
} else {
return TextStyle(
fontSize: 14,
height: 2,
fontWeight: FontWeight.w400,
color: ref.watch(accentColorProvider),
);
}
}),
hintStyle: WidgetStateTextStyle.resolveWith((states) {
if (states.contains(WidgetState.focused)) {
if (states.contains(WidgetState.error)) {
return const TextStyle(
fontSize: 14,
height: 1.9,
fontWeight: FontWeight.w500,
color: Colors.red,
);
} else {
return TextStyle(
fontSize: 14,
height: 1.9,
fontWeight: FontWeight.w400,
color: ref.watch(isDarkThemeProvider) == true
? greyColorDark
: greyColorLight,
);
}
} else {
if (states.contains(WidgetState.error)) {
return const TextStyle(
fontSize: 10,
height: 2.65,
fontWeight: FontWeight.w400,
color: Colors.red,
);
} else {
return TextStyle(
fontSize: 10,
height: 2.65,
fontWeight: FontWeight.w400,
color: ref.watch(isDarkThemeProvider) == true
? greyColorDark
: greyColorLight,
);
}
}
}),
errorStyle: const TextStyle(height: 0, color: Colors.red),
suffixIconColor: WidgetStateColor.resolveWith((states) {
if (states.contains(WidgetState.error)) {
return Colors.red;
}
return ref.watch(isDarkThemeProvider) == true
? greyColorDark
: greyColorLight;
}),
prefixIconColor: WidgetStateColor.resolveWith((states) {
if (states.contains(WidgetState.error)) {
return Colors.red;
}
return ref.watch(isDarkThemeProvider) == true
? greyColorDark
: greyColorLight;
}),
suffixStyle: WidgetStateTextStyle.resolveWith((states) {
if (states.contains(WidgetState.error)) {
return const TextStyle(color: Colors.red);
}
return TextStyle(
decorationStyle: TextDecorationStyle.double,
color: ref.watch(isDarkThemeProvider) == true
? ref.watch(darkLineColorProvider)
: ref.watch(lightLineColorProvider));
}),
enabledBorder: CustomOutlineInputBorder(
borderSide: BorderSide(
width: 1,
color: ref.watch(borderWidthProvider) == 0
? Colors.transparent
: ref.watch(isDarkThemeProvider)
? ref.watch(darkLineColorProvider)
: ref.watch(lightLineColorProvider)),
borderRadius: SmoothBorderRadius(
cornerRadius: ref.watch(borderRadiusProvider),
cornerSmoothing: ref.watch(borderRadiusProvider) == 50 ? 0 : 1,
),
),
border: CustomOutlineInputBorder(
borderSide: const BorderSide(
width: 2,
),
borderRadius: SmoothBorderRadius(
cornerRadius: ref.watch(borderRadiusProvider),
cornerSmoothing: ref.watch(borderRadiusProvider) == 50 ? 0 : 1,
),
),
focusedBorder: CustomOutlineInputBorder(
borderSide: BorderSide(
width: 1,
color: ref.watch(accentColorProvider),
),
borderRadius: SmoothBorderRadius(
cornerRadius: ref.watch(borderRadiusProvider),
cornerSmoothing: ref.watch(borderRadiusProvider) == 50 ? 0 : 1,
),
),
errorBorder: CustomOutlineInputBorder(
borderSide: const BorderSide(color: Colors.red, width: 2),
borderRadius: SmoothBorderRadius(
cornerRadius: ref.watch(borderRadiusProvider),
cornerSmoothing: ref.watch(borderRadiusProvider) == 50 ? 0 : 1,
),
),
),
// primaryTextTheme: text,
outlinedButtonTheme: OutlinedButtonThemeData(
style: ButtonStyle(
side: WidgetStateProperty.resolveWith<BorderSide>(
(Set<WidgetState> states) {
if (states.contains(WidgetState.pressed)) {
return const BorderSide(
color: Color(0xFF5CD0BA),
width: 2,
);
} else if (states.contains(WidgetState.disabled)) {
return BorderSide(
color: ref.watch(accentColorProvider).withOpacity(0.2),
width: 2,
);
}
return BorderSide(
color: ref.watch(accentColorProvider),
width: 2,
); // Use the component's default.
},
),
textStyle: WidgetStateProperty.all<TextStyle>(
TextStyle(
color: ref.watch(titleColorProvider),
fontSize: 14,
fontWeight: FontWeight.w800),
),
minimumSize: WidgetStateProperty.all<Size>(
const Size(200, 50),
),
shape: WidgetStateProperty.all<SmoothRectangleBorder>(
SmoothRectangleBorder(
borderRadius: SmoothBorderRadius(
cornerRadius: ref.watch(borderRadiusProvider),
cornerSmoothing: ref.watch(borderRadiusProvider) == 50 ? 0 : 1,
),
),
),
),
),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ButtonStyle(
elevation: WidgetStateProperty.all<double>(0),
textStyle: WidgetStateProperty.all<TextStyle>(
TextStyle(
color: ref.watch(titleColorProvider),
fontSize: 14,
fontWeight: FontWeight.w800),
),
minimumSize: WidgetStateProperty.all<Size>(
const Size(200, 50),
),
shape: WidgetStateProperty.all<SmoothRectangleBorder>(
SmoothRectangleBorder(
borderRadius: SmoothBorderRadius(
cornerRadius: ref.watch(borderRadiusProvider),
cornerSmoothing: ref.watch(borderRadiusProvider) == 50 ? 0 : 1,
),
),
),
backgroundColor: WidgetStateProperty.resolveWith<Color>(
(Set<WidgetState> states) {
if (states.contains(WidgetState.pressed)) {
return ref.watch(accentColorProvider).withOpacity(0.9);
} else if (states.contains(WidgetState.disabled)) {
return ref.watch(accentColorProvider).withOpacity(0.8);
}
return ref
.watch(accentColorProvider); // Use the component's default.
},
),
),
),
textTheme: TextTheme(
headlineLarge: typoGraphyExtension.headingBold!.apply(
color: ref.watch(titleColorProvider),
),
headlineMedium: typoGraphyExtension.headingLight!.apply(
color: ref.watch(titleColorProvider),
),
headlineSmall: typoGraphyExtension.headingBold1!.apply(
color: ref.watch(titleColorProvider),
),
displayLarge: typoGraphyExtension.headingLight1!.apply(
color: ref.watch(titleColorProvider),
),
displayMedium: typoGraphyExtension.headingBold2!.apply(
color: ref.watch(titleColorProvider),
),
displaySmall: typoGraphyExtension.headingLight2!.apply(
color: ref.watch(titleColorProvider),
),
titleLarge: typoGraphyExtension.titleBold!.apply(
color: ref.watch(titleColorProvider),
),
titleMedium: typoGraphyExtension.titleLight!.apply(
color: ref.watch(titleColorProvider),
),
titleSmall: typoGraphyExtension.bodyBold1!.apply(
color: ref.watch(titleColorProvider),
),
bodyLarge: typoGraphyExtension.bodyLight1!.apply(
color: ref.watch(titleColorProvider),
),
bodyMedium: typoGraphyExtension.bodyBold2!.apply(
color: ref.watch(titleColorProvider),
),
bodySmall: typoGraphyExtension.bodyLight2!.apply(
color: ref.watch(textAndIconColorProvider),
),
labelLarge: typoGraphyExtension.captionBold!.apply(
color: ref.watch(textAndIconColorProvider),
),
labelMedium: typoGraphyExtension.captionLight!.apply(
color: ref.watch(textAndIconColorProvider),
),
labelSmall: typoGraphyExtension.tinyBold!.apply(
color: ref.watch(textAndIconColorProvider),
),
),
cardTheme: CardTheme(
color: ref.watch(isFilledProvider) == true
? ref.watch(isDarkThemeProvider) == true
? ref.watch(darkFillColorProvider)
: ref.watch(lightFillColorProvider)
: Colors.transparent,
elevation: 0,
margin: EdgeInsets.zero,
shape: SmoothRectangleBorder(
side: BorderSide(
color: ref.watch(borderWidthProvider) == 0
? Colors.transparent
: ref.watch(isDarkThemeProvider) == true
? ref.watch(darkLineColorProvider)
: ref.watch(lightLineColorProvider),
width: ref.watch(borderWidthProvider) + 0.5,
), // Use the component's default.
borderRadius: SmoothBorderRadius(
cornerRadius: ref.watch(borderRadiusProvider) == 50
? 24
: ref.read(borderRadiusProvider),
cornerSmoothing: ref.watch(borderRadiusProvider) == 50 ? 0 : 1,
),
),
),
chipTheme: ChipThemeData(
backgroundColor: WidgetStateColor.resolveWith(
(states) => ref.watch(accentColorProvider),
),
elevation: 0,
pressElevation: 0,
color: WidgetStateColor.resolveWith((states) => Colors.transparent),
shape: SmoothRectangleBorder(
side: BorderSide(
color: ref.watch(borderWidthProvider) == 0
? Colors.transparent
: ref.watch(isDarkThemeProvider) == true
? ref.watch(darkLineColorProvider)
: ref.watch(lightLineColorProvider),
width: ref.watch(borderWidthProvider),
), // Use the component's default.
borderRadius: SmoothBorderRadius(
cornerRadius: ref.watch(borderRadiusProvider) == 50
? 16
: ref.watch(borderRadiusProvider),
cornerSmoothing: ref.watch(borderRadiusProvider) == 50 ? 0 : 1,
),
),
),
progressIndicatorTheme: ProgressIndicatorThemeData(
color: ref.watch(isDarkThemeProvider) == true
? Colors.white
: Colors.black),
),
);