diff --git a/coverage/lcov.info b/coverage/lcov.info index ef6d5bf9..0eee5239 100644 --- a/coverage/lcov.info +++ b/coverage/lcov.info @@ -77,178 +77,180 @@ LF:74 LH:53 end_of_record SF:lib/src/utils/rounded.dart -DA:9,7 -DA:19,12 -DA:20,12 -DA:23,1 -DA:24,3 +DA:11,7 +DA:21,12 +DA:22,12 DA:25,1 +DA:26,3 DA:27,1 -DA:28,3 -DA:35,218 -DA:40,8 +DA:29,1 +DA:30,3 +DA:37,218 DA:42,8 -DA:43,24 -DA:50,5 -DA:55,3 +DA:44,8 +DA:45,24 +DA:52,5 DA:57,3 -DA:58,9 -DA:65,13 -DA:67,44 -DA:68,12 -DA:71,8 -DA:74,41 +DA:59,3 +DA:60,9 +DA:67,13 +DA:69,44 +DA:70,12 +DA:73,16 +DA:76,41 LF:21 LH:21 end_of_record SF:lib/src/components/avatars/avatar.dart -DA:38,0 -DA:53,0 -DA:67,0 -DA:81,0 -DA:93,0 -DA:136,0 -DA:145,0 -DA:146,0 -DA:147,0 -DA:148,0 -DA:149,0 -DA:150,0 -DA:151,0 -DA:152,0 -DA:156,0 -DA:158,0 -DA:160,0 -DA:162,0 +DA:39,0 +DA:55,0 +DA:70,0 +DA:85,0 +DA:98,0 +DA:154,0 DA:163,0 DA:164,0 +DA:165,0 DA:166,0 DA:167,0 DA:168,0 DA:169,0 DA:170,0 -DA:171,0 -DA:172,0 DA:174,0 +DA:176,0 +DA:178,0 +DA:180,0 DA:181,0 +DA:182,0 +DA:184,0 +DA:185,0 DA:186,0 DA:187,0 DA:188,0 DA:189,0 DA:190,0 DA:191,0 -DA:192,0 DA:193,0 -DA:196,0 -DA:197,0 -DA:199,0 -DA:201,0 -DA:202,0 +DA:200,0 DA:205,0 DA:206,0 DA:207,0 +DA:208,0 +DA:209,0 DA:210,0 +DA:211,0 +DA:212,0 DA:215,0 DA:216,0 DA:218,0 DA:220,0 +DA:221,0 +DA:224,0 +DA:225,0 DA:226,0 -DA:227,0 DA:229,0 -DA:230,0 -DA:231,0 -DA:232,0 -DA:236,0 +DA:234,0 +DA:235,0 DA:237,0 -DA:240,0 -DA:241,0 -DA:242,0 -DA:252,0 -DA:254,0 +DA:239,0 +DA:245,0 +DA:246,0 +DA:248,0 +DA:249,0 +DA:250,0 +DA:251,0 +DA:255,0 DA:256,0 -DA:257,0 -DA:258,0 DA:259,0 DA:260,0 DA:261,0 -DA:262,0 -DA:263,0 -DA:264,0 -DA:269,0 DA:271,0 DA:273,0 DA:275,0 +DA:276,0 DA:277,0 +DA:278,0 DA:279,0 +DA:280,0 DA:281,0 +DA:282,0 DA:283,0 -DA:285,0 -DA:287,0 -DA:292,0 -DA:294,0 -DA:296,0 +DA:284,0 +DA:289,0 +DA:291,0 +DA:293,0 +DA:295,0 DA:297,0 -DA:298,0 DA:299,0 -DA:302,0 +DA:301,0 DA:303,0 -DA:304,0 DA:305,0 -DA:310,0 -DA:311,0 -DA:329,0 -DA:338,0 +DA:307,0 +DA:312,0 +DA:314,0 +DA:316,0 +DA:317,0 +DA:318,0 +DA:319,0 +DA:322,0 +DA:323,0 +DA:324,0 +DA:325,0 +DA:330,0 +DA:331,0 DA:349,0 -DA:360,0 -DA:388,0 -DA:396,0 -DA:397,0 -DA:398,0 -DA:399,0 -DA:400,0 -DA:401,0 -DA:402,0 -DA:403,0 -DA:407,0 -DA:409,0 -DA:411,0 -DA:412,0 -DA:413,0 -DA:414,0 +DA:358,0 +DA:369,0 +DA:380,0 +DA:408,0 DA:416,0 +DA:417,0 DA:418,0 +DA:419,0 +DA:420,0 +DA:421,0 DA:422,0 DA:423,0 -DA:424,0 -DA:425,0 -DA:426,0 DA:427,0 -DA:428,0 +DA:429,0 +DA:431,0 +DA:432,0 DA:433,0 DA:434,0 -DA:435,0 DA:436,0 -DA:437,0 +DA:438,0 DA:442,0 DA:443,0 DA:444,0 DA:445,0 +DA:446,0 DA:447,0 DA:448,0 -DA:450,0 -DA:458,0 -DA:459,0 +DA:453,0 +DA:454,0 +DA:455,0 +DA:456,0 +DA:457,0 DA:462,0 DA:463,0 -DA:466,0 +DA:464,0 +DA:465,0 +DA:467,0 DA:468,0 DA:470,0 -DA:471,0 -DA:472,0 -DA:473,0 -DA:474,0 -DA:475,0 -LF:146 +DA:478,0 +DA:479,0 +DA:482,0 +DA:483,0 +DA:486,0 +DA:488,0 +DA:490,0 +DA:491,0 +DA:492,0 +DA:493,0 +DA:494,0 +DA:495,0 +LF:148 LH:0 end_of_record SF:lib/src/components/badges/indicator.dart @@ -473,15 +475,15 @@ DA:137,1 DA:140,1 DA:141,2 DA:142,1 -DA:145,7 +DA:145,6 DA:146,1 -DA:147,3 +DA:147,2 DA:148,2 -DA:149,3 +DA:149,2 DA:150,3 -DA:151,3 +DA:151,2 DA:152,2 -DA:155,3 +DA:155,4 DA:159,2 DA:160,3 DA:161,1 @@ -3927,188 +3929,188 @@ LH:0 end_of_record SF:lib/src/zeta.dart DA:15,18 -DA:44,14 -DA:45,28 -DA:46,58 -DA:47,4 -DA:48,2 -DA:50,4 -DA:55,39 -DA:62,2 -DA:63,4 -DA:64,2 -DA:65,2 -DA:72,2 -DA:74,6 -DA:75,6 -DA:76,3 -DA:77,3 -DA:84,16 -DA:85,16 -DA:89,1 -DA:90,1 -DA:91,1 -DA:92,1 +DA:52,14 +DA:53,28 +DA:54,58 +DA:55,4 +DA:56,2 +DA:58,4 +DA:67,2 +DA:68,4 +DA:69,2 +DA:70,2 +DA:77,2 +DA:79,6 +DA:80,6 +DA:81,3 +DA:82,3 +DA:83,3 +DA:90,16 +DA:91,16 DA:95,1 DA:96,1 -DA:97,2 +DA:97,1 DA:98,1 -DA:99,1 -DA:107,1 -DA:109,1 -DA:111,3 -DA:112,3 -DA:113,3 -DA:114,3 -DA:115,3 -DA:116,3 +DA:101,1 +DA:102,1 +DA:103,2 +DA:104,1 +DA:105,1 +DA:113,1 +DA:115,1 DA:117,3 +DA:118,3 +DA:119,3 +DA:120,3 +DA:121,3 +DA:122,3 +DA:123,3 LF:37 LH:37 end_of_record SF:lib/src/components/snack_bar/snack_bar.dart DA:38,0 -DA:80,0 -DA:83,0 -DA:84,0 -DA:87,0 -DA:91,0 -DA:92,0 +DA:82,0 +DA:85,0 +DA:86,0 +DA:89,0 DA:93,0 +DA:94,0 DA:95,0 DA:97,0 -DA:98,0 DA:99,0 DA:100,0 DA:101,0 DA:102,0 DA:103,0 +DA:104,0 DA:105,0 -DA:111,0 -DA:125,0 -DA:129,0 -DA:132,0 -DA:133,0 +DA:107,0 +DA:113,0 +DA:127,0 +DA:131,0 DA:134,0 DA:135,0 DA:136,0 DA:137,0 -DA:143,0 -DA:148,0 +DA:138,0 +DA:139,0 +DA:145,0 DA:150,0 DA:152,0 -DA:153,0 -DA:156,0 -DA:161,0 -DA:162,0 +DA:154,0 +DA:155,0 +DA:158,0 DA:163,0 DA:164,0 DA:165,0 DA:166,0 DA:167,0 DA:168,0 -DA:172,0 +DA:169,0 +DA:170,0 DA:174,0 DA:176,0 -DA:177,0 DA:178,0 +DA:179,0 DA:180,0 -DA:186,0 -DA:202,0 +DA:182,0 +DA:188,0 DA:204,0 DA:206,0 -DA:207,0 DA:208,0 DA:209,0 DA:210,0 DA:211,0 -DA:214,0 +DA:212,0 +DA:213,0 DA:216,0 DA:218,0 DA:220,0 -DA:221,0 DA:222,0 DA:223,0 -DA:227,0 -DA:228,0 +DA:224,0 +DA:225,0 +DA:229,0 DA:230,0 -DA:233,0 -DA:234,0 +DA:232,0 DA:235,0 DA:236,0 DA:237,0 +DA:238,0 DA:239,0 -DA:240,0 +DA:241,0 DA:242,0 DA:244,0 -DA:245,0 DA:246,0 DA:247,0 DA:248,0 DA:249,0 DA:250,0 +DA:251,0 DA:252,0 -DA:253,0 +DA:254,0 DA:255,0 DA:257,0 -DA:258,0 +DA:259,0 DA:260,0 DA:262,0 -DA:263,0 +DA:264,0 DA:265,0 -DA:268,0 -DA:274,0 -DA:282,0 +DA:267,0 +DA:270,0 +DA:276,0 DA:284,0 DA:286,0 -DA:287,0 -DA:290,0 +DA:288,0 +DA:289,0 DA:292,0 DA:294,0 -DA:295,0 -DA:300,0 -DA:301,0 -DA:308,0 -DA:318,0 +DA:296,0 +DA:297,0 +DA:302,0 +DA:303,0 +DA:310,0 DA:320,0 DA:322,0 -DA:323,0 DA:324,0 -DA:327,0 +DA:325,0 +DA:326,0 DA:329,0 DA:331,0 -DA:332,0 -DA:341,0 -DA:342,0 +DA:333,0 +DA:334,0 DA:343,0 DA:344,0 DA:345,0 -DA:355,0 -DA:360,0 +DA:346,0 +DA:347,0 +DA:357,0 DA:362,0 -DA:363,0 -DA:366,0 +DA:364,0 +DA:365,0 DA:368,0 -DA:369,0 DA:370,0 DA:371,0 DA:372,0 DA:373,0 -DA:377,0 +DA:374,0 +DA:375,0 DA:379,0 -DA:380,0 DA:381,0 DA:382,0 DA:383,0 DA:384,0 -DA:389,0 +DA:385,0 +DA:386,0 DA:391,0 DA:393,0 -DA:394,0 DA:395,0 DA:396,0 DA:397,0 +DA:398,0 DA:399,0 +DA:401,0 LF:142 LH:0 end_of_record @@ -6033,7 +6035,7 @@ DA:700,5 DA:701,5 DA:702,5 DA:703,5 -DA:741,2 +DA:741,34 DA:744,2 DA:751,1 DA:752,4 @@ -6055,8 +6057,8 @@ DA:848,1 DA:849,4 DA:855,1 DA:856,4 -DA:863,1 -DA:864,4 +DA:863,17 +DA:864,52 DA:871,1 DA:872,4 DA:879,5 @@ -6136,33 +6138,32 @@ LH:243 end_of_record SF:lib/src/theme/theme_data.dart DA:22,19 -DA:32,1 +DA:31,1 +DA:33,1 DA:34,1 -DA:35,1 +DA:36,19 DA:37,19 -DA:38,19 -DA:40,1 +DA:39,1 +DA:41,1 DA:42,1 -DA:43,1 +DA:44,19 DA:45,19 -DA:46,19 -DA:65,38 -DA:72,38 +DA:64,38 +DA:71,38 +DA:74,18 +DA:77,18 +DA:79,18 +DA:80,18 +DA:81,18 DA:82,18 -DA:85,18 -DA:87,18 -DA:88,18 -DA:89,18 -DA:90,18 -DA:91,18 -DA:95,3 -DA:96,3 -DA:97,3 -DA:98,3 -DA:99,3 -DA:100,3 -LF:26 -LH:26 +DA:86,3 +DA:87,3 +DA:88,3 +DA:89,3 +DA:90,3 +DA:91,3 +LF:25 +LH:25 end_of_record SF:lib/src/utils/debounce.dart DA:10,2 @@ -6226,89 +6227,147 @@ DA:111,10 LF:46 LH:46 end_of_record +SF:lib/src/utils/nothing.dart +DA:6,326 +DA:8,1 +LF:2 +LH:2 +end_of_record SF:lib/src/zeta_provider.dart -DA:21,17 -DA:28,1 -DA:58,17 -DA:59,17 -DA:61,1 -DA:63,1 -DA:65,3 -DA:66,3 -DA:67,3 -DA:68,3 -DA:69,3 -DA:73,1 -DA:74,1 -DA:78,1 -DA:79,1 -DA:80,1 -DA:81,1 -DA:84,1 -DA:85,1 -DA:86,2 -DA:87,1 -DA:88,1 -DA:126,17 -DA:128,17 -DA:129,34 -DA:132,102 -DA:135,51 -DA:138,51 -DA:141,85 -DA:147,17 -DA:149,34 -DA:150,17 -DA:157,1 -DA:159,1 -DA:162,1 -DA:166,3 -DA:169,3 -DA:173,1 -DA:176,3 -DA:178,4 -DA:180,2 -DA:182,2 -DA:189,17 -DA:191,17 -DA:192,17 -DA:193,17 -DA:194,17 -DA:195,17 -DA:196,85 -DA:200,1 -DA:202,1 -DA:203,4 -DA:204,4 -DA:205,4 -DA:206,2 -DA:207,3 -DA:208,3 -DA:209,5 -DA:215,1 -DA:216,2 -DA:217,1 -DA:218,1 -DA:223,1 -DA:224,2 -DA:225,3 +DA:23,32 +DA:24,34 +DA:32,1 +DA:40,1 +DA:41,1 +DA:49,16 +DA:59,16 +DA:60,16 +DA:105,17 +DA:106,17 +DA:108,1 +DA:110,1 +DA:112,3 +DA:113,3 +DA:114,3 +DA:115,3 +DA:116,3 +DA:117,3 +DA:118,3 +DA:119,3 +DA:120,3 +DA:124,1 +DA:125,1 +DA:129,1 +DA:130,1 +DA:131,1 +DA:132,1 +DA:135,1 +DA:136,1 +DA:137,2 +DA:138,1 +DA:139,1 +DA:186,17 +DA:188,17 +DA:189,34 +DA:192,102 +DA:195,51 +DA:198,51 +DA:201,51 +DA:204,85 +DA:207,51 +DA:210,51 +DA:216,17 +DA:218,34 +DA:219,17 DA:226,1 +DA:228,1 DA:231,1 -DA:232,2 -DA:233,1 -DA:234,3 -DA:235,1 -DA:239,1 -DA:240,1 -DA:241,3 +DA:235,3 +DA:238,3 DA:242,1 -DA:243,1 -DA:244,1 -DA:249,1 -DA:251,1 -DA:253,3 -DA:254,3 -DA:255,3 -LF:82 -LH:82 +DA:245,3 +DA:247,4 +DA:249,2 +DA:251,2 +DA:258,17 +DA:260,68 +DA:261,16 +DA:262,16 +DA:263,16 +DA:264,16 +DA:265,16 +DA:266,16 +DA:267,48 +DA:269,16 +DA:271,16 +DA:272,64 +DA:274,16 +DA:276,16 +DA:277,64 +DA:279,16 +DA:284,1 +DA:285,1 +DA:286,1 +DA:287,1 +DA:288,1 +DA:289,1 +DA:290,5 +DA:294,1 +DA:296,1 +DA:297,4 +DA:298,4 +DA:299,4 +DA:300,4 +DA:301,0 +DA:302,2 +DA:303,3 +DA:304,3 +DA:305,5 +DA:306,3 +DA:307,3 +DA:313,1 +DA:314,2 +DA:315,1 +DA:316,1 +DA:321,1 +DA:322,2 +DA:323,3 +DA:324,1 +DA:329,1 +DA:330,2 +DA:331,1 +DA:332,3 +DA:333,1 +DA:339,0 +DA:340,0 +DA:341,0 +DA:342,0 +DA:346,1 +DA:347,1 +DA:348,3 +DA:349,1 +DA:350,1 +DA:351,1 +DA:356,1 +DA:358,1 +DA:360,3 +DA:361,3 +DA:362,3 +DA:367,16 +DA:375,0 +DA:377,0 +DA:379,0 +DA:381,0 +DA:382,0 +DA:384,0 +DA:385,0 +DA:387,0 +DA:388,0 +DA:389,0 +DA:390,0 +DA:394,16 +DA:398,16 +DA:399,16 +LF:134 +LH:118 end_of_record diff --git a/example/example.md b/example/example.md new file mode 100644 index 00000000..2b3abf32 --- /dev/null +++ b/example/example.md @@ -0,0 +1,45 @@ +## Set up + +To use Zeta components in you app, first the whole app must be wrapped with `ZetaProvider`. The easiest way to do this is with the custom builder `ZetaProvider.custom`. +You can provide initial values for `ThemeData`, `ThemeMode`, `contrast` and `ZetaThemeData`. + +* `initialThemeData` (optional) allows you to extend an existing Flutter themeData to use alongside the `Zeta` theme. +* `initialThemeMode` (optional) sets whether the app starts in light or dark mode, or uses the device default. +* `initialContrast` (optional) sets whether the app starts with standard (WCAG AA) contrast, or if it attempts to use the more accessible contrast (WCAG AAA). +* `initialZetaThemeData` (optional) allows you to override the Zeta theme with a custom theme. +* `initialLightThemeData` and `initialDarkThemeData` (optional) allows you to use existing ThemeData objects withing zeta +* `builder` (required) is used to construct the app with all Zeta themes injected. + + +```dart +return ZetaProvider.base( + initialThemeData: initialThemeData, + initialThemeMode: initialThemeMode, + initialContrast: initialContrast, + initialZetaThemeData: initialZetaThemeData, + initialRounded: initialRounded, + builder: (context, lightTheme, darkTheme, themeMode) { + return MaterialApp.router( + routerConfig: router, + themeMode: themeMode, + theme: lightTheme, + darkTheme: darkTheme, + ); + }, +); +``` + +## Using the components + +Once Zeta is configured, Zeta components can be used as any other componenent, and will inherit theme and other information from `Zeta`. + +```dart +Column( + children:[ + ZetaButton(label: 'Button', onPressed: (){}), + ZetaAvatar(), + ZetaStatusLabel(), + // etc... + ] +) +``` \ No newline at end of file diff --git a/example/lib/main.dart b/example/lib/main.dart index cf16ece0..3bffbb27 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -14,7 +14,7 @@ void main() async { runApp( ZetaExample( themeService: themeService, - initialThemeData: themePreferences.$1 ?? ZetaThemeData(), + initialZetaThemeData: themePreferences.$1 ?? ZetaThemeData(), initialThemeMode: themePreferences.$2 ?? ThemeMode.system, initialContrast: themePreferences.$3 ?? ZetaContrast.aa, ), @@ -27,41 +27,26 @@ class ZetaExample extends StatelessWidget { required this.themeService, required this.initialContrast, required this.initialThemeMode, - required this.initialThemeData, + required this.initialZetaThemeData, }); final ZetaThemeService themeService; final ZetaContrast initialContrast; final ThemeMode initialThemeMode; - final ZetaThemeData initialThemeData; + final ZetaThemeData initialZetaThemeData; @override Widget build(BuildContext context) { - return ZetaProvider( - themeService: themeService, - initialContrast: initialContrast, - initialThemeData: initialThemeData, + return ZetaProvider.base( + initialZetaThemeData: initialZetaThemeData, initialThemeMode: initialThemeMode, - builder: (context, themeData, themeMode) { - final dark = themeData.colorsDark.toScheme(); - final light = themeData.colorsLight.toScheme(); + initialContrast: initialContrast, + builder: (context, lightTheme, darkTheme, themeMode) { return MaterialApp.router( routerConfig: router, themeMode: themeMode, - theme: ThemeData( - useMaterial3: true, - fontFamily: themeData.fontFamily, - scaffoldBackgroundColor: light.surfaceTertiary, - colorScheme: light, - textTheme: zetaTextTheme, - ), - darkTheme: ThemeData( - useMaterial3: true, - fontFamily: themeData.fontFamily, - scaffoldBackgroundColor: dark.surfaceTertiary, - colorScheme: dark, - textTheme: zetaTextTheme, - ), + theme: lightTheme, + darkTheme: darkTheme, ); }, ); diff --git a/example/lib/pages/assets/icons_example.dart b/example/lib/pages/assets/icons_example.dart index c39695a0..6decbdb4 100644 --- a/example/lib/pages/assets/icons_example.dart +++ b/example/lib/pages/assets/icons_example.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; import '../../widgets.dart'; @@ -20,26 +21,57 @@ class _IconsExampleState extends State { return ExampleScaffold( name: IconsExample.name, child: SingleChildScrollView( - padding: EdgeInsets.all(ZetaSpacing.medium), - child: Column( - children: [ - Text('Round', style: ZetaTextStyles.bodyLarge), - Wrap( - spacing: 8, - runSpacing: 8, - children: icons.values.map((e) => Icon(e)).toList(), - ), - const SizedBox(height: 20), - Text('Sharp', style: ZetaTextStyles.bodyLarge), - Wrap( - spacing: 8, - runSpacing: 8, - children: icons.values - .map((e) => - Icon(IconData(e.codePoint, fontFamily: ZetaIcons.familySharp, fontPackage: ZetaIcons.package))) - .toList(), - ), - ], + key: PageStorageKey(0), + child: Center( + child: Column( + children: [ + Text('Zeta Icons v' + zetaIconsVersion, style: ZetaTextStyles.displayMedium).paddingAll(ZetaSpacing.xl_4), + Text('Tap icon to copy name to clipboard', style: ZetaTextStyles.titleMedium) + .paddingAll(ZetaSpacing.xl_4), + Wrap( + spacing: ZetaSpacing.xl_4, + runSpacing: ZetaSpacing.xl_4, + children: icons.entries.map( + (e) { + final nameArr = (e.key.split('_')).join(' ').capitalize(); + return Container( + width: 120, + height: 120, + child: InkWell( + borderRadius: ZetaRadius.rounded, + hoverColor: Zeta.of(context).colors.surfaceHover, + onTap: () async { + await Clipboard.setData(ClipboardData(text: 'ZetaIcons.' + e.key)); + ScaffoldMessenger.of(context).showMaterialBanner( + ZetaBanner(context: context, title: 'Icon name copied'), + ); + await Future.delayed(Duration(seconds: 4)); + ScaffoldMessenger.of(context).clearMaterialBanners(); + }, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + ZetaIcon( + IconData( + e.value.codePoint, + fontFamily: context.rounded ? ZetaIcons.familyRound : ZetaIcons.familySharp, + fontPackage: ZetaIcons.package, + ), + size: ZetaSpacing.xl_6, + ), + Text( + nameArr, + textAlign: TextAlign.center, + ) + ], + ), + ), + ); + }, + ).toList(), + ), + ], + ), ), ), ); diff --git a/example/lib/pages/components/accordion_example.dart b/example/lib/pages/components/accordion_example.dart index b0561a66..669835c8 100644 --- a/example/lib/pages/components/accordion_example.dart +++ b/example/lib/pages/components/accordion_example.dart @@ -15,7 +15,7 @@ class AccordionExample extends StatelessWidget { padding: EdgeInsets.all(ZetaSpacing.medium), child: Column( children: [ - Text('Rounded Divider'), + Text('Divider'), const SizedBox(height: 20), ZetaAccordion( title: 'title', @@ -29,7 +29,7 @@ class AccordionExample extends StatelessWidget { ), ZetaAccordion(title: 'title'), const SizedBox(height: 40), - Text('Rounded Contained'), + Text('Contained'), const SizedBox(height: 20), ZetaAccordion( contained: true, @@ -47,44 +47,6 @@ class AccordionExample extends StatelessWidget { title: 'title', ), const SizedBox(height: 40), - Text('Sharp Divider'), - const SizedBox(height: 20), - ZetaAccordion( - contained: false, - title: 'title', - rounded: false, - child: Column( - children: [ - ListTile(title: Text('List Item')), - ListTile(title: Text('List Item')), - ListTile(title: Text('List Item')), - ], - ), - ), - ZetaAccordion( - contained: false, - title: 'title', - rounded: false, - ), - Text('Sharp Contained'), - const SizedBox(height: 20), - ZetaAccordion( - contained: true, - title: 'title', - rounded: false, - child: Column( - children: [ - ListTile(title: Text('List Item')), - ListTile(title: Text('List Item')), - ListTile(title: Text('List Item')), - ], - ), - ), - ZetaAccordion( - contained: true, - title: 'title', - rounded: false, - ), ].divide(const SizedBox.square(dimension: 10)).toList(), ), ), diff --git a/example/lib/pages/components/avatar_example.dart b/example/lib/pages/components/avatar_example.dart index 23a6c5dc..de548db9 100644 --- a/example/lib/pages/components/avatar_example.dart +++ b/example/lib/pages/components/avatar_example.dart @@ -12,565 +12,568 @@ class AvatarExample extends StatelessWidget { Widget build(BuildContext context) { final Widget image = CachedNetworkImage( imageUrl: "https://i.ytimg.com/vi/KItsWUzFUOs/maxresdefault.jpg", - placeholder: (context, url) => Icon(ZetaIcons.user_round), - errorWidget: (context, url, error) => Icon(Icons.error), + placeholder: (context, url) => ZetaIcon(ZetaIcons.user), + errorWidget: (context, url, error) => ZetaIcon(ZetaIcons.error), fit: BoxFit.cover, ); return ExampleScaffold( name: AvatarExample.name, child: SingleChildScrollView( - padding: EdgeInsets.all(ZetaSpacing.medium), - child: Column( - children: [ - Column( - children: [ - Text( - 'ZetaAvatar.image', - style: TextStyle(fontWeight: FontWeight.bold), - ), - const SizedBox(height: 15), - Row( - children: [ - Column( - children: ZetaAvatarSize.values.map((size) { - final height = size.pixelSize; - final padding = (height - 14) / 2; - return Column( - children: [ - SizedBox( - height: height, - child: Padding( - padding: EdgeInsets.only(top: padding), - child: Text(size.name.toUpperCase()), + scrollDirection: Axis.horizontal, + child: SingleChildScrollView( + padding: EdgeInsets.all(ZetaSpacing.medium), + child: Column( + children: [ + Column( + children: [ + Text( + 'ZetaAvatar.image', + style: TextStyle(fontWeight: FontWeight.bold), + ), + const SizedBox(height: 15), + Row( + children: [ + Column( + children: ZetaAvatarSize.values.map((size) { + final height = size.pixelSize; + final padding = (height - 14) / 2; + return Column( + children: [ + SizedBox( + height: height, + child: Padding( + padding: EdgeInsets.only(top: padding), + child: Text(size.name.toUpperCase()), + ), ), - ), - const SizedBox(height: 20), - ], - ); - }).toList(), - ), - const SizedBox(width: 15), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.image(size: size), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - const SizedBox(width: 15), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.image( - size: size, - borderColor: Zeta.of(context).colors.green, - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - const SizedBox(width: 15), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.image( - size: size, - image: image, - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - const SizedBox(width: 15), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.image( - size: size, - borderColor: Zeta.of(context).colors.green, - image: image, - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - ], - ), - ], - ), - Column( - children: [ - Text( - 'ZetaAvatar.initials', - style: TextStyle(fontWeight: FontWeight.bold), - ), - const SizedBox(height: 15), - Row( - children: [ - Column( - children: ZetaAvatarSize.values.map((size) { - final height = size.pixelSize; - final padding = (height - 14) / 2; - return Column( - children: [ - SizedBox( - height: height, - child: Padding( - padding: EdgeInsets.only(top: padding), - child: Text(size.name.toUpperCase()), + const SizedBox(height: 20), + ], + ); + }).toList(), + ), + const SizedBox(width: 15), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image(size: size), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 15), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + borderColor: Zeta.of(context).colors.green, + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 15), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + image: image, + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 15), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + borderColor: Zeta.of(context).colors.green, + image: image, + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + ], + ), + ], + ), + Column( + children: [ + Text( + 'ZetaAvatar.initials', + style: TextStyle(fontWeight: FontWeight.bold), + ), + const SizedBox(height: 15), + Row( + children: [ + Column( + children: ZetaAvatarSize.values.map((size) { + final height = size.pixelSize; + final padding = (height - 14) / 2; + return Column( + children: [ + SizedBox( + height: height, + child: Padding( + padding: EdgeInsets.only(top: padding), + child: Text(size.name.toUpperCase()), + ), ), - ), - const SizedBox(height: 20), - ], - ); - }).toList(), - ), - const SizedBox(width: 15), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.initials( - size: size, - initials: 'AB', - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - const SizedBox(width: 15), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.initials( - size: size, - initials: 'AB', - borderColor: Zeta.of(context).colors.green, - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - ], - ), - ], - ), - Column( - children: [ - Text( - 'ZetaAvatar.image with badge', - style: TextStyle(fontWeight: FontWeight.bold), - ), - const SizedBox(height: 15), - Row( - children: [ - Column( - children: ZetaAvatarSize.values.map((size) { - final height = size.pixelSize; - final padding = (height - 14) / 2; - return Column( - children: [ - SizedBox( - height: height, - child: Padding( - padding: EdgeInsets.only(top: padding), - child: Text(size.name.toUpperCase()), + const SizedBox(height: 20), + ], + ); + }).toList(), + ), + const SizedBox(width: 15), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.initials( + size: size, + initials: 'AB', + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 15), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.initials( + size: size, + initials: 'AB', + borderColor: Zeta.of(context).colors.green, + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + ], + ), + ], + ), + Column( + children: [ + Text( + 'ZetaAvatar.image with badge', + style: TextStyle(fontWeight: FontWeight.bold), + ), + const SizedBox(height: 15), + Row( + children: [ + Column( + children: ZetaAvatarSize.values.map((size) { + final height = size.pixelSize; + final padding = (height - 14) / 2; + return Column( + children: [ + SizedBox( + height: height, + child: Padding( + padding: EdgeInsets.only(top: padding), + child: Text(size.name.toUpperCase()), + ), ), - ), - const SizedBox(height: 20), - ], - ); - }).toList(), - ), - const SizedBox(width: 12), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.image( - size: size, - upperBadge: ZetaAvatarBadge.notification(value: 3), - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - const SizedBox(width: 12), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.image( - size: size, - borderColor: Zeta.of(context).colors.green, - upperBadge: ZetaAvatarBadge.notification(value: 3), - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - const SizedBox(width: 12), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.image( - size: size, - upperBadge: ZetaAvatarBadge.notification(value: 3), - image: image, - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - const SizedBox(width: 12), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.image( - size: size, - borderColor: Zeta.of(context).colors.green, - upperBadge: ZetaAvatarBadge.notification(value: 3), - image: image, - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - ], - ), - ], - ), - Column( - children: [ - Text( - 'ZetaAvatar.initials with badge', - style: TextStyle(fontWeight: FontWeight.bold), - ), - const SizedBox(height: 15), - Row( - children: [ - Column( - children: ZetaAvatarSize.values.map((size) { - final height = size.pixelSize; - final padding = (height - 14) / 2; - return Column( - children: [ - SizedBox( - height: height, - child: Padding( - padding: EdgeInsets.only(top: padding), - child: Text(size.name.toUpperCase()), + const SizedBox(height: 20), + ], + ); + }).toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + upperBadge: ZetaAvatarBadge.notification(value: 3), + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + borderColor: Zeta.of(context).colors.green, + upperBadge: ZetaAvatarBadge.notification(value: 3), + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + upperBadge: ZetaAvatarBadge.notification(value: 3), + image: image, + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + borderColor: Zeta.of(context).colors.green, + upperBadge: ZetaAvatarBadge.notification(value: 3), + image: image, + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + ], + ), + ], + ), + Column( + children: [ + Text( + 'ZetaAvatar.initials with badge', + style: TextStyle(fontWeight: FontWeight.bold), + ), + const SizedBox(height: 15), + Row( + children: [ + Column( + children: ZetaAvatarSize.values.map((size) { + final height = size.pixelSize; + final padding = (height - 14) / 2; + return Column( + children: [ + SizedBox( + height: height, + child: Padding( + padding: EdgeInsets.only(top: padding), + child: Text(size.name.toUpperCase()), + ), ), - ), - const SizedBox(height: 20), - ], - ); - }).toList(), - ), - const SizedBox(width: 12), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.initials( - size: size, - initials: 'AB', - upperBadge: ZetaAvatarBadge.notification(value: 3), - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - const SizedBox(width: 12), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.initials( - size: size, - initials: 'AB', - borderColor: Zeta.of(context).colors.green, - upperBadge: ZetaAvatarBadge.notification(value: 3), - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - ], - ), - ], - ), - Column( - children: [ - Text( - 'ZetaAvatar.image with special status', - style: TextStyle(fontWeight: FontWeight.bold), - ), - const SizedBox(height: 15), - Row( - children: [ - Column( - children: ZetaAvatarSize.values.map((size) { - final height = size.pixelSize; - final padding = (height - 14) / 2; - return Column( - children: [ - SizedBox( - height: height, - child: Padding( - padding: EdgeInsets.only(top: padding), - child: Text(size.name.toUpperCase()), + const SizedBox(height: 20), + ], + ); + }).toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.initials( + size: size, + initials: 'AB', + upperBadge: ZetaAvatarBadge.notification(value: 3), + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.initials( + size: size, + initials: 'AB', + borderColor: Zeta.of(context).colors.green, + upperBadge: ZetaAvatarBadge.notification(value: 3), + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + ], + ), + ], + ), + Column( + children: [ + Text( + 'ZetaAvatar.image with special status', + style: TextStyle(fontWeight: FontWeight.bold), + ), + const SizedBox(height: 15), + Row( + children: [ + Column( + children: ZetaAvatarSize.values.map((size) { + final height = size.pixelSize; + final padding = (height - 14) / 2; + return Column( + children: [ + SizedBox( + height: height, + child: Padding( + padding: EdgeInsets.only(top: padding), + child: Text(size.name.toUpperCase()), + ), ), - ), - const SizedBox(height: 20), - ], - ); - }).toList(), - ), - const SizedBox(width: 12), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.image( - size: size, - lowerBadge: ZetaAvatarBadge.icon(), - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - const SizedBox(width: 12), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.image( - size: size, - borderColor: Zeta.of(context).colors.green, - lowerBadge: ZetaAvatarBadge.icon(), - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - const SizedBox(width: 12), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.image( - size: size, - lowerBadge: ZetaAvatarBadge.icon(), - image: image, - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - const SizedBox(width: 12), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.image( - size: size, - borderColor: Zeta.of(context).colors.green, - lowerBadge: ZetaAvatarBadge.icon(), - image: image, - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - ], - ), - ], - ), - Column( - children: [ - Text( - 'ZetaAvatar.initials with special status', - style: TextStyle(fontWeight: FontWeight.bold), - ), - const SizedBox(height: 15), - Row( - children: [ - Column( - children: ZetaAvatarSize.values.map((size) { - final height = size.pixelSize; - final padding = (height - 14) / 2; - return Column( - children: [ - SizedBox( - height: height, - child: Padding( - padding: EdgeInsets.only(top: padding), - child: Text(size.name.toUpperCase()), + const SizedBox(height: 20), + ], + ); + }).toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + lowerBadge: ZetaAvatarBadge.icon(), + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + borderColor: Zeta.of(context).colors.green, + lowerBadge: ZetaAvatarBadge.icon(), + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + lowerBadge: ZetaAvatarBadge.icon(), + image: image, + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + borderColor: Zeta.of(context).colors.green, + lowerBadge: ZetaAvatarBadge.icon(), + image: image, + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + ], + ), + ], + ), + Column( + children: [ + Text( + 'ZetaAvatar.initials with special status', + style: TextStyle(fontWeight: FontWeight.bold), + ), + const SizedBox(height: 15), + Row( + children: [ + Column( + children: ZetaAvatarSize.values.map((size) { + final height = size.pixelSize; + final padding = (height - 14) / 2; + return Column( + children: [ + SizedBox( + height: height, + child: Padding( + padding: EdgeInsets.only(top: padding), + child: Text(size.name.toUpperCase()), + ), ), - ), - const SizedBox(height: 20), - ], - ); - }).toList(), - ), - const SizedBox(width: 12), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.initials( - size: size, - initials: 'AB', - lowerBadge: ZetaAvatarBadge.icon(), - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - const SizedBox(width: 12), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.initials( - size: size, - initials: 'AB', - borderColor: Zeta.of(context).colors.green, - lowerBadge: ZetaAvatarBadge.icon(), - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - ], - ), - ], - ), - Column( - children: [ - Text( - 'ZetaAvatar with notification badge and status badge', - style: TextStyle(fontWeight: FontWeight.bold), - ), - const SizedBox(height: 15), - Row( - children: [ - Column( - children: ZetaAvatarSize.values.map((size) { - final height = size.pixelSize; - final padding = (height - 14) / 2; - return Column( - children: [ - SizedBox( - height: height, - child: Padding( - padding: EdgeInsets.only(top: padding), - child: Text(size.name.toUpperCase()), + const SizedBox(height: 20), + ], + ); + }).toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.initials( + size: size, + initials: 'AB', + lowerBadge: ZetaAvatarBadge.icon(), + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.initials( + size: size, + initials: 'AB', + borderColor: Zeta.of(context).colors.green, + lowerBadge: ZetaAvatarBadge.icon(), + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + ], + ), + ], + ), + Column( + children: [ + Text( + 'ZetaAvatar with notification badge and status badge', + style: TextStyle(fontWeight: FontWeight.bold), + ), + const SizedBox(height: 15), + Row( + children: [ + Column( + children: ZetaAvatarSize.values.map((size) { + final height = size.pixelSize; + final padding = (height - 14) / 2; + return Column( + children: [ + SizedBox( + height: height, + child: Padding( + padding: EdgeInsets.only(top: padding), + child: Text(size.name.toUpperCase()), + ), ), - ), - const SizedBox(height: 20), - ], - ); - }).toList(), - ), - const SizedBox(width: 12), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.image( - size: size, - image: image, - upperBadge: ZetaAvatarBadge.notification(value: 3), - lowerBadge: ZetaAvatarBadge.icon(), - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - const SizedBox(width: 12), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.image( - size: size, - image: image, - borderColor: Zeta.of(context).colors.green, - upperBadge: ZetaAvatarBadge.notification(value: 3), - lowerBadge: ZetaAvatarBadge.icon(), - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.initials( - size: size, - initials: 'AB', - upperBadge: ZetaAvatarBadge.notification(value: 3), - lowerBadge: ZetaAvatarBadge.icon(), - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - const SizedBox(width: 12), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.initials( - size: size, - initials: 'AB', - borderColor: Zeta.of(context).colors.green, - upperBadge: ZetaAvatarBadge.notification(value: 3), - lowerBadge: ZetaAvatarBadge.icon(), - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - ], - ), - ], - ), - ].divide(const SizedBox(height: ZetaSpacing.xl_2)).toList(), + const SizedBox(height: 20), + ], + ); + }).toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + image: image, + upperBadge: ZetaAvatarBadge.notification(value: 3), + lowerBadge: ZetaAvatarBadge.icon(), + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + image: image, + borderColor: Zeta.of(context).colors.green, + upperBadge: ZetaAvatarBadge.notification(value: 3), + lowerBadge: ZetaAvatarBadge.icon(), + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.initials( + size: size, + initials: 'AB', + upperBadge: ZetaAvatarBadge.notification(value: 3), + lowerBadge: ZetaAvatarBadge.icon(), + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.initials( + size: size, + initials: 'AB', + borderColor: Zeta.of(context).colors.green, + upperBadge: ZetaAvatarBadge.notification(value: 3), + lowerBadge: ZetaAvatarBadge.icon(), + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + ], + ), + ], + ), + ].divide(const SizedBox(height: ZetaSpacing.xl_2)).toList(), + ), ), ), ); diff --git a/example/lib/pages/components/badges_example.dart b/example/lib/pages/components/badges_example.dart index 5fe86ef2..9d33f3df 100644 --- a/example/lib/pages/components/badges_example.dart +++ b/example/lib/pages/components/badges_example.dart @@ -19,9 +19,9 @@ class BadgesExample extends StatelessWidget { _DividingText('Status Label'), _StatusLabel(), _DividingText('Priority Pill'), - _PriorityPill(), + _PriorityPill(ZetaPriorityPillSize.large), const SizedBox(height: ZetaSpacing.xl_4), - _PriorityPill(size: ZetaPriorityPillSize.small), + _PriorityPill(ZetaPriorityPillSize.small), _DividingText('Badge'), _Badge(), _DividingText('Indicators'), @@ -57,9 +57,7 @@ class _StatusLabel extends StatelessWidget { crossAxisAlignment: CrossAxisAlignment.center, children: [ ZetaStatusLabel(label: 'Label', status: type), - ZetaStatusLabel(label: 'Label', status: type, customIcon: ZetaIcons.star_round), - ZetaStatusLabel(label: 'Label', status: type, rounded: false), - ZetaStatusLabel(label: 'Label', status: type, rounded: false, customIcon: ZetaIcons.star_sharp), + ZetaStatusLabel(label: 'Label', status: type, customIcon: ZetaIcons.star), ], ); } @@ -79,9 +77,7 @@ class _StatusLabel extends StatelessWidget { } class _PriorityPill extends StatelessWidget { - const _PriorityPill({ - this.size = ZetaPriorityPillSize.large, - }); + const _PriorityPill(this.size); final ZetaPriorityPillSize size; @@ -108,15 +104,6 @@ class _PriorityPill extends StatelessWidget { ZetaPriorityPill(size: size, type: ZetaPriorityPillType.low), ].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), ), - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - ZetaPriorityPill(size: size, rounded: false), - ZetaPriorityPill(size: size, rounded: false, type: ZetaPriorityPillType.high), - ZetaPriorityPill(size: size, rounded: false, type: ZetaPriorityPillType.medium), - ZetaPriorityPill(size: size, rounded: false, type: ZetaPriorityPillType.low), - ].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), - ), ], ); } @@ -131,7 +118,6 @@ class _Badge extends StatelessWidget { crossAxisAlignment: CrossAxisAlignment.center, children: [ ZetaLabel(label: 'Label', status: type), - ZetaLabel(label: 'Label', status: type, rounded: false), ], ); } @@ -243,10 +229,8 @@ class _Tags extends StatelessWidget { child: Row( mainAxisSize: MainAxisSize.min, children: [ - ZetaTag.left(label: 'Sharp', rounded: false), - ZetaTag.right(label: 'Sharp', rounded: false), - ZetaTag.left(label: 'Rounded'), - ZetaTag.right(label: 'Rounded'), + ZetaTag.left(label: 'Left'), + ZetaTag.right(label: 'Right'), ].divide(SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), ), ); diff --git a/example/lib/pages/components/banner_example.dart b/example/lib/pages/components/banner_example.dart index 002848c8..800879fc 100644 --- a/example/lib/pages/components/banner_example.dart +++ b/example/lib/pages/components/banner_example.dart @@ -24,7 +24,7 @@ class BannerExample extends StatelessWidget { title: 'Centered', context: context, titleStart: true, - leadingIcon: ZetaIcons.info_round, + leadingIcon: ZetaIcons.info, ), ZetaBanner( type: ZetaBannerStatus.primary, @@ -36,30 +36,30 @@ class BannerExample extends StatelessWidget { context: context, title: 'Title left with arrow', titleStart: true, - trailing: Icon(ZetaIcons.chevron_right_round), + trailing: ZetaIcon(ZetaIcons.chevron_right), ), ZetaBanner( type: ZetaBannerStatus.primary, title: 'Title left + Icon', titleStart: true, context: context, - leadingIcon: ZetaIcons.info_round, + leadingIcon: ZetaIcons.info, ), ZetaBanner( type: ZetaBannerStatus.primary, context: context, title: 'Title left + Icon with Arrow', titleStart: true, - leadingIcon: ZetaIcons.info_round, + leadingIcon: ZetaIcons.info, trailing: IconButton( - icon: Icon(ZetaIcons.chevron_right_round), + icon: ZetaIcon(ZetaIcons.chevron_right), onPressed: () { ScaffoldMessenger.of(context).showMaterialBanner(ZetaBanner( title: 'Title', context: context, type: ZetaBannerStatus.primary, trailing: IconButton( - icon: Icon(ZetaIcons.close_round), + icon: ZetaIcon(ZetaIcons.close), onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(), ), )); @@ -72,16 +72,16 @@ class BannerExample extends StatelessWidget { context: context, title: 'Centered', titleStart: true, - leadingIcon: ZetaIcons.info_round, + leadingIcon: ZetaIcons.info, trailing: IconButton( - icon: Icon(ZetaIcons.chevron_right_round), + icon: ZetaIcon(ZetaIcons.chevron_right), onPressed: () { ScaffoldMessenger.of(context).showMaterialBanner(ZetaBanner( title: 'Title', context: context, type: ZetaBannerStatus.positive, trailing: IconButton( - icon: Icon(ZetaIcons.close_round), + icon: ZetaIcon(ZetaIcons.close), onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(), ), )); @@ -93,16 +93,16 @@ class BannerExample extends StatelessWidget { title: 'Centered', context: context, titleStart: true, - leadingIcon: ZetaIcons.info_round, + leadingIcon: ZetaIcons.info, trailing: IconButton( - icon: Icon(ZetaIcons.chevron_right_round), + icon: ZetaIcon(ZetaIcons.chevron_right), onPressed: () { ScaffoldMessenger.of(context).showMaterialBanner(ZetaBanner( title: 'Title', context: context, type: ZetaBannerStatus.warning, trailing: IconButton( - icon: Icon(ZetaIcons.close_round), + icon: ZetaIcon(ZetaIcons.close), onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(), ), )); @@ -114,16 +114,16 @@ class BannerExample extends StatelessWidget { title: 'Centered', context: context, titleStart: true, - leadingIcon: ZetaIcons.info_round, + leadingIcon: ZetaIcons.info, trailing: IconButton( - icon: Icon(ZetaIcons.chevron_right_round), + icon: ZetaIcon(ZetaIcons.chevron_right), onPressed: () { ScaffoldMessenger.of(context).showMaterialBanner(ZetaBanner( title: 'Title', context: context, type: ZetaBannerStatus.negative, trailing: IconButton( - icon: Icon(ZetaIcons.close_round), + icon: ZetaIcon(ZetaIcons.close), onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(), ), )); @@ -141,7 +141,6 @@ class BannerExample extends StatelessWidget { onClose: () {}, status: ZetaWidgetStatus.positive, title: 'Banner Title', - rounded: false, ), ZetaInPageBanner( content: Text(_content), @@ -155,7 +154,6 @@ class BannerExample extends StatelessWidget { onClose: () {}, status: ZetaWidgetStatus.negative, title: 'Banner Title Banner Title Banner Title Banner Title', - rounded: false, ), ZetaInPageBanner( content: Text(_content), @@ -177,7 +175,6 @@ class BannerExample extends StatelessWidget { Column buildExampleBannerColumn( ZetaWidgetStatus status, { - bool rounded = true, IconData? customIcon, }) { return Column( @@ -187,7 +184,6 @@ class BannerExample extends StatelessWidget { ZetaInPageBanner( content: Text(_content), onClose: () {}, - rounded: rounded, status: status, title: 'Banner Title', customIcon: customIcon, diff --git a/example/lib/pages/components/bottom_sheet_example.dart b/example/lib/pages/components/bottom_sheet_example.dart index ff627041..16d51987 100644 --- a/example/lib/pages/components/bottom_sheet_example.dart +++ b/example/lib/pages/components/bottom_sheet_example.dart @@ -38,7 +38,7 @@ class _BottomSheetExampleState extends State { 6, (index) => ZetaMenuItem.vertical( label: Text('Menu Item'), - icon: Icon(ZetaIcons.star_round), + icon: ZetaIcon(ZetaIcons.star), onTap: () {}, ), ), @@ -63,7 +63,7 @@ class _BottomSheetExampleState extends State { (index) => ZetaMenuItem.horizontal( label: Text('Menu Item'), onTap: () {}, - leading: Icon(ZetaIcons.star_round), + leading: ZetaIcon(ZetaIcons.star), ), ), ), diff --git a/example/lib/pages/components/button_example.dart b/example/lib/pages/components/button_example.dart index b6c06df9..c2c77ad8 100644 --- a/example/lib/pages/components/button_example.dart +++ b/example/lib/pages/components/button_example.dart @@ -110,35 +110,30 @@ class _ButtonExampleState extends State { flex: 8, child: Column( children: [ - Text('Rounded Buttons', style: ZetaTextStyles.displayMedium), - Column(children: buttons(ZetaWidgetBorder.rounded)), - Text('Sharp Buttons', style: ZetaTextStyles.displayMedium), - Column(children: buttons(ZetaWidgetBorder.sharp)), + Text('Regular Buttons', style: ZetaTextStyles.displayMedium), + Column(children: buttons(null)), Text('Full Buttons', style: ZetaTextStyles.displayMedium), Column(children: buttons(ZetaWidgetBorder.full)), Text('Icon Buttons', style: ZetaTextStyles.displayLarge), - Text('Rounded Buttons', style: ZetaTextStyles.displayMedium), - Column(children: inputButtons(ZetaWidgetBorder.rounded)), - Text('Sharp Buttons', style: ZetaTextStyles.displayMedium), - Column(children: inputButtons(ZetaWidgetBorder.sharp)), + Column(children: iconButtons(null)), + Text('Full Icon Buttons', style: ZetaTextStyles.displayMedium), + Column(children: iconButtons(ZetaWidgetBorder.full)), Text('Group Buttons', style: ZetaTextStyles.displayLarge), - Column( - children: groupButtons(ZetaWidgetBorder.rounded), - ), + Column(children: groupButtons(null)), Text('Floating Action Buttons', style: ZetaTextStyles.displayMedium), Text('Tap buttons to change current FAB: ', style: ZetaTextStyles.bodyMedium), Wrap(children: fabs.divide(SizedBox.square(dimension: 10)).toList()), ].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), ), ), - Expanded(child: const SizedBox()), + Expanded(child: const Nothing()), ], ), ), ); } - List buttons(ZetaWidgetBorder borderType) { + List buttons(ZetaWidgetBorder? borderType) { return List.generate( ZetaWidgetSize.values.length + 1, (index) => SingleChildScrollView( @@ -160,7 +155,7 @@ class _ButtonExampleState extends State { ).reversed.divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(); } - List inputButtons(ZetaWidgetBorder borderType) { + List iconButtons(ZetaWidgetBorder? borderType) { return List.generate( ZetaWidgetSize.values.length + 1, (index) => SingleChildScrollView( @@ -175,8 +170,8 @@ class _ButtonExampleState extends State { size: ZetaWidgetSize.values[index == 0 ? 0 : index - 1], borderType: borderType, icon: ZetaButtonType.values[index2] == ZetaButtonType.negative - ? ZetaIcons.delete_round - : ZetaIcons.more_horizontal_round, + ? ZetaIcons.delete + : ZetaIcons.more_horizontal, ), ).divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), ), @@ -184,9 +179,9 @@ class _ButtonExampleState extends State { ).reversed.divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(); } - List groupButtons(ZetaWidgetBorder) { + List groupButtons(ZetaWidgetBorder? ZetaWidgetBorder) { return [ - ZetaButtonGroup(isLarge: true, rounded: true, buttons: [ + ZetaButtonGroup(isLarge: true, buttons: [ ZetaGroupButton( onPressed: () {}, label: "Label", @@ -196,7 +191,7 @@ class _ButtonExampleState extends State { label: "Label", ), ]), - ZetaButtonGroup(isLarge: true, rounded: true, buttons: [ + ZetaButtonGroup(isLarge: true, buttons: [ ZetaGroupButton( onPressed: () {}, label: "Label", @@ -212,11 +207,10 @@ class _ButtonExampleState extends State { ]), ZetaButtonGroup( isLarge: true, - rounded: true, isInverse: true, buttons: [ ZetaGroupButton.icon( - icon: ZetaIcons.star_round, + icon: ZetaIcons.star, onPressed: () {}, label: "Label", ), @@ -229,33 +223,32 @@ class _ButtonExampleState extends State { items: [ ZetaDropdownItem( value: 'Item 1', - icon: Icon(ZetaIcons.star_half), + icon: ZetaIcon(ZetaIcons.star_half), ), ZetaDropdownItem(value: 'Item 2'), ], ), ZetaGroupButton.icon( - icon: ZetaIcons.star_round, + icon: ZetaIcons.star, label: "Label", ), ], ), ZetaButtonGroup( isLarge: true, - rounded: true, buttons: [ ZetaGroupButton.icon( - icon: ZetaIcons.star_round, + icon: ZetaIcons.star, label: "Label", onPressed: () {}, ), ZetaGroupButton.icon( - icon: ZetaIcons.star_round, + icon: ZetaIcons.star, label: "Label", onPressed: () {}, ), ZetaGroupButton.icon( - icon: ZetaIcons.star_round, + icon: ZetaIcons.star, label: "Label", onPressed: () {}, ), diff --git a/example/lib/pages/components/checkbox_example.dart b/example/lib/pages/components/checkbox_example.dart index 4249cd27..4dc69b46 100644 --- a/example/lib/pages/components/checkbox_example.dart +++ b/example/lib/pages/components/checkbox_example.dart @@ -43,14 +43,10 @@ class _CheckBoxExampleState extends State { ), ], ), - Row(children: [Text('Sharp Checkbox Enabled')]), + Row(children: [Text('Checkbox Enabled')]), getCheckBoxRow(isEnabled: true), - Row(children: [Text('Sharp Checkbox Disabled')]), + Row(children: [Text('Checkbox Disabled')]), getCheckBoxRow(isEnabled: false), - Row(children: [Text('Rounded Checkbox Enabled')]), - getCheckBoxRow(isEnabled: true, isSharp: false), - Row(children: [Text('Rounded Checkbox Disabled')]), - getCheckBoxRow(isEnabled: false, isSharp: false), ], ), ), @@ -58,7 +54,7 @@ class _CheckBoxExampleState extends State { } } -Row getCheckBoxRow({required bool isEnabled, bool isSharp = true}) { +Row getCheckBoxRow({required bool isEnabled}) { return Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.spaceAround, @@ -66,17 +62,14 @@ Row getCheckBoxRow({required bool isEnabled, bool isSharp = true}) { ZetaCheckbox( value: true, label: 'Label', - rounded: !isSharp, onChanged: isEnabled ? (value) => {} : null, ), ZetaCheckbox( value: false, label: 'Label', - rounded: !isSharp, onChanged: isEnabled ? (value) => {} : null, ), ZetaCheckbox( - rounded: !isSharp, onChanged: isEnabled ? (value) => {} : null, value: false, ) diff --git a/example/lib/pages/components/chip_example.dart b/example/lib/pages/components/chip_example.dart index 8eb0222f..2294e231 100644 --- a/example/lib/pages/components/chip_example.dart +++ b/example/lib/pages/components/chip_example.dart @@ -21,33 +21,10 @@ class _ChipExampleState extends State { style: TextStyle(fontWeight: FontWeight.bold), ), const SizedBox(height: 10), - Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - Expanded( - child: Column( - children: [ - ZetaInputChip( - label: 'Label', - leading: ZetaAvatar.initials(initials: "ZA"), - trailing: IconButton(icon: Icon(ZetaIcons.close_round), onPressed: () {}), - ), - ], - ), - ), - Expanded( - child: Column( - children: [ - ZetaInputChip( - label: 'Label', - rounded: false, - leading: const Icon(ZetaIcons.user_round), - trailing: Icon(ZetaIcons.close_sharp), - ), - ], - ), - ), - ], + ZetaInputChip( + label: 'Label', + leading: const ZetaIcon(ZetaIcons.user), + trailing: ZetaIcon(ZetaIcons.close), ), ]); @@ -58,35 +35,14 @@ class _ChipExampleState extends State { style: TextStyle(fontWeight: FontWeight.bold), ), const SizedBox(height: 10), - Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - Expanded( - child: Column( - children: [ - ZetaAssistChip( - label: 'Label', - leading: Icon(ZetaIcons.star_round), - draggable: true, - data: 'Round Assist chip', - ), - ], - ), - ), - Expanded( - child: Column( - children: [ - ZetaAssistChip( - label: 'Label', - rounded: false, - leading: Icon(ZetaIcons.star_round), - data: 'Sharp Assist chip', - draggable: true, - ), - ], - ), - ), - ], + SizedBox( + height: 40, + child: ZetaAssistChip( + label: 'Label', + leading: ZetaIcon(ZetaIcons.star), + draggable: true, + data: 'Assist chip', + ), ), ]); @@ -97,35 +53,14 @@ class _ChipExampleState extends State { style: TextStyle(fontWeight: FontWeight.bold), ), const SizedBox(height: 10), - Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - Expanded( - child: Column( - children: [ - ZetaFilterChip( - label: 'Label', - selected: true, - data: 'Round filter chip', - draggable: true, - ), - ], - ), - ), - Expanded( - child: Column( - children: [ - ZetaFilterChip( - label: 'Label', - rounded: false, - selected: true, - data: 'Sharp filter chip', - draggable: true, - ), - ], - ), - ), - ], + SizedBox( + height: 40, + child: ZetaFilterChip( + label: 'Label', + selected: true, + data: 'Filter chip', + draggable: true, + ), ), ]); final colors = Zeta.of(context).colors; @@ -136,12 +71,6 @@ class _ChipExampleState extends State { child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ - Row( - children: [ - Expanded(child: Center(child: Text('Rounded'))), - Expanded(child: Center(child: Text('Sharp'))), - ], - ), inputChipExample, assistChipExample, filterChipExample, diff --git a/example/lib/pages/components/date_input_example.dart b/example/lib/pages/components/date_input_example.dart index 89037f82..a1e3218a 100644 --- a/example/lib/pages/components/date_input_example.dart +++ b/example/lib/pages/components/date_input_example.dart @@ -23,7 +23,7 @@ class _DateInputExampleState extends State { children: [ Padding( padding: const EdgeInsets.only(top: 20), - child: Text('Rounded', style: ZetaTextStyles.titleMedium), + child: Text('Large', style: ZetaTextStyles.titleMedium), ), Padding( padding: const EdgeInsets.all(20), @@ -32,12 +32,13 @@ class _DateInputExampleState extends State { hintText: 'Enter birthdate', errorText: _errorText ?? 'Invalid date', initialValue: DateTime.now(), + size: ZetaWidgetSize.large, ), ), Divider(color: Colors.grey[200]), Padding( padding: const EdgeInsets.only(top: 20), - child: Text('Sharp', style: ZetaTextStyles.titleMedium), + child: Text('Medium', style: ZetaTextStyles.titleMedium), ), Padding( padding: const EdgeInsets.all(20), @@ -45,27 +46,13 @@ class _DateInputExampleState extends State { label: 'Label', hintText: 'Default hint text', errorText: 'Oops! Error hint text', - rounded: false, - dateFormat: 'yyyy-MM-dd', - ), - ), - Divider(color: Colors.grey[200]), - Padding( - padding: const EdgeInsets.only(top: 20), - child: Text('Disabled', style: ZetaTextStyles.titleMedium), - ), - Padding( - padding: const EdgeInsets.all(20), - child: ZetaDateInput( - label: 'Label', - hintText: 'Default hint text', - disabled: true, + size: ZetaWidgetSize.medium, ), ), Divider(color: Colors.grey[200]), Padding( padding: const EdgeInsets.only(top: 20), - child: Text('Medium', style: ZetaTextStyles.titleMedium), + child: Text('Small', style: ZetaTextStyles.titleMedium), ), Padding( padding: const EdgeInsets.all(20), @@ -73,21 +60,20 @@ class _DateInputExampleState extends State { label: 'Label', hintText: 'Default hint text', errorText: 'Oops! Error hint text', - size: ZetaWidgetSize.medium, + size: ZetaWidgetSize.small, ), ), Divider(color: Colors.grey[200]), Padding( padding: const EdgeInsets.only(top: 20), - child: Text('Small', style: ZetaTextStyles.titleMedium), + child: Text('Disabled', style: ZetaTextStyles.titleMedium), ), Padding( padding: const EdgeInsets.all(20), child: ZetaDateInput( label: 'Label', hintText: 'Default hint text', - errorText: 'Oops! Error hint text', - size: ZetaWidgetSize.small, + disabled: true, ), ), ], diff --git a/example/lib/pages/components/dialog_example.dart b/example/lib/pages/components/dialog_example.dart index 6e13cca9..25072683 100644 --- a/example/lib/pages/components/dialog_example.dart +++ b/example/lib/pages/components/dialog_example.dart @@ -20,8 +20,8 @@ class DialogExample extends StatelessWidget { context, useRootNavigator: false, title: 'Dialog Title', - icon: Icon( - ZetaIcons.warning_round, + icon: ZetaIcon( + ZetaIcons.warning, color: zeta.colors.surfaceWarning, ), message: @@ -35,8 +35,8 @@ class DialogExample extends StatelessWidget { context, useRootNavigator: false, title: 'Dialog Title', - icon: Icon( - ZetaIcons.warning_round, + icon: ZetaIcon( + ZetaIcons.warning, color: zeta.colors.surfaceWarning, ), message: @@ -51,8 +51,8 @@ class DialogExample extends StatelessWidget { context, useRootNavigator: false, title: 'Dialog Title', - icon: Icon( - ZetaIcons.warning_round, + icon: ZetaIcon( + ZetaIcons.warning, color: zeta.colors.surfaceWarning, ), message: @@ -69,8 +69,8 @@ class DialogExample extends StatelessWidget { context, useRootNavigator: false, title: 'Dialog Title', - icon: Icon( - ZetaIcons.warning_round, + icon: ZetaIcon( + ZetaIcons.warning, color: zeta.colors.surfaceWarning, ), message: @@ -78,7 +78,6 @@ class DialogExample extends StatelessWidget { headerAlignment: ZetaDialogHeaderAlignment.left, primaryButtonLabel: 'Confirm', secondaryButtonLabel: 'Cancel', - rounded: false, ), child: Text( 'Show dialog with header to the left\nand sharp buttons', diff --git a/example/lib/pages/components/dialpad_example.dart b/example/lib/pages/components/dialpad_example.dart index 121dc923..d77d76e6 100644 --- a/example/lib/pages/components/dialpad_example.dart +++ b/example/lib/pages/components/dialpad_example.dart @@ -45,7 +45,7 @@ class _DialPadExampleState extends State { ), ), IconButton( - icon: Icon(Icons.backspace), + icon: ZetaIcon(Icons.backspace), onPressed: () => number.length == 0 ? null : setState( @@ -57,7 +57,7 @@ class _DialPadExampleState extends State { Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - const SizedBox(), + const Nothing(), Text( text, style: ZetaTextStyles.heading3, @@ -66,7 +66,7 @@ class _DialPadExampleState extends State { textAlign: TextAlign.center, ), IconButton( - icon: Icon(Icons.backspace), + icon: ZetaIcon(Icons.backspace), onPressed: () => text.length == 0 ? null : setState( diff --git a/example/lib/pages/components/dropdown_example.dart b/example/lib/pages/components/dropdown_example.dart index 37967d48..04a7e314 100644 --- a/example/lib/pages/components/dropdown_example.dart +++ b/example/lib/pages/components/dropdown_example.dart @@ -18,11 +18,11 @@ class _DropdownExampleState extends State { final items = [ ZetaDropdownItem( value: "Item 1", - icon: Icon(ZetaIcons.star_round), + icon: ZetaIcon(ZetaIcons.star), ), ZetaDropdownItem( value: "Item 2", - icon: Icon(ZetaIcons.star_half_round), + icon: ZetaIcon(ZetaIcons.star_half), ), ZetaDropdownItem( value: "Item 3", diff --git a/example/lib/pages/components/filter_selection_example.dart b/example/lib/pages/components/filter_selection_example.dart index 89ab64fe..49d8e006 100644 --- a/example/lib/pages/components/filter_selection_example.dart +++ b/example/lib/pages/components/filter_selection_example.dart @@ -34,19 +34,6 @@ class _FilterSelectionExampleState extends State { ], onPressed: () {}, ), - const SizedBox(height: ZetaSpacing.large), - ZetaFilterSelection( - rounded: false, - items: [ - for (int i = 0; i < items2.length; i++) - ZetaFilterChip( - label: 'Label ${i + 1}', - selected: items2[i], - onTap: (value) => setState(() => items2[i] = value), - ), - ], - onPressed: () {}, - ), ], ), ); diff --git a/example/lib/pages/components/global_header_example.dart b/example/lib/pages/components/global_header_example.dart index e83759ae..5a1a2b9c 100644 --- a/example/lib/pages/components/global_header_example.dart +++ b/example/lib/pages/components/global_header_example.dart @@ -18,38 +18,35 @@ class _GroupHeaderExampleState extends State { Widget build(BuildContext context) { return ExampleScaffold( name: "Global Header", - child: LayoutBuilder(builder: (context, constraints) { - return Center( - child: SingleChildScrollView( - child: Column(children: [ - Text(constraints.maxWidth.toString()), - ZetaGlobalHeader( - title: "Title", - tabItems: childrenOne, - searchBar: ZetaSearchBar(shape: ZetaWidgetBorder.full, size: ZetaWidgetSize.large), - onAppsButton: () {}, - actionButtons: [ - IconButton( - onPressed: () {}, - icon: const Icon( - ZetaIcons.alert_round, - ), + child: Center( + child: SingleChildScrollView( + child: Column(children: [ + ZetaGlobalHeader( + title: "Title", + tabItems: childrenOne, + searchBar: ZetaSearchBar(shape: ZetaWidgetBorder.full, size: ZetaWidgetSize.large), + onAppsButton: () {}, + actionButtons: [ + IconButton( + onPressed: () {}, + icon: const ZetaIcon( + ZetaIcons.alert, ), - IconButton( - onPressed: () {}, - icon: const Icon( - ZetaIcons.help_round, - ), + ), + IconButton( + onPressed: () {}, + icon: const ZetaIcon( + ZetaIcons.help, ), - ], - avatar: const ZetaAvatar(initials: 'PS'), - ), - const SizedBox(height: ZetaSpacing.xl_1), - ZetaGlobalHeader(title: "Title", tabItems: childrenTwo), - ]), - ), - ); - }), + ), + ], + avatar: const ZetaAvatar(initials: 'PS'), + ), + const SizedBox(height: ZetaSpacing.xl_1), + ZetaGlobalHeader(title: "Title", tabItems: childrenTwo), + ]), + ), + ), ); } } diff --git a/example/lib/pages/components/list_example.dart b/example/lib/pages/components/list_example.dart index da9c6341..2c188a23 100644 --- a/example/lib/pages/components/list_example.dart +++ b/example/lib/pages/components/list_example.dart @@ -18,7 +18,7 @@ class ListExample extends StatelessWidget { ZetaListItem(primaryText: 'Item 2'), ZetaDropdownListItem( primaryText: 'Item 3', - leading: Icon(ZetaIcons.star_round), + leading: ZetaIcon(ZetaIcons.star), expanded: true, items: [ ZetaListItem.checkbox( diff --git a/example/lib/pages/components/list_item_example.dart b/example/lib/pages/components/list_item_example.dart index 14a48adf..cc0cf1d4 100644 --- a/example/lib/pages/components/list_item_example.dart +++ b/example/lib/pages/components/list_item_example.dart @@ -40,7 +40,7 @@ class _ListItemExampleState extends State { )), _buildListItem( 'Icon Left', - ZetaListItem(primaryText: 'List Item', leading: Icon(ZetaIcons.star_round)), + ZetaListItem(primaryText: 'List Item', leading: ZetaIcon(ZetaIcons.star)), ), _buildListItem( 'Toggle Right', @@ -102,8 +102,8 @@ class _ListItemExampleState extends State { ], expanded: true, primaryText: 'List Item', - leading: Icon( - ZetaIcons.star_round, + leading: ZetaIcon( + ZetaIcons.star, ), ), ), diff --git a/example/lib/pages/components/navigation_bar_example.dart b/example/lib/pages/components/navigation_bar_example.dart index 87731510..b1497528 100644 --- a/example/lib/pages/components/navigation_bar_example.dart +++ b/example/lib/pages/components/navigation_bar_example.dart @@ -17,10 +17,10 @@ class _NavigationBarExampleState extends State { @override Widget build(BuildContext context) { final items = [ - ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label', badge: ZetaIndicator(value: 2)), - ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label'), - ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label'), - ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label'), + ZetaNavigationBarItem(icon: ZetaIcons.star, label: 'Label', badge: ZetaIndicator(value: 2)), + ZetaNavigationBarItem(icon: ZetaIcons.star, label: 'Label'), + ZetaNavigationBarItem(icon: ZetaIcons.star, label: 'Label'), + ZetaNavigationBarItem(icon: ZetaIcons.star, label: 'Label'), ]; return ExampleScaffold( diff --git a/example/lib/pages/components/navigation_rail_example.dart b/example/lib/pages/components/navigation_rail_example.dart index 178ae9fd..bb050ef1 100644 --- a/example/lib/pages/components/navigation_rail_example.dart +++ b/example/lib/pages/components/navigation_rail_example.dart @@ -37,19 +37,19 @@ class _NavigationRailExampleState extends State { items: [ ZetaNavigationRailItem( label: 'Label', - icon: Icon(ZetaIcons.star_round), + icon: ZetaIcon(ZetaIcons.star), ), ZetaNavigationRailItem( label: 'User\nPreferences', - icon: Icon(ZetaIcons.star_round), + icon: ZetaIcon(ZetaIcons.star), ), ZetaNavigationRailItem( label: 'Account Settings', - icon: Icon(ZetaIcons.star_round), + icon: ZetaIcon(ZetaIcons.star), ), ZetaNavigationRailItem( label: 'Label', - icon: Icon(ZetaIcons.star_round), + icon: ZetaIcon(ZetaIcons.star), disabled: true, ), ], @@ -58,7 +58,7 @@ class _NavigationRailExampleState extends State { child: Padding( padding: const EdgeInsets.all(ZetaSpacing.xl_1), child: _selectedIndex == null - ? const SizedBox() + ? const Nothing() : Text( _titles[_selectedIndex!], textAlign: TextAlign.center, diff --git a/example/lib/pages/components/notification_list_example.dart b/example/lib/pages/components/notification_list_example.dart index e4b52927..5b908b70 100644 --- a/example/lib/pages/components/notification_list_example.dart +++ b/example/lib/pages/components/notification_list_example.dart @@ -28,7 +28,7 @@ class _NotificationListItemExampleState extends State { Padding(padding: EdgeInsets.only(top: 20)), ZetaPasswordInput( size: ZetaWidgetSize.medium, - rounded: false, hintText: 'Password', controller: _passwordController, validator: (value) { @@ -68,17 +67,15 @@ class _PasswordInputExampleState extends State { } } -List passwordInputExampleRow(ZetaWidgetSize size, {bool rounded = true}) { +List passwordInputExampleRow(ZetaWidgetSize size) { return [ ZetaPasswordInput( size: size, hintText: 'Password', - rounded: rounded, placeholder: 'Password', ), SizedBox(height: 20), ZetaPasswordInput( - rounded: rounded, size: size, placeholder: 'Password', disabled: true, @@ -89,7 +86,6 @@ List passwordInputExampleRow(ZetaWidgetSize size, {bool rounded = true}) label: 'Label', placeholder: 'Password', hintText: 'Default hint text', - rounded: rounded, ), ]; } diff --git a/example/lib/pages/components/phone_input_example.dart b/example/lib/pages/components/phone_input_example.dart index 49ccf0c0..cd0ab5cd 100644 --- a/example/lib/pages/components/phone_input_example.dart +++ b/example/lib/pages/components/phone_input_example.dart @@ -21,10 +21,6 @@ class _PhoneInputExampleState extends State { child: SingleChildScrollView( child: Column( children: [ - Padding( - padding: const EdgeInsets.only(top: 20), - child: Text('Rounded', style: ZetaTextStyles.titleMedium), - ), Padding( padding: const EdgeInsets.all(20), child: ZetaPhoneInput( @@ -40,26 +36,6 @@ class _PhoneInputExampleState extends State { ), ), Divider(color: Colors.grey[200]), - Padding( - padding: const EdgeInsets.only(top: 20), - child: Text('Sharp', style: ZetaTextStyles.titleMedium), - ), - Padding( - padding: const EdgeInsets.all(20), - child: ZetaPhoneInput( - label: 'Phone number', - hint: 'Enter your phone number', - countryDialCode: '+44', - phoneNumber: '987654321', - hasError: _errorText != null, - errorText: _errorText, - onChanged: (value) { - if (value?.isEmpty ?? true) return setState(() => _errorText = null); - }, - rounded: false, - ), - ), - Divider(color: Colors.grey[200]), Padding( padding: const EdgeInsets.only(top: 20), child: Text('Disabled', style: ZetaTextStyles.titleMedium), diff --git a/example/lib/pages/components/progress_example.dart b/example/lib/pages/components/progress_example.dart index cc2b4b70..18309cb3 100644 --- a/example/lib/pages/components/progress_example.dart +++ b/example/lib/pages/components/progress_example.dart @@ -57,7 +57,6 @@ class ProgressExampleState extends State { Wrapper( stepsCompleted: 0, circleSize: ZetaCircleSizes.xl, - rounded: false, isCircle: true, ), SizedBox( @@ -78,7 +77,6 @@ class Wrapper extends StatefulWidget { required this.stepsCompleted, this.type = ZetaProgressBarType.standard, this.isThin = false, - this.rounded = true, this.stateChangeable = false, this.label, this.isCircle = false, @@ -86,7 +84,6 @@ class Wrapper extends StatefulWidget { }); final int stepsCompleted; - final bool? rounded; final ZetaProgressBarType? type; final bool? isThin; final String? label; @@ -139,12 +136,7 @@ class _WrapperState extends State { ) : SizedBox( width: 400, - child: ZetaProgressBar( - progress: progress, - rounded: widget.rounded!, - type: type, - isThin: widget.isThin!, - label: widget.label), + child: ZetaProgressBar(progress: progress, type: type, isThin: widget.isThin!, label: widget.label), ), const SizedBox(width: 40), Row( @@ -156,7 +148,7 @@ class _WrapperState extends State { const SizedBox(width: 40), widget.stateChangeable! ? FilledButton(onPressed: setLoading, child: Text("Start Buffering")) - : SizedBox.shrink() + : const Nothing() ], ) ], diff --git a/example/lib/pages/components/segmented_control_example.dart b/example/lib/pages/components/segmented_control_example.dart index 2d9ff822..ef036160 100644 --- a/example/lib/pages/components/segmented_control_example.dart +++ b/example/lib/pages/components/segmented_control_example.dart @@ -70,7 +70,7 @@ class _SegmentedControlExampleState extends State { for (final value in _iconsSegments) ZetaButtonSegment( value: value, - child: Icon(ZetaIcons.star_round), + child: ZetaIcon(ZetaIcons.star), ), ], onChanged: (value) => setState( diff --git a/example/lib/pages/components/select_input_example.dart b/example/lib/pages/components/select_input_example.dart index e7c145e2..621310fa 100644 --- a/example/lib/pages/components/select_input_example.dart +++ b/example/lib/pages/components/select_input_example.dart @@ -18,11 +18,11 @@ class _SelectInputExampleState extends State { final items = [ ZetaDropdownItem( value: "Item 1", - icon: Icon(ZetaIcons.star_round), + icon: ZetaIcon(ZetaIcons.star), ), ZetaDropdownItem( value: "Item 2", - icon: Icon(ZetaIcons.star_half_round), + icon: ZetaIcon(ZetaIcons.star_half), ), ZetaDropdownItem( value: "Item 3", @@ -43,7 +43,6 @@ class _SelectInputExampleState extends State { label: 'Large', size: ZetaWidgetSize.large, hintText: 'Default hint text', - rounded: false, placeholder: 'Placeholder', initialValue: "Item 1", items: items, diff --git a/example/lib/pages/components/snackbar_example.dart b/example/lib/pages/components/snackbar_example.dart index 5ea2660c..83f0a86c 100644 --- a/example/lib/pages/components/snackbar_example.dart +++ b/example/lib/pages/components/snackbar_example.dart @@ -54,7 +54,6 @@ class SnackBarExample extends StatelessWidget { ScaffoldMessenger.of(context).hideCurrentSnackBar(); }, actionLabel: "Action", - rounded: false, content: Text('This is a snackbar'), ), ); @@ -72,7 +71,7 @@ class SnackBarExample extends StatelessWidget { ZetaSnackBar( context: context, type: ZetaSnackBarType.defaultType, - leadingIcon: Icon(Icons.mood_rounded), + leadingIcon: ZetaIcon(Icons.mood), content: Text('Message with icon'), ), ); diff --git a/example/lib/pages/components/stepper_example.dart b/example/lib/pages/components/stepper_example.dart index 50816f2c..e782f386 100644 --- a/example/lib/pages/components/stepper_example.dart +++ b/example/lib/pages/components/stepper_example.dart @@ -12,7 +12,6 @@ class StepperExample extends StatefulWidget { } class _StepperExampleState extends State { - int _roundedHorizontalStep = 0; int _sharpHorizontalStep = 0; int _verticalStep = 0; @@ -36,39 +35,6 @@ class _StepperExampleState extends State { SizedBox( height: 150, child: ZetaStepper( - currentStep: _roundedHorizontalStep, - onStepTapped: (index) => setState(() => _roundedHorizontalStep = index), - steps: [ - ZetaStep( - type: _getForStepIndex( - currentStep: _roundedHorizontalStep, - stepIndex: 0, - ), - title: Text("Title"), - content: Text("Content"), - ), - ZetaStep( - type: _getForStepIndex( - currentStep: _roundedHorizontalStep, - stepIndex: 1, - ), - title: Text("Title 2"), - ), - ZetaStep( - type: _getForStepIndex( - currentStep: _roundedHorizontalStep, - stepIndex: 2, - ), - title: Text("Title 3"), - content: Text("Content 3"), - ), - ], - ), - ), - SizedBox( - height: 150, - child: ZetaStepper( - rounded: false, currentStep: _sharpHorizontalStep, onStepTapped: (index) => setState(() => _sharpHorizontalStep = index), steps: [ diff --git a/example/lib/pages/components/stepper_input_example.dart b/example/lib/pages/components/stepper_input_example.dart index f03fa351..e1e94b3b 100644 --- a/example/lib/pages/components/stepper_input_example.dart +++ b/example/lib/pages/components/stepper_input_example.dart @@ -26,7 +26,7 @@ class _StepperInputExampleState extends State { initialValue: 5, onChange: (_) {}, ), - ZetaStepperInput(rounded: false), + ZetaStepperInput(), ZetaStepperInput( size: ZetaStepperInputSize.large, onChange: (_) {}, diff --git a/example/lib/pages/components/tabs_example.dart b/example/lib/pages/components/tabs_example.dart index 8774c503..be2a5f7c 100644 --- a/example/lib/pages/components/tabs_example.dart +++ b/example/lib/pages/components/tabs_example.dart @@ -24,8 +24,8 @@ class _TabsExampleState extends State { context: context, onTap: (int) => print(int), tabs: [ - ZetaTab(icon: Icon(ZetaIcons.star_round), text: "Tab Item"), - ZetaTab(icon: Icon(ZetaIcons.star_round), text: "Tab Item"), + ZetaTab(icon: ZetaIcon(ZetaIcons.star), text: "Tab Item"), + ZetaTab(icon: ZetaIcon(ZetaIcons.star), text: "Tab Item"), ], ), ), @@ -55,11 +55,11 @@ class _TabsExampleState extends State { context: context, isScrollable: true, tabs: [ - ZetaTab(icon: Icon(ZetaIcons.star_sharp), text: "Tab Item"), - ZetaTab(icon: Icon(ZetaIcons.star_sharp), text: "Tab Item"), - ZetaTab(icon: Icon(ZetaIcons.star_sharp), text: "Tab Item"), - ZetaTab(icon: Icon(ZetaIcons.star_sharp), text: "Tab Item"), - ZetaTab(icon: Icon(ZetaIcons.star_sharp), text: "Tab Item"), + ZetaTab(icon: ZetaIcon(ZetaIcons.star), text: "Tab Item"), + ZetaTab(icon: ZetaIcon(ZetaIcons.star), text: "Tab Item"), + ZetaTab(icon: ZetaIcon(ZetaIcons.star), text: "Tab Item"), + ZetaTab(icon: ZetaIcon(ZetaIcons.star), text: "Tab Item"), + ZetaTab(icon: ZetaIcon(ZetaIcons.star), text: "Tab Item"), ], ), ), diff --git a/example/lib/pages/components/text_input_example.dart b/example/lib/pages/components/text_input_example.dart index 80bbb133..66b5cd1e 100644 --- a/example/lib/pages/components/text_input_example.dart +++ b/example/lib/pages/components/text_input_example.dart @@ -29,7 +29,7 @@ class TextInputExample extends StatelessWidget { disabled: false, hintText: 'hint text', suffix: IconButton( - icon: Icon(ZetaIcons.add_alert_round), + icon: ZetaIcon(ZetaIcons.add_alert), onPressed: () {}, ), ), @@ -49,8 +49,8 @@ class TextInputExample extends StatelessWidget { child: IconButton( iconSize: 12, splashRadius: 1, - icon: Icon( - ZetaIcons.add_alert_round, + icon: ZetaIcon( + ZetaIcons.add_alert, ), onPressed: () {}, ), @@ -59,8 +59,8 @@ class TextInputExample extends StatelessWidget { const SizedBox(height: 8), ZetaTextInput( placeholder: 'Placeholder', - prefix: Icon( - ZetaIcons.star_round, + prefix: ZetaIcon( + ZetaIcons.star, size: 20, ), ), diff --git a/example/lib/pages/components/time_input_example.dart b/example/lib/pages/components/time_input_example.dart index 75b4b9fb..24aee780 100644 --- a/example/lib/pages/components/time_input_example.dart +++ b/example/lib/pages/components/time_input_example.dart @@ -58,7 +58,6 @@ class TimeInputExample extends StatelessWidget { ), ZetaTimeInput(label: '12 Hr Time Picker', use12Hr: true), ZetaTimeInput(label: 'Disabled Time Picker', disabled: true, hintText: 'Disabled time picker'), - ZetaTimeInput(label: 'Sharp Time Picker', rounded: false), ].divide(const SizedBox(height: 12)).toList(), ), ), diff --git a/example/lib/pages/components/tooltip_example.dart b/example/lib/pages/components/tooltip_example.dart index 4e375ad1..ff94c86a 100644 --- a/example/lib/pages/components/tooltip_example.dart +++ b/example/lib/pages/components/tooltip_example.dart @@ -18,7 +18,6 @@ class TooltipExample extends StatelessWidget { mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ - Text('Rounded'), const SizedBox(height: ZetaSpacing.xl_4), ZetaTooltip( child: Text('Label'), @@ -38,31 +37,6 @@ class TooltipExample extends StatelessWidget { child: Text('Label'), arrowDirection: ZetaTooltipArrowDirection.left, ), - Divider(height: ZetaSpacing.xl_11), - Text('Sharp'), - const SizedBox(height: ZetaSpacing.xl_4), - ZetaTooltip( - child: Text('Label'), - rounded: false, - ), - const SizedBox(height: ZetaSpacing.xl_4), - ZetaTooltip( - child: Text('Label'), - arrowDirection: ZetaTooltipArrowDirection.right, - rounded: false, - ), - const SizedBox(height: ZetaSpacing.xl_4), - ZetaTooltip( - child: Text('Label'), - arrowDirection: ZetaTooltipArrowDirection.up, - rounded: false, - ), - const SizedBox(height: ZetaSpacing.xl_4), - ZetaTooltip( - child: Text('Label'), - arrowDirection: ZetaTooltipArrowDirection.left, - rounded: false, - ), ], ), ), diff --git a/example/lib/pages/components/top_app_bar_example.dart b/example/lib/pages/components/top_app_bar_example.dart index 18ac9c82..a0c37ad9 100644 --- a/example/lib/pages/components/top_app_bar_example.dart +++ b/example/lib/pages/components/top_app_bar_example.dart @@ -34,8 +34,8 @@ class _TopAppBarExampleState extends State { Widget build(BuildContext context) { final Widget image = CachedNetworkImage( imageUrl: "https://i.ytimg.com/vi/KItsWUzFUOs/maxresdefault.jpg", - placeholder: (context, url) => Icon(ZetaIcons.user_round), - errorWidget: (context, url, error) => Icon(Icons.error), + placeholder: (context, url) => ZetaIcon(ZetaIcons.user), + errorWidget: (context, url, error) => ZetaIcon(ZetaIcons.error), fit: BoxFit.cover, ); final colors = Zeta.of(context).colors; @@ -51,7 +51,7 @@ class _TopAppBarExampleState extends State { ZetaTopAppBar( leading: IconButton( onPressed: () {}, - icon: Icon(Icons.menu_rounded), + icon: Icon(Icons.menu), ), title: Row( children: [ @@ -65,15 +65,15 @@ class _TopAppBarExampleState extends State { actions: [ IconButton( onPressed: () {}, - icon: Icon(Icons.language), + icon: ZetaIcon(Icons.language), ), IconButton( onPressed: () {}, - icon: Icon(Icons.favorite), + icon: ZetaIcon(Icons.favorite), ), IconButton( onPressed: () {}, - icon: Icon(ZetaIcons.more_vertical_round), + icon: ZetaIcon(ZetaIcons.more_vertical), ) ], ), @@ -82,13 +82,13 @@ class _TopAppBarExampleState extends State { type: ZetaTopAppBarType.centeredTitle, leading: IconButton( onPressed: () {}, - icon: Icon(Icons.menu_rounded), + icon: ZetaIcon(Icons.menu), ), title: Text("Title"), actions: [ IconButton( onPressed: () {}, - icon: Icon(Icons.account_circle), + icon: ZetaIcon(Icons.account_circle), ), ], ), @@ -96,25 +96,25 @@ class _TopAppBarExampleState extends State { ZetaTopAppBar( leading: IconButton( onPressed: () {}, - icon: Icon(ZetaIcons.close_round), + icon: ZetaIcon(ZetaIcons.close), ), title: Text("2 items"), actions: [ IconButton( onPressed: () {}, - icon: Icon(ZetaIcons.edit_round), + icon: ZetaIcon(ZetaIcons.edit), ), IconButton( onPressed: () {}, - icon: Icon(ZetaIcons.share_round), + icon: ZetaIcon(ZetaIcons.share), ), IconButton( onPressed: () {}, - icon: Icon(ZetaIcons.delete_round), + icon: ZetaIcon(ZetaIcons.delete), ), IconButton( onPressed: () {}, - icon: Icon(ZetaIcons.more_vertical_round), + icon: ZetaIcon(ZetaIcons.more_vertical), ), ], ), @@ -126,7 +126,7 @@ class _TopAppBarExampleState extends State { actions: [ IconButton( onPressed: _showHideSearchRegular, - icon: Icon(ZetaIcons.search_round), + icon: ZetaIcon(ZetaIcons.search), ) ], searchController: _searchControllerRegular, @@ -148,7 +148,7 @@ class _TopAppBarExampleState extends State { ZetaTopAppBar.extended( leading: IconButton( onPressed: () {}, - icon: Icon(Icons.menu_rounded), + icon: ZetaIcon(Icons.menu), ), title: Row( children: [ @@ -162,15 +162,15 @@ class _TopAppBarExampleState extends State { actions: [ IconButton( onPressed: () {}, - icon: Icon(Icons.language), + icon: ZetaIcon(Icons.language), ), IconButton( onPressed: () {}, - icon: Icon(Icons.favorite), + icon: ZetaIcon(Icons.favorite), ), IconButton( onPressed: () {}, - icon: Icon(ZetaIcons.more_vertical_round), + icon: ZetaIcon(ZetaIcons.more_vertical), ) ], ), @@ -200,7 +200,7 @@ class _TopAppBarExampleState extends State { actions: [ IconButton( onPressed: _showHideSearchExtended, - icon: Icon(ZetaIcons.search_round), + icon: ZetaIcon(ZetaIcons.search), ) ], searchController: _searchControllerExtended, diff --git a/example/lib/pages/theme/color_example.dart b/example/lib/pages/theme/color_example.dart index 323f8642..950fe839 100644 --- a/example/lib/pages/theme/color_example.dart +++ b/example/lib/pages/theme/color_example.dart @@ -189,7 +189,7 @@ class _ColorExampleState extends State { height: constraints.maxWidth / 10, color: e == 110 ? colors.surfacePrimary : value.value[e], child: e == 110 - ? SizedBox() + ? Nothing() : FittedBox( fit: BoxFit.scaleDown, child: Column( diff --git a/example/lib/utils/rounded_switch.dart b/example/lib/utils/rounded_switch.dart new file mode 100644 index 00000000..66a67aed --- /dev/null +++ b/example/lib/utils/rounded_switch.dart @@ -0,0 +1,42 @@ +import 'package:flutter/material.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +class ZetaRoundedSwitch extends StatelessWidget { + ZetaRoundedSwitch({super.key}); + + @override + Widget build(BuildContext context) { + final zeta = Zeta.of(context); + + return DropdownButtonHideUnderline( + child: DropdownButton( + value: zeta.rounded, + padding: EdgeInsets.all(8), + elevation: 0, + icon: Nothing(), + dropdownColor: zeta.colors.borderDisabled, + items: [true, false].map((e) { + return DropdownMenuItem( + value: e, + alignment: Alignment.center, + child: ZetaAvatar( + size: ZetaAvatarSize.xxs, + initials: e ? '●' : '■', + initialTextStyle: TextStyle( + fontSize: 28, + letterSpacing: ZetaSpacing.none, + color: Zeta.of(context).colors.primary, + fontWeight: FontWeight.w500, + ), + ), + ); + }).toList(), + onChanged: (value) { + if (value != null) { + ZetaProvider.of(context).updateRounded(value); + } + }, + ), + ); + } +} diff --git a/example/lib/utils/theme_color_switch.dart b/example/lib/utils/theme_color_switch.dart index 203997e7..c205ed11 100644 --- a/example/lib/utils/theme_color_switch.dart +++ b/example/lib/utils/theme_color_switch.dart @@ -40,9 +40,8 @@ class ZetaThemeColorSwitch extends StatelessWidget { child: DropdownButton( value: zeta.themeData.identifier, elevation: 0, - isDense: true, - alignment: Alignment.center, - icon: SizedBox(width: 8), + padding: EdgeInsets.all(8), + icon: Nothing(), dropdownColor: zeta.colors.borderDisabled, items: appThemes.entries.map((e) { final zetaColors = primary(appThemes[e.key]!); @@ -53,7 +52,7 @@ class ZetaThemeColorSwitch extends StatelessWidget { child: ZetaAvatar( size: ZetaAvatarSize.xxs, backgroundColor: color.surface, - image: Icon(Icons.color_lens, color: color), + image: ZetaIcon(Icons.color_lens, color: color), ), ); }).toList(), diff --git a/example/lib/utils/theme_constrast_switch.dart b/example/lib/utils/theme_constrast_switch.dart index 7e7c060d..ecc422a0 100644 --- a/example/lib/utils/theme_constrast_switch.dart +++ b/example/lib/utils/theme_constrast_switch.dart @@ -24,10 +24,9 @@ class ZetaThemeContrastSwitch extends StatelessWidget { return DropdownButtonHideUnderline( child: DropdownButton( value: zeta.contrast, + padding: EdgeInsets.all(8), elevation: 0, - isDense: true, - alignment: Alignment.center, - icon: SizedBox(width: 8), + icon: Nothing(), dropdownColor: zeta.colors.borderDisabled, items: _themes.map((e) { final colors = zetaColors(e); @@ -37,11 +36,12 @@ class ZetaThemeContrastSwitch extends StatelessWidget { child: ZetaAvatar( size: ZetaAvatarSize.xxs, backgroundColor: colors.primary.surface, - image: Center( - child: Text( - e == ZetaContrast.aa ? 'AA' : 'AAA', - style: ZetaTextStyles.bodyMedium.copyWith(color: colors.primary, fontWeight: FontWeight.w700), - ), + initials: e == ZetaContrast.aa ? 'AA' : 'AAA', + initialTextStyle: TextStyle( + fontSize: 14, + letterSpacing: ZetaSpacing.none, + color: colors.primary, + fontWeight: FontWeight.w500, ), ), ); diff --git a/example/lib/utils/theme_mode_switch.dart b/example/lib/utils/theme_mode_switch.dart index 200ceeba..1250c93b 100644 --- a/example/lib/utils/theme_mode_switch.dart +++ b/example/lib/utils/theme_mode_switch.dart @@ -25,11 +25,10 @@ class ZetaThemeModeSwitch extends StatelessWidget { return DropdownButtonHideUnderline( child: DropdownButton( + padding: EdgeInsets.all(8), value: zeta.themeMode, elevation: 0, - isDense: true, - alignment: Alignment.center, - icon: SizedBox(width: 8), + icon: Nothing(), dropdownColor: zeta.colors.borderDisabled, items: _themes.map((e) { final colors = zetaColors(e); @@ -39,13 +38,14 @@ class ZetaThemeModeSwitch extends StatelessWidget { child: ZetaAvatar( size: ZetaAvatarSize.xxs, backgroundColor: colors.primary.surface, - image: Icon( - e == ThemeMode.system - ? Icons.system_security_update_good - : e == ThemeMode.light - ? Icons.light_mode - : Icons.dark_mode, - color: colors.primary), + image: ZetaIcon( + e == ThemeMode.system + ? Icons.system_security_update_good + : e == ThemeMode.light + ? Icons.light_mode + : Icons.dark_mode, + color: colors.primary, + ), ), ); }).toList(), diff --git a/example/lib/widgets.dart b/example/lib/widgets.dart index 816cd4ea..dcaa892b 100644 --- a/example/lib/widgets.dart +++ b/example/lib/widgets.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:zeta_example/utils/rounded_switch.dart'; import 'package:zeta_example/utils/theme_color_switch.dart'; import 'package:zeta_example/utils/theme_constrast_switch.dart'; import 'package:zeta_example/utils/theme_mode_switch.dart'; @@ -33,6 +34,7 @@ class ExampleScaffold extends StatelessWidget { foregroundColor: colors.onPrimary, actions: [ ...actions, + ZetaRoundedSwitch(), ZetaThemeModeSwitch(), ZetaThemeContrastSwitch(), ZetaThemeColorSwitch(), diff --git a/example/widgetbook/pages/assets/icon_widgetbook.dart b/example/widgetbook/pages/assets/icon_widgetbook.dart index ca195374..8f08649d 100644 --- a/example/widgetbook/pages/assets/icon_widgetbook.dart +++ b/example/widgetbook/pages/assets/icon_widgetbook.dart @@ -40,7 +40,7 @@ Widget iconsUseCase(BuildContext context) { child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - Icon( + ZetaIcon( IconData( e.value.codePoint, fontFamily: rounded ? ZetaIcons.familyRound : ZetaIcons.familySharp, diff --git a/example/widgetbook/pages/components/avatar_widgetbook.dart b/example/widgetbook/pages/components/avatar_widgetbook.dart index 337670d0..4ed8fdde 100644 --- a/example/widgetbook/pages/components/avatar_widgetbook.dart +++ b/example/widgetbook/pages/components/avatar_widgetbook.dart @@ -19,7 +19,7 @@ Widget avatarUseCase(BuildContext context) { ), upperBadge: context.knobs.boolean(label: 'Status Badge', initialValue: false) ? ZetaAvatarBadge.icon( - icon: ZetaIcons.close_round, + icon: ZetaIcons.close, color: context.knobs.colorOrNull(label: "Upper Badge Color", initialValue: colors.green) ?? colors.iconDefault, ) diff --git a/example/widgetbook/pages/components/banner_widgetbook.dart b/example/widgetbook/pages/components/banner_widgetbook.dart index 69574bd4..d9ff3fd1 100644 --- a/example/widgetbook/pages/components/banner_widgetbook.dart +++ b/example/widgetbook/pages/components/banner_widgetbook.dart @@ -18,12 +18,12 @@ Widget bannerUseCase(BuildContext context) { ), leadingIcon: iconKnob(context, rounded: rounded, nullable: true), titleStart: context.knobs.boolean(label: 'Center title'), - trailing: Icon(iconKnob( + trailing: ZetaIcon(iconKnob( context, rounded: rounded, nullable: true, name: 'trailing', - initial: ZetaIcons.chevron_right_round, + initial: ZetaIcons.chevron_right, )), ); diff --git a/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart b/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart index 6fd44d2f..fc80b36a 100644 --- a/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart +++ b/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart @@ -28,7 +28,7 @@ Widget bottomSheetContentUseCase(BuildContext context) { ZetaBottomSheet _bottomSheet(BuildContext context) { final bool rounded = roundedKnob(context); final leadingIcon = iconKnob(context, rounded: rounded, nullable: true, initial: null); - final trailingIcon = iconKnob(context, rounded: rounded, nullable: true, initial: ZetaIcons.chevron_right_round); + final trailingIcon = iconKnob(context, rounded: rounded, nullable: true, initial: ZetaIcons.chevron_right); return ZetaBottomSheet( centerTitle: context.knobs.boolean(label: 'Center title', initialValue: true), @@ -40,8 +40,8 @@ ZetaBottomSheet _bottomSheet(BuildContext context) { 6, (index) => ZetaMenuItem( type: context.knobs.boolean(label: 'Grid') ? ZetaMenuItemType.vertical : ZetaMenuItemType.horizontal, - leading: leadingIcon != null ? Icon(leadingIcon) : null, - trailing: trailingIcon != null ? Icon(trailingIcon) : null, + leading: leadingIcon != null ? ZetaIcon(leadingIcon) : null, + trailing: trailingIcon != null ? ZetaIcon(trailingIcon) : null, label: Text('Menu Item'), onTap: context.knobs.boolean(label: 'Disabled') ? null : () {}, ), diff --git a/example/widgetbook/pages/components/button_widgetbook.dart b/example/widgetbook/pages/components/button_widgetbook.dart index 8b47a75c..588514da 100644 --- a/example/widgetbook/pages/components/button_widgetbook.dart +++ b/example/widgetbook/pages/components/button_widgetbook.dart @@ -82,11 +82,11 @@ Widget buttonGroupUseCase(BuildContext context) { items: [ ZetaDropdownItem( value: 'Item 1', - icon: Icon(ZetaIcons.star), + icon: ZetaIcon(ZetaIcons.star), ), ZetaDropdownItem( value: 'Item 2', - icon: Icon(ZetaIcons.star_half), + icon: ZetaIcon(ZetaIcons.star_half), ), ], ), diff --git a/example/widgetbook/pages/components/chip_widgetbook.dart b/example/widgetbook/pages/components/chip_widgetbook.dart index 9caaee6f..e7e0c008 100644 --- a/example/widgetbook/pages/components/chip_widgetbook.dart +++ b/example/widgetbook/pages/components/chip_widgetbook.dart @@ -21,7 +21,7 @@ Widget inputChipUseCase(BuildContext context) { ) : null, rounded: rounded, - trailing: trailing != null ? Icon(trailing) : null, + trailing: trailing != null ? ZetaIcon(trailing) : null, ), ); } @@ -40,7 +40,7 @@ Widget assistChipUseCase(BuildContext context) { widget: ZetaAssistChip( label: context.knobs.string(label: 'Label', initialValue: 'Label'), rounded: rounded, - leading: Icon(iconKnob(context, rounded: rounded)), + leading: ZetaIcon(iconKnob(context, rounded: rounded)), ), ); } diff --git a/example/widgetbook/pages/components/dialog_widgetbook.dart b/example/widgetbook/pages/components/dialog_widgetbook.dart index 6936dc55..f761861e 100644 --- a/example/widgetbook/pages/components/dialog_widgetbook.dart +++ b/example/widgetbook/pages/components/dialog_widgetbook.dart @@ -21,7 +21,7 @@ Widget dialogUseCase(BuildContext context) { context, name: "Icon", rounded: rounded, - initial: rounded ? Icons.warning_rounded : Icons.warning_sharp, + initial: Icons.warning, ); final barrierDismissible = context.knobs.boolean(label: 'Barrier dismissible', initialValue: true); final headerAlignment = context.knobs.list( @@ -43,7 +43,7 @@ Widget dialogUseCase(BuildContext context) { barrierDismissible: barrierDismissible, headerAlignment: headerAlignment, title: title, - icon: Icon( + icon: ZetaIcon( iconData, color: zeta.colors.surfaceWarning, ), @@ -60,7 +60,7 @@ Widget dialogUseCase(BuildContext context) { barrierDismissible: barrierDismissible, headerAlignment: headerAlignment, title: title, - icon: Icon( + icon: ZetaIcon( iconData, color: zeta.colors.surfaceWarning, ), @@ -78,7 +78,7 @@ Widget dialogUseCase(BuildContext context) { barrierDismissible: barrierDismissible, headerAlignment: headerAlignment, title: title, - icon: Icon( + icon: ZetaIcon( iconData, color: zeta.colors.surfaceWarning, ), diff --git a/example/widgetbook/pages/components/dropdown_list_item_widgetbook.dart b/example/widgetbook/pages/components/dropdown_list_item_widgetbook.dart index 9ca182cc..6ffd2a0a 100644 --- a/example/widgetbook/pages/components/dropdown_list_item_widgetbook.dart +++ b/example/widgetbook/pages/components/dropdown_list_item_widgetbook.dart @@ -19,7 +19,7 @@ Widget dropdownListItemUseCase(BuildContext context) { final rounded = roundedKnob(context); - final leading = showIcon ? Icon(ZetaIcons.star_round) : null; + final leading = showIcon ? ZetaIcon(ZetaIcons.star) : null; return ZetaDropdownListItem( primaryText: primaryText, diff --git a/example/widgetbook/pages/components/dropdown_widgetbook.dart b/example/widgetbook/pages/components/dropdown_widgetbook.dart index 5aea90a8..d022447f 100644 --- a/example/widgetbook/pages/components/dropdown_widgetbook.dart +++ b/example/widgetbook/pages/components/dropdown_widgetbook.dart @@ -20,11 +20,11 @@ class _DropdownExampleState extends State { final items = [ ZetaDropdownItem( value: "Item 1", - icon: Icon(ZetaIcons.star_round), + icon: ZetaIcon(ZetaIcons.star), ), ZetaDropdownItem( value: "Item 2", - icon: Icon(ZetaIcons.star_half_round), + icon: ZetaIcon(ZetaIcons.star_half), ), ZetaDropdownItem( value: "Item 3", diff --git a/example/widgetbook/pages/components/global_header_widgetbook.dart b/example/widgetbook/pages/components/global_header_widgetbook.dart index b0e59e76..252726e6 100644 --- a/example/widgetbook/pages/components/global_header_widgetbook.dart +++ b/example/widgetbook/pages/components/global_header_widgetbook.dart @@ -8,14 +8,14 @@ Widget globalHeaderUseCase(BuildContext context) { final actionButtons = [ IconButton( onPressed: () {}, - icon: const Icon( - ZetaIcons.alert_round, + icon: const ZetaIcon( + ZetaIcons.alert, ), ), IconButton( onPressed: () {}, - icon: const Icon( - ZetaIcons.help_round, + icon: const ZetaIcon( + ZetaIcons.help, ), ), ]; diff --git a/example/widgetbook/pages/components/list_item_widgetbook.dart b/example/widgetbook/pages/components/list_item_widgetbook.dart index 2acbbbee..02cafe63 100644 --- a/example/widgetbook/pages/components/list_item_widgetbook.dart +++ b/example/widgetbook/pages/components/list_item_widgetbook.dart @@ -26,7 +26,7 @@ Widget listItemUseCase(BuildContext context) { final rounded = roundedKnob(context); - final leading = showIcon ? Icon(ZetaIcons.star_round) : null; + final leading = showIcon ? ZetaIcon(ZetaIcons.star) : null; final onChanged = (bool? value) => setState(() { checkedValue = value!; diff --git a/example/widgetbook/pages/components/navigation_rail_widgetbook.dart b/example/widgetbook/pages/components/navigation_rail_widgetbook.dart index df57fc95..a791d2f5 100644 --- a/example/widgetbook/pages/components/navigation_rail_widgetbook.dart +++ b/example/widgetbook/pages/components/navigation_rail_widgetbook.dart @@ -17,7 +17,7 @@ Widget navigationRailUseCase(BuildContext context) { context, name: "Icon", rounded: rounded, - initial: rounded ? ZetaIcons.star_round : ZetaIcons.star_sharp, + initial: ZetaIcons.star, ); final wordWrap = context.knobs.boolean(label: 'Word wrap', initialValue: true); final disabled = disabledKnob(context); @@ -36,7 +36,7 @@ Widget navigationRailUseCase(BuildContext context) { items: itemsList .map((item) => ZetaNavigationRailItem( label: item, - icon: Icon(iconData), + icon: ZetaIcon(iconData), disabled: disabled, )) .toList(), @@ -45,7 +45,7 @@ Widget navigationRailUseCase(BuildContext context) { child: Padding( padding: const EdgeInsets.all(ZetaSpacing.xl_1), child: selectedIndex == null - ? const SizedBox() + ? const Nothing() : Text( itemsList[selectedIndex!], textAlign: TextAlign.center, diff --git a/example/widgetbook/pages/components/notification_list_item_widgetbook.dart b/example/widgetbook/pages/components/notification_list_item_widgetbook.dart index bd72b586..49a4d6ea 100644 --- a/example/widgetbook/pages/components/notification_list_item_widgetbook.dart +++ b/example/widgetbook/pages/components/notification_list_item_widgetbook.dart @@ -32,7 +32,7 @@ Widget notificationListItemUseCase(BuildContext context) => WidgetbookTestWidget label: 'Badge', options: [ ZetaNotificationBadge.avatar(avatar: ZetaAvatar.initials(initials: "AO")), - ZetaNotificationBadge.icon(icon: ZetaIcons.check_circle_round), + ZetaNotificationBadge.icon(icon: ZetaIcons.check_circle), ZetaNotificationBadge.image( image: Image.network( "https://www.google.com/url?sa=i&url=https%3A%2F%2Fgithub.com%2Fzebratechnologies&psig=AOvVaw0fBPVE5gUkkpFw8mVf6B8G&ust=1717073069230000&source=images&cd=vfe&opi=89978449&ved=0CBIQjRxqFwoTCPCwn-XxsoYDFQAAAAAdAAAAABAE")) diff --git a/example/widgetbook/pages/components/segmented_control_widgetbook.dart b/example/widgetbook/pages/components/segmented_control_widgetbook.dart index 72875836..3abb74c1 100644 --- a/example/widgetbook/pages/components/segmented_control_widgetbook.dart +++ b/example/widgetbook/pages/components/segmented_control_widgetbook.dart @@ -10,7 +10,7 @@ Widget segmentedControlUseCase(BuildContext context) { int selectedIconSegment = iconsSegments.first; final rounded = context.knobs.boolean(label: "Rounded", initialValue: true); - final icon = iconKnob(context, rounded: rounded, initial: ZetaIcons.star_round); + final icon = iconKnob(context, rounded: rounded, initial: ZetaIcons.star); final text = context.knobs.string(label: 'Text', initialValue: "Item"); @@ -29,7 +29,7 @@ Widget segmentedControlUseCase(BuildContext context) { for (final value in iconsSegments) ZetaButtonSegment( value: value, - child: Icon(icon), + child: ZetaIcon(icon), ), ], onChanged: (value) => setState( diff --git a/example/widgetbook/pages/components/select_input_widgetbook.dart b/example/widgetbook/pages/components/select_input_widgetbook.dart index d41f5a8f..53e6a505 100644 --- a/example/widgetbook/pages/components/select_input_widgetbook.dart +++ b/example/widgetbook/pages/components/select_input_widgetbook.dart @@ -9,11 +9,11 @@ Widget selectInputUseCase(BuildContext context) { final items = [ ZetaDropdownItem( value: "Item 1", - icon: Icon(ZetaIcons.star_round), + icon: ZetaIcon(ZetaIcons.star), ), ZetaDropdownItem( value: "Item 2", - icon: Icon(ZetaIcons.star_half_round), + icon: ZetaIcon(ZetaIcons.star_half), ), ZetaDropdownItem( value: "Item 3", diff --git a/example/widgetbook/pages/components/snack_bar_widgetbook.dart b/example/widgetbook/pages/components/snack_bar_widgetbook.dart index 92430c67..6b67dcbb 100644 --- a/example/widgetbook/pages/components/snack_bar_widgetbook.dart +++ b/example/widgetbook/pages/components/snack_bar_widgetbook.dart @@ -28,7 +28,7 @@ Widget snackBarUseCase(BuildContext context) { final leadingIcon = iconKnob( context, name: "Leading Icon", - initial: Icons.mood_rounded, + initial: Icons.mood, nullable: true, ); @@ -43,7 +43,7 @@ Widget snackBarUseCase(BuildContext context) { onPressed: () {}, actionLabel: actionLabel, type: type, - leadingIcon: leadingIcon != null ? Icon(leadingIcon) : null, + leadingIcon: leadingIcon != null ? ZetaIcon(leadingIcon) : null, rounded: rounded, content: Text(text), ); diff --git a/example/widgetbook/pages/components/tabs_widgetbook.dart b/example/widgetbook/pages/components/tabs_widgetbook.dart index a47dd059..50fcd23b 100644 --- a/example/widgetbook/pages/components/tabs_widgetbook.dart +++ b/example/widgetbook/pages/components/tabs_widgetbook.dart @@ -23,8 +23,8 @@ Widget tabsUseCase(BuildContext context) { ? null : (_) {}, tabs: [ - ZetaTab(icon: Icon(ZetaIcons.star_round), text: "Tab Item"), - ZetaTab(icon: Icon(ZetaIcons.star_round), text: "Tab Item"), + ZetaTab(icon: ZetaIcon(ZetaIcons.star), text: "Tab Item"), + ZetaTab(icon: ZetaIcon(ZetaIcons.star), text: "Tab Item"), ], ), ), diff --git a/example/widgetbook/pages/components/text_input_widgetbook.dart b/example/widgetbook/pages/components/text_input_widgetbook.dart index 75be9d50..fd313845 100644 --- a/example/widgetbook/pages/components/text_input_widgetbook.dart +++ b/example/widgetbook/pages/components/text_input_widgetbook.dart @@ -40,7 +40,7 @@ Widget textInputUseCase(BuildContext context) { errorText: errorText, prefixText: '£', suffix: IconButton( - icon: Icon(ZetaIcons.star_round), + icon: ZetaIcon(ZetaIcons.star), onPressed: () {}, ), onChange: (value) {}, diff --git a/example/widgetbook/pages/components/top_app_bar_widgetbook.dart b/example/widgetbook/pages/components/top_app_bar_widgetbook.dart index 9dc76be9..95ce2358 100644 --- a/example/widgetbook/pages/components/top_app_bar_widgetbook.dart +++ b/example/widgetbook/pages/components/top_app_bar_widgetbook.dart @@ -24,7 +24,7 @@ Widget defaultTopAppBarUseCase(BuildContext context) { label: "Enabled actions", initialValue: true, ); - final leadingIcon = iconKnob(context, name: 'Leading Icon', initial: ZetaIcons.hamburger_menu_round); + final leadingIcon = iconKnob(context, name: 'Leading Icon', initial: ZetaIcons.hamburger_menu); return WidgetbookTestWidget( backgroundColor: Colors.green, @@ -34,7 +34,7 @@ Widget defaultTopAppBarUseCase(BuildContext context) { ZetaTopAppBar( leading: IconButton( onPressed: () {}, - icon: Icon(leadingIcon), + icon: ZetaIcon(leadingIcon), ), type: type, title: Text(title), @@ -42,15 +42,15 @@ Widget defaultTopAppBarUseCase(BuildContext context) { ? [ IconButton( onPressed: () {}, - icon: Icon(Icons.language), + icon: ZetaIcon(Icons.language), ), IconButton( onPressed: () {}, - icon: Icon(Icons.favorite), + icon: ZetaIcon(Icons.favorite), ), IconButton( onPressed: () {}, - icon: Icon(ZetaIcons.more_vertical_round), + icon: ZetaIcon(ZetaIcons.more_vertical), ) ] : null, @@ -92,7 +92,7 @@ class _SearchUseCaseState extends State<_SearchUseCase> { }, ); - final leadingIcon = iconKnob(context, name: 'Leading Icon', initial: ZetaIcons.hamburger_menu_round); + final leadingIcon = iconKnob(context, name: 'Leading Icon', initial: ZetaIcons.hamburger_menu); final enabledSpeechRecognition = context.knobs.boolean( label: "Enabled speech recognition", @@ -104,7 +104,7 @@ class _SearchUseCaseState extends State<_SearchUseCase> { return ZetaTopAppBar( leading: IconButton( onPressed: () {}, - icon: Icon(leadingIcon), + icon: ZetaIcon(leadingIcon), ), type: type, title: Text(title), @@ -123,7 +123,7 @@ class _SearchUseCaseState extends State<_SearchUseCase> { onPressed: () { searchController.isEnabled ? searchController.closeSearch() : searchController.startSearch(); }, - icon: Icon(ZetaIcons.search_round)), + icon: ZetaIcon(ZetaIcons.search)), ], ); } @@ -151,7 +151,7 @@ class _ExtendedSearchState extends State { Widget build(BuildContext context) { final title = context.knobs.string(label: "Title", initialValue: "Title"); - final leadingIcon = iconKnob(context, name: 'Leading Icon', initial: ZetaIcons.hamburger_menu_round); + final leadingIcon = iconKnob(context, name: 'Leading Icon', initial: ZetaIcons.hamburger_menu); final showSearch = context.knobs.boolean(label: 'Search variant', initialValue: false); @@ -167,27 +167,27 @@ class _ExtendedSearchState extends State { child: CustomScrollView( slivers: [ ZetaTopAppBar.extended( - leading: IconButton(icon: Icon(leadingIcon), onPressed: () {}), + leading: IconButton(icon: ZetaIcon(leadingIcon), onPressed: () {}), title: Text(title), actions: showSearch ? [ IconButton( onPressed: _showHideSearchExtended, - icon: Icon(ZetaIcons.search_round), + icon: ZetaIcon(ZetaIcons.search), ) ] : [ IconButton( onPressed: () {}, - icon: Icon(Icons.language), + icon: ZetaIcon(Icons.language), ), IconButton( onPressed: () {}, - icon: Icon(Icons.favorite), + icon: ZetaIcon(Icons.favorite), ), IconButton( onPressed: () {}, - icon: Icon(ZetaIcons.more_vertical_round), + icon: ZetaIcon(ZetaIcons.more_vertical), ) ], searchController: showSearch ? _searchControllerExtended : null, diff --git a/lib/src/components/accordion/accordion.dart b/lib/src/components/accordion/accordion.dart index 8be557e0..966680dc 100644 --- a/lib/src/components/accordion/accordion.dart +++ b/lib/src/components/accordion/accordion.dart @@ -177,7 +177,7 @@ class _ZetaAccordionState extends State with TickerProviderStateM data: Theme.of(context).copyWith(listTileTheme: ListTileThemeData(titleTextStyle: childTextStyle)), child: DefaultTextStyle( style: childTextStyle, - child: widget.child ?? const SizedBox(), + child: widget.child ?? const Nothing(), ), ), ), diff --git a/lib/src/components/avatars/avatar.dart b/lib/src/components/avatars/avatar.dart index 50a6a967..f5ccc2a7 100644 --- a/lib/src/components/avatars/avatar.dart +++ b/lib/src/components/avatars/avatar.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; + import '../../../zeta_flutter.dart'; /// [ZetaAvatar] size @@ -47,6 +48,7 @@ class ZetaAvatar extends ZetaStatelessWidget { this.semanticLabel = 'avatar', this.semanticUpperBadgeLabel = 'upperBadge', this.semanticLowerBadgeLabel = 'lowerBadge', + this.initialTextStyle, }); /// Constructor for [ZetaAvatar] with image. @@ -61,7 +63,8 @@ class ZetaAvatar extends ZetaStatelessWidget { this.semanticUpperBadgeLabel = 'upperBadge', this.semanticLowerBadgeLabel = 'lowerBadge', }) : backgroundColor = null, - initials = null; + initials = null, + initialTextStyle = null; /// Constructor for [ZetaAvatar] with initials. const ZetaAvatar.initials({ @@ -75,6 +78,7 @@ class ZetaAvatar extends ZetaStatelessWidget { this.semanticLabel = 'avatar', this.semanticUpperBadgeLabel = 'upperBadge', this.semanticLowerBadgeLabel = 'lowerBadge', + this.initialTextStyle, }) : image = null; /// Constructor for [ZetaAvatar] with initials from a full name. @@ -89,6 +93,7 @@ class ZetaAvatar extends ZetaStatelessWidget { this.semanticLabel = 'avatar', this.semanticUpperBadgeLabel = 'upperBadge', this.semanticLowerBadgeLabel = 'lowerBadge', + this.initialTextStyle, }) : image = null, initials = name.initials; @@ -132,6 +137,19 @@ class ZetaAvatar extends ZetaStatelessWidget { /// {@macro zeta-widget-semantic-label} final String semanticUpperBadgeLabel; + /// Text style for initials. + /// + /// Defaults to: + /// ```dart + /// TextStyle( + /// fontSize: size.fontSize, + /// letterSpacing: ZetaSpacing.none, + /// color: backgroundColor?.onColor, + /// fontWeight: FontWeight.w500, + /// ) + /// ``` + final TextStyle? initialTextStyle; + /// Return copy of avatar with certain changed fields ZetaAvatar copyWith({ ZetaAvatarSize? size, @@ -168,12 +186,13 @@ class ZetaAvatar extends ZetaStatelessWidget { ? Center( child: Text( size == ZetaAvatarSize.xs ? initials!.substring(0, 1) : initials!, - style: TextStyle( - fontSize: size.fontSize, - letterSpacing: ZetaSpacing.none, - color: backgroundColor?.onColor, - fontWeight: FontWeight.w500, - ), + style: initialTextStyle ?? + TextStyle( + fontSize: size.fontSize, + letterSpacing: ZetaSpacing.none, + color: backgroundColor?.onColor, + fontWeight: FontWeight.w500, + ), ), ) : null); @@ -261,7 +280,8 @@ class ZetaAvatar extends ZetaStatelessWidget { ..add(ColorProperty('statusColor', borderColor)) ..add(StringProperty('semanticUpperBadgeValue', semanticUpperBadgeLabel)) ..add(StringProperty('semanticValue', semanticLabel)) - ..add(StringProperty('semanticLowerBadgeValue', semanticLowerBadgeLabel)); + ..add(StringProperty('semanticLowerBadgeValue', semanticLowerBadgeLabel)) + ..add(DiagnosticsProperty('initialTextStyle', initialTextStyle)); } } diff --git a/lib/src/components/badges/tag.dart b/lib/src/components/badges/tag.dart index b2053803..13345a02 100644 --- a/lib/src/components/badges/tag.dart +++ b/lib/src/components/badges/tag.dart @@ -43,7 +43,7 @@ class ZetaTag extends ZetaStatelessWidget { Widget build(BuildContext context) { return Row( children: [ - if (direction == ZetaTagDirection.right) _buildCustomPaint(context), + if (direction == ZetaTagDirection.left) _buildCustomPaint(context), Container( decoration: BoxDecoration( color: Zeta.of(context).colors.surfaceHover, @@ -64,14 +64,14 @@ class ZetaTag extends ZetaStatelessWidget { ), ), ), - if (direction == ZetaTagDirection.left) _buildCustomPaint(context), + if (direction == ZetaTagDirection.right) _buildCustomPaint(context), ], ); } BorderRadius? _getBorderRadius(BuildContext context) { if (!context.rounded) return null; - if (direction == ZetaTagDirection.right) { + if (direction == ZetaTagDirection.left) { return const BorderRadius.only( topRight: Radius.circular(ZetaSpacingBase.x0_5), bottomRight: Radius.circular(ZetaSpacingBase.x0_5), @@ -121,7 +121,7 @@ class _TagPainter extends CustomPainter { final Paint paint = Paint() ..color = color ..style = PaintingStyle.fill; - final path = _drawPath(size, rounded, direction == ZetaTagDirection.right); + final path = _drawPath(size, rounded, direction == ZetaTagDirection.left); canvas.drawPath(path, paint); } diff --git a/lib/src/components/banner/banner.dart b/lib/src/components/banner/banner.dart index af2ec7f4..d1d0cef6 100644 --- a/lib/src/components/banner/banner.dart +++ b/lib/src/components/banner/banner.dart @@ -92,7 +92,7 @@ class ZetaBanner extends MaterialBanner { actions: [ IconTheme( data: IconThemeData(color: _backgroundColorFromType(context, type).onColor), - child: trailing ?? const SizedBox(), + child: trailing ?? const Nothing(), ), ], ); diff --git a/lib/src/components/bottom sheets/bottom_sheet.dart b/lib/src/components/bottom sheets/bottom_sheet.dart index be7b0b74..cfdb84f0 100644 --- a/lib/src/components/bottom sheets/bottom_sheet.dart +++ b/lib/src/components/bottom sheets/bottom_sheet.dart @@ -74,7 +74,7 @@ class ZetaBottomSheet extends ZetaStatelessWidget { ), Material( color: colors.surfaceSecondary, - child: body ?? const SizedBox(), + child: body ?? const Nothing(), ), ], ), diff --git a/lib/src/components/button_group/button_group.dart b/lib/src/components/button_group/button_group.dart index b8988466..eace82d9 100644 --- a/lib/src/components/button_group/button_group.dart +++ b/lib/src/components/button_group/button_group.dart @@ -344,7 +344,7 @@ class _ZetaGroupButtonState extends State { child: Row( mainAxisSize: MainAxisSize.min, children: [ - leadingIcon ?? const SizedBox(), + leadingIcon ?? const Nothing(), Text(selectedItem?.label ?? widget.label ?? '', style: ZetaTextStyles.labelMedium), if (widget.items != null) ZetaIcon( diff --git a/lib/src/components/checkbox/checkbox.dart b/lib/src/components/checkbox/checkbox.dart index af9eb6bf..4edd887a 100644 --- a/lib/src/components/checkbox/checkbox.dart +++ b/lib/src/components/checkbox/checkbox.dart @@ -194,7 +194,7 @@ class _CheckboxState extends State { final rounded = context.rounded; final icon = !_checked - ? const SizedBox.shrink() + ? const Nothing() : ZetaIcon( widget.useIndeterminate ? ZetaIcons.remove : ZetaIcons.check_mark, color: widget.disabled ? theme.colors.iconDisabled : theme.colors.white, diff --git a/lib/src/components/chips/chip.dart b/lib/src/components/chips/chip.dart index 71f636c3..06749934 100644 --- a/lib/src/components/chips/chip.dart +++ b/lib/src/components/chips/chip.dart @@ -93,7 +93,7 @@ class _ZetaChipState extends State { } else if (widget.leading.runtimeType == ZetaAvatar) { return (widget.leading! as ZetaAvatar).copyWith(size: ZetaAvatarSize.xxxs); } - return widget.leading ?? const SizedBox(); + return widget.leading ?? const Nothing(); } final _controller = WidgetStatesController(); @@ -112,7 +112,7 @@ class _ZetaChipState extends State { color: Colors.transparent, child: child(colors, foregroundColor, isDragging: true), ), - childWhenDragging: const SizedBox(), + childWhenDragging: const Nothing(), data: widget.data, onDragCompleted: widget.onDragCompleted, child: child(colors, foregroundColor), @@ -191,7 +191,7 @@ class _ZetaChipState extends State { ZetaIcons.check_mark, color: widget.selected! ? colors.iconInverse : Colors.transparent, ) - : const SizedBox()), + : const Nothing()), ) else if (widget.leading != null) _renderLeading(foregroundColor), diff --git a/lib/src/components/pagination/pagination.dart b/lib/src/components/pagination/pagination.dart index 8404f125..d716d541 100644 --- a/lib/src/components/pagination/pagination.dart +++ b/lib/src/components/pagination/pagination.dart @@ -192,7 +192,7 @@ class _ZetaPaginationState extends State { onChanged: (val) => _onItemPressed(val!), value: _currentPage, icon: const ZetaIcon(ZetaIcons.expand_more).paddingStart(ZetaSpacing.small), - underline: const SizedBox(), + underline: const Nothing(), style: Theme.of(context).textTheme.bodyLarge?.copyWith( color: colors.textSubtle, ), diff --git a/lib/src/components/search_bar/search_bar.dart b/lib/src/components/search_bar/search_bar.dart index af05de0d..9ec0354b 100644 --- a/lib/src/components/search_bar/search_bar.dart +++ b/lib/src/components/search_bar/search_bar.dart @@ -184,7 +184,7 @@ class _ZetaSearchBarState extends State { size: iconSize, ), ) - : const SizedBox(), + : const Nothing(), ), ], ), diff --git a/lib/src/components/snack_bar/snack_bar.dart b/lib/src/components/snack_bar/snack_bar.dart index dbe2a10e..7b186230 100644 --- a/lib/src/components/snack_bar/snack_bar.dart +++ b/lib/src/components/snack_bar/snack_bar.dart @@ -53,7 +53,9 @@ class ZetaSnackBar extends SnackBar { ZetaSnackBarType? type, /// Icon to display at the start of the content. - Icon? leadingIcon, + /// + /// Should be of type [ZetaIcon] or [Icon]. + Widget? leadingIcon, /// {@macro zeta-widget-rounded} bool? rounded, @@ -354,7 +356,7 @@ class _ActionButton extends StatelessWidget { class _LeadingIcon extends StatelessWidget { const _LeadingIcon(this.type, this.icon); - final Icon? icon; + final Widget? icon; final ZetaSnackBarType? type; @override @@ -382,7 +384,7 @@ class _LeadingIcon extends StatelessWidget { ZetaSnackBarType.error => const ZetaIcon(ZetaIcons.error), ZetaSnackBarType.deletion => const ZetaIcon(ZetaIcons.delete), ZetaSnackBarType.view => const ZetaIcon(ZetaIcons.open_in_new_window), - _ => const SizedBox(), + _ => const Nothing(), }; } diff --git a/lib/src/components/stepper/stepper.dart b/lib/src/components/stepper/stepper.dart index d7c81996..5847334a 100644 --- a/lib/src/components/stepper/stepper.dart +++ b/lib/src/components/stepper/stepper.dart @@ -239,7 +239,7 @@ class _ZetaStepperState extends State with TickerProviderStateMixin children: [ AnimatedCrossFade( firstChild: Container(height: 0), - secondChild: widget.steps[index].content ?? const SizedBox(), + secondChild: widget.steps[index].content ?? const Nothing(), firstCurve: const Interval(0, 0.6, curve: Curves.fastOutSlowIn), secondCurve: const Interval(0.4, 1, curve: Curves.fastOutSlowIn), sizeCurve: Curves.fastOutSlowIn, @@ -332,7 +332,7 @@ class _ZetaStepperState extends State with TickerProviderStateMixin Visibility( maintainState: true, visible: i == widget.currentStep, - child: widget.steps[i].content ?? const SizedBox(), + child: widget.steps[i].content ?? const Nothing(), ), ); } diff --git a/lib/src/components/text_input/text_input.dart b/lib/src/components/text_input/text_input.dart index 48de5fcf..8523d7c9 100644 --- a/lib/src/components/text_input/text_input.dart +++ b/lib/src/components/text_input/text_input.dart @@ -440,7 +440,7 @@ class _HintText extends StatelessWidget { } if (text == null || text.isEmpty) { - return const SizedBox(); + return const Nothing(); } return Row( diff --git a/lib/src/components/top_app_bar/search_top_app_bar.dart b/lib/src/components/top_app_bar/search_top_app_bar.dart index 8d7b218b..d78f200a 100644 --- a/lib/src/components/top_app_bar/search_top_app_bar.dart +++ b/lib/src/components/top_app_bar/search_top_app_bar.dart @@ -149,7 +149,7 @@ class _ZetaTopAppBarSearchFieldState extends State wit mainAxisAlignment: widget.type == ZetaTopAppBarType.centeredTitle ? MainAxisAlignment.center : MainAxisAlignment.start, children: [ - widget.child ?? const SizedBox(), + widget.child ?? const Nothing(), ], ), ConstrainedBox( diff --git a/lib/src/theme/constants.dart b/lib/src/theme/constants.dart index 92d3d64b..bbb6f11e 100644 --- a/lib/src/theme/constants.dart +++ b/lib/src/theme/constants.dart @@ -1,12 +1,12 @@ import 'color_swatch.dart'; -/// Default font family for Zeta System +/// Default font family for Zeta System. const kZetaFontFamily = 'packages/zeta_flutter/IBMPlexSans'; -/// Primary color shade index for [ZetaColorSwatch] +/// Primary color shade index for [ZetaColorSwatch]. const kZetaSwatchPrimaryIndex = 60; -/// Target contrast values for different color shades of [ZetaColorSwatch] +/// Target contrast values for different color shades of [ZetaColorSwatch]. const kZetaSwatchTargetContrasts = { 100: 17.42, 90: 13.99, @@ -19,3 +19,6 @@ const kZetaSwatchTargetContrasts = { 20: 1.09, 10: 1.02, }; + +/// Default icon size for Zeta System. +const double kZetaIconSize = 24; diff --git a/lib/src/theme/theme_data.dart b/lib/src/theme/theme_data.dart index 0217903e..de74be0f 100644 --- a/lib/src/theme/theme_data.dart +++ b/lib/src/theme/theme_data.dart @@ -22,7 +22,6 @@ class ZetaThemeData extends Equatable { ZetaThemeData({ this.fontFamily = kZetaFontFamily, this.identifier = 'default', - this.rounded = true, ZetaContrast contrast = ZetaContrast.aa, ZetaColors? colorsLight, ZetaColors? colorsDark, @@ -71,13 +70,6 @@ class ZetaThemeData extends Equatable { /// Defaults to a dark mode color palette with default Zeta colors if not explicitly provided. ZetaColors get colorsDark => _colorsDark; - /// {@template zeta-component-rounded} - /// Sets rounded or sharp border of the containing box and the icon style. - /// - /// Defaults to `true`. - /// {@endtemplate} - final bool rounded; - /// Applies the given [contrast] to the current [ZetaThemeData] and returns a new [ZetaThemeData] with the updated contrast. ZetaThemeData apply({ required ZetaContrast contrast, @@ -88,7 +80,6 @@ class ZetaThemeData extends Equatable { fontFamily: fontFamily, colorsDark: colorsDark, colorsLight: colorsLight, - rounded: rounded, ); } diff --git a/lib/src/utils/nothing.dart b/lib/src/utils/nothing.dart new file mode 100644 index 00000000..be509e50 --- /dev/null +++ b/lib/src/utils/nothing.dart @@ -0,0 +1,10 @@ +import 'package:flutter/widgets.dart'; + +/// A convenient widget that renders nothing. +class Nothing extends StatelessWidget { + /// Constructs a [Nothing] widget. + const Nothing({super.key}); + + @override + Widget build(BuildContext context) => const SizedBox.shrink(); +} diff --git a/lib/src/utils/rounded.dart b/lib/src/utils/rounded.dart index 7b096060..78cdd7f4 100644 --- a/lib/src/utils/rounded.dart +++ b/lib/src/utils/rounded.dart @@ -1,3 +1,5 @@ +import 'dart:developer'; + import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @@ -68,7 +70,7 @@ extension Rounded on BuildContext { return (widget as dynamic).rounded as bool; } } catch (e) { - debugPrint('Widget does not have rounded'); + log('Widget(${widget.runtimeType}) does not have rounded \n $e'); } return ZetaRoundedScope.of(this)?._rounded ?? Zeta.of(this).rounded; diff --git a/lib/src/utils/utils.dart b/lib/src/utils/utils.dart index 99e032c0..ded9a798 100644 --- a/lib/src/utils/utils.dart +++ b/lib/src/utils/utils.dart @@ -1,4 +1,5 @@ export './debounce.dart'; export './enums.dart'; export './extensions.dart'; +export './nothing.dart'; export './rounded.dart'; diff --git a/lib/src/zeta.dart b/lib/src/zeta.dart index f720eb7b..59103626 100644 --- a/lib/src/zeta.dart +++ b/lib/src/zeta.dart @@ -19,6 +19,7 @@ class Zeta extends InheritedWidget { required this.themeMode, required this.themeData, required super.child, + this.rounded = true, }) : _mediaBrightness = mediaBrightness; /// The current contrast setting for the app, which can be one of the predefined @@ -37,6 +38,13 @@ class Zeta extends InheritedWidget { /// Used to determine the theme mode when it's set to [ThemeMode.system]. final Brightness _mediaBrightness; + /// {@template zeta-component-rounded} + /// Sets rounded or sharp border of the containing box and the icon style. + /// + /// Defaults to `true`. + /// {@endtemplate} + final bool rounded; + /// Provides the color set based on the current theme mode. /// /// It determines the appropriate color set (light or dark) based on the theme mode @@ -51,9 +59,6 @@ class Zeta extends InheritedWidget { } } - /// {@macro zeta-component-rounded} - bool get rounded => themeData.rounded; - /// Gets the brightness setting for the current theme. /// /// If the theme mode is set to 'system', it will return the brightness that ties with the device's system theme setting. @@ -74,7 +79,8 @@ class Zeta extends InheritedWidget { return oldWidget.contrast != contrast || oldWidget.themeMode != themeMode || oldWidget.themeData != themeData || - oldWidget._mediaBrightness != _mediaBrightness; + oldWidget._mediaBrightness != _mediaBrightness || + oldWidget.rounded != rounded; } /// Fetches the [Zeta] instance from the provided [context]. diff --git a/lib/src/zeta_provider.dart b/lib/src/zeta_provider.dart index 92eeb198..c94c9ff0 100644 --- a/lib/src/zeta_provider.dart +++ b/lib/src/zeta_provider.dart @@ -1,17 +1,28 @@ +// ignore_for_file: prefer_function_declarations_over_variables + import 'dart:async'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'theme/contrast.dart'; -import 'theme/theme_data.dart'; -import 'theme/theme_service.dart'; -import 'zeta.dart'; +import '../zeta_flutter.dart'; -/// A typedef for the ZetaAppBuilder function which takes [BuildContext], [ZetaThemeData], +/// A typedef for the ZetaAppBuilder function which passes [BuildContext], [ZetaThemeData], /// and [ThemeMode] and returns a [Widget]. typedef ZetaAppBuilder = Widget Function(BuildContext context, ZetaThemeData themeData, ThemeMode themeMode); +/// A typedef for the ZetaAppBuilder function which passes [BuildContext], light [ThemeData], +/// dark [ThemeData] and [ThemeMode] and returns a [Widget]. +typedef ZetaBaseAppBuilder = Widget Function( + BuildContext context, + ThemeData light, + ThemeData dark, + ThemeMode themeMode, +); + +final _emptyBuilder = (_, __, ___) => const Nothing(); +final _emptyBase = (_, __, ___, ____) => const Nothing(); + /// A widget that provides Zeta theming and contrast data down the widget tree. class ZetaProvider extends StatefulWidget with Diagnosticable { /// Constructs a [ZetaProvider] widget. @@ -19,13 +30,35 @@ class ZetaProvider extends StatefulWidget with Diagnosticable { /// The [builder] argument is required. The [initialThemeMode], [initialContrast], /// and [initialThemeData] arguments provide initial values. ZetaProvider({ + super.key, required this.builder, this.initialThemeMode = ThemeMode.system, this.initialContrast = ZetaContrast.aa, - this.themeService, ZetaThemeData? initialThemeData, + this.themeService, + this.initialRounded = true, + }) : initialZetaThemeData = initialThemeData ?? ZetaThemeData(), + baseBuilder = _emptyBase, + initialLightThemeData = null, + initialDarkThemeData = null; + + /// ZetaProvider constructor that returns light and dark [ThemeData]s ready to be consumed. + /// + /// The [builder] argument is required. The [initialThemeMode], [initialContrast], + /// and [initialLightThemeData] arguments provide initial values. + ZetaProvider.base({ super.key, - }) : initialThemeData = initialThemeData ?? ZetaThemeData(); + required ZetaBaseAppBuilder builder, + this.initialThemeMode = ThemeMode.system, + this.initialContrast = ZetaContrast.aa, + ZetaThemeData? initialZetaThemeData, + this.initialLightThemeData, + this.initialDarkThemeData, + this.initialRounded = true, + }) : baseBuilder = builder, + initialZetaThemeData = initialZetaThemeData ?? ZetaThemeData(), + builder = _emptyBuilder, + themeService = null; /// Specifies the initial theme mode for the app. /// @@ -37,7 +70,7 @@ class ZetaProvider extends StatefulWidget with Diagnosticable { /// /// This contains all the theming information. If not provided, /// it defaults to a basic [ZetaThemeData] instance. - final ZetaThemeData initialThemeData; + final ZetaThemeData initialZetaThemeData; /// Specifies the initial contrast setting for the app. /// @@ -50,11 +83,25 @@ class ZetaProvider extends StatefulWidget with Diagnosticable { /// and is expected to return a [Widget]. final ZetaAppBuilder builder; + /// A builder function to construct the widget tree using the provided theming information. + /// + /// This builder returns light and dark [ThemeData]s ready to be consumed. + final ZetaBaseAppBuilder baseBuilder; + /// A `ZetaThemeService` /// /// It provides the structure for loading and saving themes in Zeta application. final ZetaThemeService? themeService; + /// Light [ThemeData] used in [ZetaProvider.base] constructor as the foundation for a custom theme. + final ThemeData? initialLightThemeData; + + /// Dark [ThemeData] used in [ZetaProvider.base] constructor as the foundation for a custom theme. + final ThemeData? initialDarkThemeData; + + /// Sets whether app should start with components in their rounded or sharp variants. + final bool initialRounded; + @override State createState() => ZetaProviderState(); @@ -62,11 +109,15 @@ class ZetaProvider extends StatefulWidget with Diagnosticable { void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties - ..add(DiagnosticsProperty('themeData', initialThemeData)) + ..add(DiagnosticsProperty('themeData', initialZetaThemeData)) ..add(ObjectFlagProperty.has('builder', builder)) ..add(EnumProperty('initialThemeMode', initialThemeMode)) ..add(EnumProperty('initialContrast', initialContrast)) - ..add(DiagnosticsProperty('themeService', themeService)); + ..add(DiagnosticsProperty('themeService', themeService)) + ..add(ObjectFlagProperty.has('customBuilder', baseBuilder)) + ..add(DiagnosticsProperty('initialThemeData', initialLightThemeData)) + ..add(DiagnosticsProperty('initialRounded', initialRounded)) + ..add(DiagnosticsProperty('initialDarkThemeData', initialDarkThemeData)); } /// Retrieves the [ZetaProviderState] from the provided context. @@ -105,11 +156,20 @@ class ZetaProviderState extends State with Diagnosticable, Widgets late ThemeMode _themeMode; /// Represents the late initialization of the ZetaThemeData object. - late ZetaThemeData _themeData; + late ZetaThemeData _zetaThemeData; /// Represents the late initialization of the system's current brightness (dark or light mode). late Brightness _platformBrightness; + /// {@macro zeta-component-rounded} + late bool _rounded; + + /// Represents the late initialization of the light [ThemeData] object. + late ThemeData? _lightThemeData; + + /// Represents the late initialization of the dark [ThemeData] object. + late ThemeData? _darkThemeData; + /// Represents a nullable brightness value to be used for brightness change debouncing. Brightness? _debounceBrightness; @@ -137,8 +197,17 @@ class ZetaProviderState extends State with Diagnosticable, Widgets // Set the initial contrast. _contrast = widget.initialContrast; + // Sets the initial rounded. + _rounded = widget.initialRounded; + // Apply the initial contrast to the theme data. - _themeData = widget.initialThemeData.apply(contrast: _contrast); + _zetaThemeData = widget.initialZetaThemeData.apply(contrast: _contrast); + + // Set the initial light [ThemeData]. + _lightThemeData = widget.initialLightThemeData; + + // Set the initial light [ThemeData]. + _darkThemeData = widget.initialDarkThemeData; } /// Clean up function to be called when this object is removed from the tree. @@ -188,12 +257,37 @@ class ZetaProviderState extends State with Diagnosticable, Widgets @override Widget build(BuildContext context) { + if (widget.baseBuilder != _emptyBase) { + return Zeta( + themeMode: _themeMode, + themeData: _zetaThemeData, + contrast: _contrast, + mediaBrightness: _platformBrightness, + rounded: _rounded, + child: widget.baseBuilder( + context, + generateZetaTheme( + brightness: Brightness.light, + existingTheme: _lightThemeData, + colorScheme: _lightThemeData?.colorScheme ?? _zetaThemeData.colorsLight.toScheme(), + ), + generateZetaTheme( + brightness: Brightness.dark, + existingTheme: _darkThemeData, + colorScheme: _darkThemeData?.colorScheme ?? _zetaThemeData.colorsDark.toScheme(), + ), + _themeMode, + ), + ); + } + return Zeta( themeMode: _themeMode, - themeData: _themeData, + themeData: _zetaThemeData, contrast: _contrast, + rounded: _rounded, mediaBrightness: _platformBrightness, - child: widget.builder(context, _themeData, _themeMode), + child: widget.builder(context, _zetaThemeData, _themeMode), ); } @@ -202,11 +296,15 @@ class ZetaProviderState extends State with Diagnosticable, Widgets super.didUpdateWidget(oldWidget); if (oldWidget.initialContrast != widget.initialContrast || oldWidget.initialThemeMode != widget.initialThemeMode || - oldWidget.initialThemeData != widget.initialThemeData) { + oldWidget.initialLightThemeData != widget.initialLightThemeData || + oldWidget.initialZetaThemeData != widget.initialZetaThemeData || + oldWidget.initialRounded != widget.initialRounded) { setState(() { _themeMode = widget.initialThemeMode; _contrast = widget.initialContrast; - _themeData = widget.initialThemeData.apply(contrast: _contrast); + _zetaThemeData = widget.initialZetaThemeData.apply(contrast: _contrast); + _lightThemeData = widget.initialLightThemeData; + _rounded = widget.initialRounded; }); } } @@ -222,7 +320,7 @@ class ZetaProviderState extends State with Diagnosticable, Widgets /// Updates the current theme data. void updateThemeData(ZetaThemeData data) { setState(() { - _themeData = data.apply(contrast: _contrast); + _zetaThemeData = data.apply(contrast: _contrast); _saveThemeChange(); }); } @@ -231,7 +329,16 @@ class ZetaProviderState extends State with Diagnosticable, Widgets void updateContrast(ZetaContrast contrast) { setState(() { _contrast = contrast; - _themeData = _themeData.apply(contrast: contrast); + _zetaThemeData = _zetaThemeData.apply(contrast: contrast); + _saveThemeChange(); + }); + } + + /// Updates the current rounded. + // ignore: avoid_positional_boolean_parameters + void updateRounded(bool rounded) { + setState(() { + _rounded = rounded; _saveThemeChange(); }); } @@ -239,7 +346,7 @@ class ZetaProviderState extends State with Diagnosticable, Widgets void _saveThemeChange() { unawaited( widget.themeService?.saveTheme( - themeData: _themeData, + themeData: _zetaThemeData, themeMode: _themeMode, contrast: _contrast, ), @@ -250,8 +357,47 @@ class ZetaProviderState extends State with Diagnosticable, Widgets void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties - ..add(DiagnosticsProperty('themeData', _themeData)) + ..add(DiagnosticsProperty('themeData', _zetaThemeData)) ..add(EnumProperty('contrast', _contrast)) ..add(EnumProperty('themeMode', _themeMode)); } } + +/// Creates a variant of [ThemeData] with added [Zeta] styles. +ThemeData generateZetaTheme({ + required Brightness brightness, + required ColorScheme colorScheme, + ThemeData? existingTheme, + String? fontFamily, +}) { + if (existingTheme != null) { + // Apply the Zeta styles to the existing theme, ignoring fields that are the same as the default ThemeData. + return ThemeData( + brightness: brightness, + useMaterial3: existingTheme.useMaterial3, + fontFamily: fontFamily ?? + (existingTheme.textTheme.bodyMedium?.fontFamily == ThemeData().textTheme.bodyMedium?.fontFamily + ? null + : existingTheme.textTheme.bodyMedium?.fontFamily), + scaffoldBackgroundColor: (existingTheme.colorScheme.surfaceTertiary == ThemeData().colorScheme.surfaceTertiary + ? null + : existingTheme.colorScheme.surfaceTertiary) ?? + colorScheme.surfaceTertiary, + colorScheme: + ((existingTheme.colorScheme == ThemeData().colorScheme ? null : existingTheme.colorScheme) ?? colorScheme) + .copyWith(brightness: brightness), + textTheme: (existingTheme.textTheme == ThemeData().textTheme ? null : existingTheme.textTheme) ?? zetaTextTheme, + iconTheme: (existingTheme.iconTheme == ThemeData().iconTheme ? null : existingTheme.iconTheme) ?? + const IconThemeData(size: kZetaIconSize), + ); + } + return ThemeData( + useMaterial3: true, + fontFamily: fontFamily ?? kZetaFontFamily, + brightness: brightness, + scaffoldBackgroundColor: colorScheme.surfaceTertiary, + colorScheme: colorScheme.copyWith(brightness: brightness), + textTheme: zetaTextTheme, + iconTheme: const IconThemeData(size: kZetaIconSize), + ); +} diff --git a/test/src/components/badge/golden/indicator_default.png b/test/src/components/badge/golden/indicator_default.png index 1c0aa6a8..291fd461 100644 Binary files a/test/src/components/badge/golden/indicator_default.png and b/test/src/components/badge/golden/indicator_default.png differ diff --git a/test/src/components/badge/golden/indicator_icon_default.png b/test/src/components/badge/golden/indicator_icon_default.png index 34bf283a..c472cd38 100644 Binary files a/test/src/components/badge/golden/indicator_icon_default.png and b/test/src/components/badge/golden/indicator_icon_default.png differ diff --git a/test/src/components/badge/golden/indicator_icon_values.png b/test/src/components/badge/golden/indicator_icon_values.png index 9e930cb5..96e73834 100644 Binary files a/test/src/components/badge/golden/indicator_icon_values.png and b/test/src/components/badge/golden/indicator_icon_values.png differ diff --git a/test/src/components/badge/golden/indicator_notification_default.png b/test/src/components/badge/golden/indicator_notification_default.png index 1c0aa6a8..291fd461 100644 Binary files a/test/src/components/badge/golden/indicator_notification_default.png and b/test/src/components/badge/golden/indicator_notification_default.png differ diff --git a/test/src/components/badge/golden/indicator_notification_values.png b/test/src/components/badge/golden/indicator_notification_values.png index 5f3eb489..60afdfc9 100644 Binary files a/test/src/components/badge/golden/indicator_notification_values.png and b/test/src/components/badge/golden/indicator_notification_values.png differ diff --git a/test/src/components/badge/golden/label_dark.png b/test/src/components/badge/golden/label_dark.png index 1e514a9b..56650a35 100644 Binary files a/test/src/components/badge/golden/label_dark.png and b/test/src/components/badge/golden/label_dark.png differ diff --git a/test/src/components/badge/golden/label_default.png b/test/src/components/badge/golden/label_default.png index 8f60d7c5..ab898e1a 100644 Binary files a/test/src/components/badge/golden/label_default.png and b/test/src/components/badge/golden/label_default.png differ diff --git a/test/src/components/badge/golden/label_negative.png b/test/src/components/badge/golden/label_negative.png index 045c3ab3..efd6692b 100644 Binary files a/test/src/components/badge/golden/label_negative.png and b/test/src/components/badge/golden/label_negative.png differ diff --git a/test/src/components/badge/golden/label_neutral.png b/test/src/components/badge/golden/label_neutral.png index 24046acd..8dc692ca 100644 Binary files a/test/src/components/badge/golden/label_neutral.png and b/test/src/components/badge/golden/label_neutral.png differ diff --git a/test/src/components/badge/golden/label_positive.png b/test/src/components/badge/golden/label_positive.png index 711c8308..5df40805 100644 Binary files a/test/src/components/badge/golden/label_positive.png and b/test/src/components/badge/golden/label_positive.png differ diff --git a/test/src/components/badge/golden/label_sharp.png b/test/src/components/badge/golden/label_sharp.png index ebfea1a7..3e96a777 100644 Binary files a/test/src/components/badge/golden/label_sharp.png and b/test/src/components/badge/golden/label_sharp.png differ diff --git a/test/src/components/badge/golden/label_warning.png b/test/src/components/badge/golden/label_warning.png index 5b6326c1..b4091b2c 100644 Binary files a/test/src/components/badge/golden/label_warning.png and b/test/src/components/badge/golden/label_warning.png differ diff --git a/test/src/components/badge/golden/priority_pill_default.png b/test/src/components/badge/golden/priority_pill_default.png index 358111a4..3ec6f2a1 100644 Binary files a/test/src/components/badge/golden/priority_pill_default.png and b/test/src/components/badge/golden/priority_pill_default.png differ diff --git a/test/src/components/badge/golden/priority_pill_high.png b/test/src/components/badge/golden/priority_pill_high.png index 11402303..0384a884 100644 Binary files a/test/src/components/badge/golden/priority_pill_high.png and b/test/src/components/badge/golden/priority_pill_high.png differ diff --git a/test/src/components/badge/golden/priority_pill_low.png b/test/src/components/badge/golden/priority_pill_low.png index ebdc35f8..6199e19f 100644 Binary files a/test/src/components/badge/golden/priority_pill_low.png and b/test/src/components/badge/golden/priority_pill_low.png differ diff --git a/test/src/components/badge/golden/priority_pill_medium.png b/test/src/components/badge/golden/priority_pill_medium.png index c56cd408..e5a1ab11 100644 Binary files a/test/src/components/badge/golden/priority_pill_medium.png and b/test/src/components/badge/golden/priority_pill_medium.png differ diff --git a/test/src/components/badge/golden/status_label_custom.png b/test/src/components/badge/golden/status_label_custom.png index 7e5e24da..dd961c4f 100644 Binary files a/test/src/components/badge/golden/status_label_custom.png and b/test/src/components/badge/golden/status_label_custom.png differ diff --git a/test/src/components/badge/golden/status_label_default.png b/test/src/components/badge/golden/status_label_default.png index 2b8606dc..00459554 100644 Binary files a/test/src/components/badge/golden/status_label_default.png and b/test/src/components/badge/golden/status_label_default.png differ diff --git a/test/src/components/badge/golden/tag_left.png b/test/src/components/badge/golden/tag_left.png index 4ac7894a..879b23a6 100644 Binary files a/test/src/components/badge/golden/tag_left.png and b/test/src/components/badge/golden/tag_left.png differ diff --git a/test/src/components/badge/golden/tag_right.png b/test/src/components/badge/golden/tag_right.png index e078c030..2f860de3 100644 Binary files a/test/src/components/badge/golden/tag_right.png and b/test/src/components/badge/golden/tag_right.png differ diff --git a/test/src/components/button/golden/button_disabled.png b/test/src/components/button/golden/button_disabled.png index fd362469..ed2720f9 100644 Binary files a/test/src/components/button/golden/button_disabled.png and b/test/src/components/button/golden/button_disabled.png differ diff --git a/test/src/components/button/golden/button_negative.png b/test/src/components/button/golden/button_negative.png index b0283c1e..aa2882ae 100644 Binary files a/test/src/components/button/golden/button_negative.png and b/test/src/components/button/golden/button_negative.png differ diff --git a/test/src/components/button/golden/button_outline.png b/test/src/components/button/golden/button_outline.png index ce0f9fa6..93145c17 100644 Binary files a/test/src/components/button/golden/button_outline.png and b/test/src/components/button/golden/button_outline.png differ diff --git a/test/src/components/button/golden/button_outline_subtle.png b/test/src/components/button/golden/button_outline_subtle.png index 536c285b..0fa2b83d 100644 Binary files a/test/src/components/button/golden/button_outline_subtle.png and b/test/src/components/button/golden/button_outline_subtle.png differ diff --git a/test/src/components/button/golden/button_positive.png b/test/src/components/button/golden/button_positive.png index ba493d0a..62018a50 100644 Binary files a/test/src/components/button/golden/button_positive.png and b/test/src/components/button/golden/button_positive.png differ diff --git a/test/src/components/button/golden/button_primary.png b/test/src/components/button/golden/button_primary.png index c2dd825e..124eed1b 100644 Binary files a/test/src/components/button/golden/button_primary.png and b/test/src/components/button/golden/button_primary.png differ diff --git a/test/src/components/button/golden/button_secondary.png b/test/src/components/button/golden/button_secondary.png index 22ca2480..984e16f5 100644 Binary files a/test/src/components/button/golden/button_secondary.png and b/test/src/components/button/golden/button_secondary.png differ diff --git a/test/src/components/button/golden/button_text.png b/test/src/components/button/golden/button_text.png index 7276f3b3..36c7c960 100644 Binary files a/test/src/components/button/golden/button_text.png and b/test/src/components/button/golden/button_text.png differ diff --git a/test/src/components/checkbox/golden/checkbox_disabled.png b/test/src/components/checkbox/golden/checkbox_disabled.png index 0ecfd7bf..6dfe17b6 100644 Binary files a/test/src/components/checkbox/golden/checkbox_disabled.png and b/test/src/components/checkbox/golden/checkbox_disabled.png differ diff --git a/test/src/components/checkbox/golden/checkbox_enabled.png b/test/src/components/checkbox/golden/checkbox_enabled.png index eac35ed1..ad258d31 100644 Binary files a/test/src/components/checkbox/golden/checkbox_enabled.png and b/test/src/components/checkbox/golden/checkbox_enabled.png differ diff --git a/test/src/components/dialpad/golden/dialpad_disabled.png b/test/src/components/dialpad/golden/dialpad_disabled.png index e2357d55..5ee42187 100644 Binary files a/test/src/components/dialpad/golden/dialpad_disabled.png and b/test/src/components/dialpad/golden/dialpad_disabled.png differ diff --git a/test/src/components/dialpad/golden/dialpad_enabled.png b/test/src/components/dialpad/golden/dialpad_enabled.png index e2357d55..5ee42187 100644 Binary files a/test/src/components/dialpad/golden/dialpad_enabled.png and b/test/src/components/dialpad/golden/dialpad_enabled.png differ diff --git a/test/src/components/dialpad/golden/dialpadbutton.png b/test/src/components/dialpad/golden/dialpadbutton.png index b7c289fc..7bbc925e 100644 Binary files a/test/src/components/dialpad/golden/dialpadbutton.png and b/test/src/components/dialpad/golden/dialpadbutton.png differ diff --git a/test/src/components/fabs/golden/FAB_default.png b/test/src/components/fabs/golden/FAB_default.png index e9fd5e47..8ab4dac2 100644 Binary files a/test/src/components/fabs/golden/FAB_default.png and b/test/src/components/fabs/golden/FAB_default.png differ diff --git a/test/src/components/fabs/golden/FAB_inverse.png b/test/src/components/fabs/golden/FAB_inverse.png index fed07d53..41bf5c0f 100644 Binary files a/test/src/components/fabs/golden/FAB_inverse.png and b/test/src/components/fabs/golden/FAB_inverse.png differ diff --git a/test/src/components/fabs/golden/FAB_secondary.png b/test/src/components/fabs/golden/FAB_secondary.png index df672743..40f2cf3b 100644 Binary files a/test/src/components/fabs/golden/FAB_secondary.png and b/test/src/components/fabs/golden/FAB_secondary.png differ diff --git a/test/src/components/in_page_banner/golden/in_page_banner_buttons.png b/test/src/components/in_page_banner/golden/in_page_banner_buttons.png index bfc5644e..1b34beed 100644 Binary files a/test/src/components/in_page_banner/golden/in_page_banner_buttons.png and b/test/src/components/in_page_banner/golden/in_page_banner_buttons.png differ diff --git a/test/src/components/in_page_banner/golden/in_page_banner_default.png b/test/src/components/in_page_banner/golden/in_page_banner_default.png index 641ee16b..d1dc47c0 100644 Binary files a/test/src/components/in_page_banner/golden/in_page_banner_default.png and b/test/src/components/in_page_banner/golden/in_page_banner_default.png differ diff --git a/test/src/components/in_page_banner/golden/in_page_banner_negative.png b/test/src/components/in_page_banner/golden/in_page_banner_negative.png index 406c1b0f..3088dce8 100644 Binary files a/test/src/components/in_page_banner/golden/in_page_banner_negative.png and b/test/src/components/in_page_banner/golden/in_page_banner_negative.png differ diff --git a/test/src/components/in_page_banner/golden/in_page_banner_positive.png b/test/src/components/in_page_banner/golden/in_page_banner_positive.png index 7c12198b..2ec287da 100644 Binary files a/test/src/components/in_page_banner/golden/in_page_banner_positive.png and b/test/src/components/in_page_banner/golden/in_page_banner_positive.png differ diff --git a/test/src/components/password/golden/password_default.png b/test/src/components/password/golden/password_default.png index 91231e82..87a49c78 100644 Binary files a/test/src/components/password/golden/password_default.png and b/test/src/components/password/golden/password_default.png differ diff --git a/test/src/components/password/golden/password_error.png b/test/src/components/password/golden/password_error.png index b7ed8586..f2288ab0 100644 Binary files a/test/src/components/password/golden/password_error.png and b/test/src/components/password/golden/password_error.png differ diff --git a/test/src/components/tooltip/golden/arrow_down.png b/test/src/components/tooltip/golden/arrow_down.png index 4635ff7c..f7e97880 100644 Binary files a/test/src/components/tooltip/golden/arrow_down.png and b/test/src/components/tooltip/golden/arrow_down.png differ diff --git a/test/src/components/tooltip/golden/arrow_left.png b/test/src/components/tooltip/golden/arrow_left.png index e15b340e..05f2c4fb 100644 Binary files a/test/src/components/tooltip/golden/arrow_left.png and b/test/src/components/tooltip/golden/arrow_left.png differ diff --git a/test/src/components/tooltip/golden/arrow_right.png b/test/src/components/tooltip/golden/arrow_right.png index 12a63dee..c329440c 100644 Binary files a/test/src/components/tooltip/golden/arrow_right.png and b/test/src/components/tooltip/golden/arrow_right.png differ diff --git a/test/src/components/tooltip/golden/arrow_up.png b/test/src/components/tooltip/golden/arrow_up.png index 6ea5556f..c7f0165b 100644 Binary files a/test/src/components/tooltip/golden/arrow_up.png and b/test/src/components/tooltip/golden/arrow_up.png differ diff --git a/test/src/utils/rounded_test.dart b/test/src/utils/rounded_test.dart index 60ee61a4..cb342111 100644 --- a/test/src/utils/rounded_test.dart +++ b/test/src/utils/rounded_test.dart @@ -172,7 +172,7 @@ void main() { testWidgets('ZetaRoundedScope debugFillProperties works correctly', (WidgetTester tester) async { final diagnostics = DiagnosticPropertiesBuilder(); - const ZetaRoundedScope(rounded: true, child: SizedBox()).debugFillProperties(diagnostics); + const ZetaRoundedScope(rounded: true, child: Nothing()).debugFillProperties(diagnostics); final rounded = diagnostics.properties.where((p) => p.name == 'rounded').map((p) => p.toDescription()).first; expect(rounded, 'true'); diff --git a/test/src/zeta_provider_test.dart b/test/src/zeta_provider_test.dart index 1d39bcf1..38f65a99 100644 --- a/test/src/zeta_provider_test.dart +++ b/test/src/zeta_provider_test.dart @@ -25,7 +25,7 @@ void main() { final providerState = tester.state(find.byType(ZetaProvider)); expect(providerState.widget.initialThemeMode, ThemeMode.system); expect(providerState.widget.initialContrast, ZetaContrast.aa); - expect(providerState.widget.initialThemeData, isNotNull); + expect(providerState.widget.initialZetaThemeData, isNotNull); }); testWidgets('initializes with provided values', (WidgetTester tester) async { @@ -42,7 +42,7 @@ void main() { final providerState = tester.state(find.byType(ZetaProvider)); expect(providerState.widget.initialThemeMode, ThemeMode.light); expect(providerState.widget.initialContrast, ZetaContrast.aaa); - expect(providerState.widget.initialThemeData, initialThemeData); + expect(providerState.widget.initialZetaThemeData, initialThemeData); expect(providerState.widget.themeService, mockThemeService); }); diff --git a/test/test_utils/test_app.dart b/test/test_utils/test_app.dart index 6e2396fb..97272772 100644 --- a/test/test_utils/test_app.dart +++ b/test/test_utils/test_app.dart @@ -20,21 +20,14 @@ class TestApp extends StatelessWidget { @override Widget build(BuildContext context) { - return ZetaProvider( + return ZetaProvider.base( initialThemeMode: themeMode ?? ThemeMode.system, - initialThemeData: ZetaThemeData(rounded: rounded ?? true), - builder: (context, themeData, themeMode) { + initialRounded: rounded ?? true, + builder: (context, lightTheme, darkTheme, themeMode) { return MaterialApp( - theme: ThemeData( - fontFamily: themeData.fontFamily, - colorScheme: themeData.colorsLight.toScheme(), - textTheme: zetaTextTheme, - ), - darkTheme: ThemeData( - fontFamily: themeData.fontFamily, - colorScheme: themeData.colorsDark.toScheme(), - textTheme: zetaTextTheme, - ), + theme: lightTheme, + darkTheme: darkTheme, + themeMode: themeMode, home: Scaffold( body: removeBody ? home