From a4ef5b6ee2e981dcd9c8f7dd912049ab7472a3ae Mon Sep 17 00:00:00 2001 From: Moshe Dicker <75931499+dickermoshe@users.noreply.github.com> Date: Tue, 7 Jan 2025 19:18:18 +0000 Subject: [PATCH 1/2] make material theme builder explicit --- lib/src/app.dart | 202 +++++++++++++++++++++++++++++++++-------------- 1 file changed, 141 insertions(+), 61 deletions(-) diff --git a/lib/src/app.dart b/lib/src/app.dart index 320972e..dad39e3 100644 --- a/lib/src/app.dart +++ b/lib/src/app.dart @@ -21,6 +21,37 @@ enum ShadAppType { custom, } +typedef MaterialThemeBuilder = ThemeData Function( + BuildContext context, + ShadThemeData themeData, + String fontFamily, + Iterable>? extensions, + Brightness brightness, + Color primaryColor, + Color onPrimaryColor, + Color secondaryColor, + Color onSecondaryColor, + Color errorColor, + Color onErrorColor, + Color backgroundColor, + Color onBackgroundColor, + Color surfaceColor, + Color onSurfaceColor, + Color scaffoldBackgroundColor, + DividerThemeData dividerTheme, + TextSelectionThemeData textSelectionTheme, +); + +typedef CupertinoThemeBuilder = CupertinoThemeData Function( + BuildContext context, + ShadThemeData themeData, + Brightness brightness, + Color primaryColor, + Color primaryContrastingColor, + Color scaffoldBackgroundColor, + Color barBackgroundColor, +); + class ShadApp extends StatefulWidget { /// Creates a [ShadApp] providing a [ShadTheme]. const ShadApp({ @@ -54,13 +85,13 @@ class ShadApp extends StatefulWidget { this.scrollBehavior = const ShadScrollBehavior(), this.pageRouteBuilder, this.themeCurve = Curves.linear, - this.materialThemeBuilder, + this.materialThemeBuilder = defaultMaterialThemeBuilder, }) : routeInformationProvider = null, routeInformationParser = null, routerDelegate = null, backButtonDispatcher = null, routerConfig = null, - cupertinoThemeBuilder = null, + cupertinoThemeBuilder = defaultCupertinoThemeBuilder, appBuilder = null, type = ShadAppType.shadcn; @@ -92,7 +123,7 @@ class ShadApp extends StatefulWidget { this.restorationScopeId, this.scrollBehavior = const ShadScrollBehavior(), this.themeCurve = Curves.linear, - this.materialThemeBuilder, + this.materialThemeBuilder = defaultMaterialThemeBuilder, }) : navigatorObservers = null, navigatorKey = null, onGenerateRoute = null, @@ -102,7 +133,7 @@ class ShadApp extends StatefulWidget { routes = null, initialRoute = null, pageRouteBuilder = null, - cupertinoThemeBuilder = null, + cupertinoThemeBuilder = defaultCupertinoThemeBuilder, appBuilder = null, type = ShadAppType.shadcn; @@ -138,13 +169,13 @@ class ShadApp extends StatefulWidget { this.scrollBehavior = const MaterialScrollBehavior(), this.pageRouteBuilder, this.themeCurve = Curves.linear, - this.materialThemeBuilder, + this.materialThemeBuilder = defaultMaterialThemeBuilder, }) : routeInformationProvider = null, routeInformationParser = null, routerDelegate = null, backButtonDispatcher = null, routerConfig = null, - cupertinoThemeBuilder = null, + cupertinoThemeBuilder = defaultCupertinoThemeBuilder, appBuilder = null, type = ShadAppType.material; @@ -176,7 +207,7 @@ class ShadApp extends StatefulWidget { this.restorationScopeId, this.scrollBehavior = const MaterialScrollBehavior(), this.themeCurve = Curves.linear, - this.materialThemeBuilder, + this.materialThemeBuilder = defaultMaterialThemeBuilder, }) : navigatorObservers = null, navigatorKey = null, onGenerateRoute = null, @@ -186,7 +217,7 @@ class ShadApp extends StatefulWidget { routes = null, initialRoute = null, pageRouteBuilder = null, - cupertinoThemeBuilder = null, + cupertinoThemeBuilder = defaultCupertinoThemeBuilder, appBuilder = null, type = ShadAppType.material; @@ -222,8 +253,8 @@ class ShadApp extends StatefulWidget { this.scrollBehavior = const CupertinoScrollBehavior(), this.pageRouteBuilder, this.themeCurve = Curves.linear, - this.cupertinoThemeBuilder, - this.materialThemeBuilder, + this.cupertinoThemeBuilder = defaultCupertinoThemeBuilder, + this.materialThemeBuilder = defaultMaterialThemeBuilder, }) : routeInformationProvider = null, routeInformationParser = null, routerDelegate = null, @@ -260,8 +291,8 @@ class ShadApp extends StatefulWidget { this.restorationScopeId, this.scrollBehavior = const CupertinoScrollBehavior(), this.themeCurve = Curves.linear, - this.cupertinoThemeBuilder, - this.materialThemeBuilder, + this.cupertinoThemeBuilder = defaultCupertinoThemeBuilder, + this.materialThemeBuilder = defaultMaterialThemeBuilder, }) : navigatorObservers = null, navigatorKey = null, onGenerateRoute = null, @@ -285,7 +316,7 @@ class ShadApp extends StatefulWidget { backButtonDispatcher = null, builder = null, color = null, - cupertinoThemeBuilder = null, + cupertinoThemeBuilder = defaultCupertinoThemeBuilder, debugShowCheckedModeBanner = true, home = null, initialRoute = null, @@ -293,7 +324,7 @@ class ShadApp extends StatefulWidget { localeListResolutionCallback = null, localeResolutionCallback = null, localizationsDelegates = null, - materialThemeBuilder = null, + materialThemeBuilder = defaultMaterialThemeBuilder, navigatorKey = null, navigatorObservers = null, onGenerateInitialRoutes = null, @@ -316,6 +347,70 @@ class ShadApp extends StatefulWidget { title = '', type = ShadAppType.custom; + static ThemeData defaultMaterialThemeBuilder( + BuildContext context, + ShadThemeData themeData, + String fontFamily, + Iterable>? extensions, + Brightness brightness, + Color primaryColor, + Color onPrimaryColor, + Color secondaryColor, + Color onSecondaryColor, + Color errorColor, + Color onErrorColor, + Color backgroundColor, + Color onBackgroundColor, + Color surfaceColor, + Color onSurfaceColor, + Color scaffoldBackgroundColor, + DividerThemeData dividerTheme, + TextSelectionThemeData textSelectionTheme, + ) { + return ThemeData( + fontFamily: fontFamily, + extensions: extensions, + colorScheme: ColorScheme( + brightness: brightness, + primary: primaryColor, + onPrimary: onPrimaryColor, + secondary: secondaryColor, + onSecondary: onSecondaryColor, + error: errorColor, + onError: onErrorColor, + // Keep deprecated members for backwards compatibility + // ignore: deprecated_member_use + background: backgroundColor, + // ignore: deprecated_member_use + onBackground: onBackgroundColor, + surface: surfaceColor, + onSurface: onSurfaceColor, + ), + scaffoldBackgroundColor: scaffoldBackgroundColor, + brightness: brightness, + dividerTheme: dividerTheme, + textSelectionTheme: textSelectionTheme, + ); + } + + static CupertinoThemeData defaultCupertinoThemeBuilder( + BuildContext context, + ShadThemeData themeData, + Brightness brightness, + Color primaryColor, + Color primaryContrastingColor, + Color scaffoldBackgroundColor, + Color barBackgroundColor, + ) { + return CupertinoThemeData( + primaryColor: primaryColor, + primaryContrastingColor: primaryContrastingColor, + scaffoldBackgroundColor: scaffoldBackgroundColor, + barBackgroundColor: barBackgroundColor, + brightness: brightness, + ); + } + /// The type of app to use. /// /// If you are going to use only Shad components, use [ShadAppType.shadcn]. @@ -569,13 +664,9 @@ class ShadApp extends StatefulWidget { /// A custom app widget builder. final Widget Function(BuildContext context, ThemeData theme)? appBuilder; - final ThemeData Function(BuildContext context, ThemeData theme)? - materialThemeBuilder; + final MaterialThemeBuilder materialThemeBuilder; - final CupertinoThemeData Function( - BuildContext context, - CupertinoThemeData theme, - )? cupertinoThemeBuilder; + final CupertinoThemeBuilder cupertinoThemeBuilder; @override State createState() => _ShadAppState(); @@ -659,62 +750,51 @@ class _ShadAppState extends State { ThemeData materialTheme(BuildContext context) { final themeData = theme(context); - var mTheme = ThemeData( - fontFamily: themeData.textTheme.family, - extensions: themeData.extensions, - colorScheme: ColorScheme( - brightness: themeData.brightness, - primary: themeData.colorScheme.primary, - onPrimary: themeData.colorScheme.primaryForeground, - secondary: themeData.colorScheme.secondary, - onSecondary: themeData.colorScheme.secondaryForeground, - error: themeData.colorScheme.destructive, - onError: themeData.colorScheme.destructiveForeground, - // Keep deprecated members for backwards compatibility - // ignore: deprecated_member_use - background: themeData.colorScheme.background, - // ignore: deprecated_member_use - onBackground: themeData.colorScheme.foreground, - surface: themeData.colorScheme.card, - onSurface: themeData.colorScheme.cardForeground, - ), - scaffoldBackgroundColor: themeData.colorScheme.background, - brightness: themeData.brightness, - dividerTheme: DividerThemeData( + + final mTheme = widget.materialThemeBuilder( + context, + themeData, + themeData.textTheme.family, + themeData.extensions, + themeData.brightness, + themeData.colorScheme.primary, + themeData.colorScheme.primaryForeground, + themeData.colorScheme.secondary, + themeData.colorScheme.secondaryForeground, + themeData.colorScheme.destructive, + themeData.colorScheme.destructiveForeground, + themeData.colorScheme.background, + themeData.colorScheme.foreground, + themeData.colorScheme.card, + themeData.colorScheme.cardForeground, + themeData.colorScheme.background, + DividerThemeData( color: themeData.colorScheme.border, thickness: 1, ), - textSelectionTheme: TextSelectionThemeData( + TextSelectionThemeData( cursorColor: themeData.colorScheme.primary, selectionColor: themeData.colorScheme.selection, selectionHandleColor: themeData.colorScheme.primary, ), ); - mTheme = mTheme.copyWith( + return mTheme.copyWith( textTheme: - themeData.textTheme.materialTextTheme(textTheme: mTheme.textTheme), + themeData.textTheme.applyGoogleFontToTextTheme(mTheme.textTheme), ); - - if (widget.materialThemeBuilder == null) { - return mTheme; - } - return widget.materialThemeBuilder!(context, mTheme); } CupertinoThemeData cupertinoTheme(BuildContext context) { final themeData = theme(context); - final cTheme = CupertinoThemeData( - primaryColor: themeData.colorScheme.primary, - primaryContrastingColor: themeData.colorScheme.primaryForeground, - scaffoldBackgroundColor: themeData.colorScheme.background, - barBackgroundColor: themeData.colorScheme.primary, - brightness: themeData.brightness, + return widget.cupertinoThemeBuilder( + context, + themeData, + themeData.brightness, + themeData.colorScheme.primary, + themeData.colorScheme.primaryForeground, + themeData.colorScheme.background, + themeData.colorScheme.background, ); - - if (widget.cupertinoThemeBuilder == null) { - return cTheme; - } - return widget.cupertinoThemeBuilder!(context, cTheme); } Widget _builder(BuildContext context, Widget? child) { From 16dcb8d3a72fb28c780cf68cb7bde8111febbcef Mon Sep 17 00:00:00 2001 From: Moshe Dicker <75931499+dickermoshe@users.noreply.github.com> Date: Tue, 7 Jan 2025 19:18:54 +0000 Subject: [PATCH 2/2] rename material builder --- lib/src/theme/text_theme/theme.dart | 50 ++++++++++------------------- 1 file changed, 17 insertions(+), 33 deletions(-) diff --git a/lib/src/theme/text_theme/theme.dart b/lib/src/theme/text_theme/theme.dart index 67b0229..426b2a3 100644 --- a/lib/src/theme/text_theme/theme.dart +++ b/lib/src/theme/text_theme/theme.dart @@ -305,97 +305,81 @@ class ShadTextTheme { ); } - TextTheme materialTextTheme({TextTheme? textTheme}) { - final effectiveTextTheme = textTheme ?? const TextTheme(); - if (googleFontBuilder == null) return effectiveTextTheme; + TextTheme applyGoogleFontToTextTheme(TextTheme textTheme) { + if (googleFontBuilder == null) return textTheme; return TextTheme( displayLarge: GoogleFontTextStyle( - (effectiveTextTheme.displayLarge ?? const TextStyle()) - .omitFamilyAndPackage, + (textTheme.displayLarge ?? const TextStyle()).omitFamilyAndPackage, builder: googleFontBuilder!, overrideFamilyWithBuilder: true, ), displayMedium: GoogleFontTextStyle( - (effectiveTextTheme.displayMedium ?? const TextStyle()) - .omitFamilyAndPackage, + (textTheme.displayMedium ?? const TextStyle()).omitFamilyAndPackage, builder: googleFontBuilder!, overrideFamilyWithBuilder: true, ), displaySmall: GoogleFontTextStyle( - (effectiveTextTheme.displaySmall ?? const TextStyle()) - .omitFamilyAndPackage, + (textTheme.displaySmall ?? const TextStyle()).omitFamilyAndPackage, builder: googleFontBuilder!, overrideFamilyWithBuilder: true, ), headlineLarge: GoogleFontTextStyle( - (effectiveTextTheme.headlineLarge ?? const TextStyle()) - .omitFamilyAndPackage, + (textTheme.headlineLarge ?? const TextStyle()).omitFamilyAndPackage, builder: googleFontBuilder!, overrideFamilyWithBuilder: true, ), headlineMedium: GoogleFontTextStyle( - (effectiveTextTheme.headlineMedium ?? const TextStyle()) - .omitFamilyAndPackage, + (textTheme.headlineMedium ?? const TextStyle()).omitFamilyAndPackage, builder: googleFontBuilder!, overrideFamilyWithBuilder: true, ), headlineSmall: GoogleFontTextStyle( - (effectiveTextTheme.headlineSmall ?? const TextStyle()) - .omitFamilyAndPackage, + (textTheme.headlineSmall ?? const TextStyle()).omitFamilyAndPackage, builder: googleFontBuilder!, overrideFamilyWithBuilder: true, ), titleLarge: GoogleFontTextStyle( - (effectiveTextTheme.titleLarge ?? const TextStyle()) - .omitFamilyAndPackage, + (textTheme.titleLarge ?? const TextStyle()).omitFamilyAndPackage, builder: googleFontBuilder!, overrideFamilyWithBuilder: true, ), titleMedium: GoogleFontTextStyle( - (effectiveTextTheme.titleMedium ?? const TextStyle()) - .omitFamilyAndPackage, + (textTheme.titleMedium ?? const TextStyle()).omitFamilyAndPackage, builder: googleFontBuilder!, overrideFamilyWithBuilder: true, ), titleSmall: GoogleFontTextStyle( - (effectiveTextTheme.titleSmall ?? const TextStyle()) - .omitFamilyAndPackage, + (textTheme.titleSmall ?? const TextStyle()).omitFamilyAndPackage, builder: googleFontBuilder!, overrideFamilyWithBuilder: true, ), bodyLarge: GoogleFontTextStyle( - (effectiveTextTheme.bodyLarge ?? const TextStyle()) - .omitFamilyAndPackage, + (textTheme.bodyLarge ?? const TextStyle()).omitFamilyAndPackage, builder: googleFontBuilder!, overrideFamilyWithBuilder: true, ), bodyMedium: GoogleFontTextStyle( - (effectiveTextTheme.bodyMedium ?? const TextStyle()) - .omitFamilyAndPackage, + (textTheme.bodyMedium ?? const TextStyle()).omitFamilyAndPackage, builder: googleFontBuilder!, overrideFamilyWithBuilder: true, ), bodySmall: GoogleFontTextStyle( - (effectiveTextTheme.bodySmall ?? const TextStyle()) - .omitFamilyAndPackage, + (textTheme.bodySmall ?? const TextStyle()).omitFamilyAndPackage, builder: googleFontBuilder!, overrideFamilyWithBuilder: true, ), labelLarge: GoogleFontTextStyle( - (effectiveTextTheme.labelLarge ?? const TextStyle()) - .omitFamilyAndPackage, + (textTheme.labelLarge ?? const TextStyle()).omitFamilyAndPackage, builder: googleFontBuilder!, overrideFamilyWithBuilder: true, ), labelMedium: GoogleFontTextStyle( - (effectiveTextTheme.labelMedium ?? const TextStyle()) - .omitFamilyAndPackage, + (textTheme.labelMedium ?? const TextStyle()).omitFamilyAndPackage, builder: googleFontBuilder!, overrideFamilyWithBuilder: true, ), labelSmall: GoogleFontTextStyle( - (effectiveTextTheme.labelSmall ?? const TextStyle()) - .omitFamilyAndPackage, + (textTheme.labelSmall ?? const TextStyle()).omitFamilyAndPackage, builder: googleFontBuilder!, overrideFamilyWithBuilder: true, ),