-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat(main): AppBar * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <[email protected]>
- Loading branch information
1 parent
904ec8b
commit eefcb61
Showing
6 changed files
with
920 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,69 +1,151 @@ | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:shared_preferences/shared_preferences.dart'; | ||
| import 'package:zeta_example/theme_service.dart'; | ||
| import 'package:go_router/go_router.dart'; | ||
| import 'package:zeta_example/pages/components/accordion_example.dart'; | ||
| import 'package:zeta_example/pages/components/app_bar_example.dart'; | ||
| import 'package:zeta_example/pages/components/avatar_example.dart'; | ||
| import 'package:zeta_example/pages/components/badges_example.dart'; | ||
| import 'package:zeta_example/pages/components/banner_example.dart'; | ||
| import 'package:zeta_example/pages/components/bottom_sheet_example.dart'; | ||
| import 'package:zeta_example/pages/components/breadcrumbs_example.dart'; | ||
| import 'package:zeta_example/pages/components/button_example.dart'; | ||
| import 'package:zeta_example/pages/components/checkbox_example.dart'; | ||
| import 'package:zeta_example/pages/components/chip_example.dart'; | ||
| import 'package:zeta_example/pages/components/date_input_example.dart'; | ||
| import 'package:zeta_example/pages/components/dialog_example.dart'; | ||
| import 'package:zeta_example/pages/components/dialpad_example.dart'; | ||
| import 'package:zeta_example/pages/components/dropdown_example.dart'; | ||
| import 'package:zeta_example/pages/components/list_item_example.dart'; | ||
| import 'package:zeta_example/pages/components/navigation_bar_example.dart'; | ||
| import 'package:zeta_example/pages/components/radio_example.dart'; | ||
| import 'package:zeta_example/pages/components/stepper_example.dart'; | ||
| import 'package:zeta_example/pages/components/switch_example.dart'; | ||
| import 'package:zeta_example/pages/components/snackbar_example.dart'; | ||
| import 'package:zeta_example/pages/components/tabs_example.dart'; | ||
| import 'package:zeta_example/pages/theme/color_example.dart'; | ||
| import 'package:zeta_example/pages/components/password_input_example.dart'; | ||
| import 'package:zeta_example/pages/components/progress_example.dart'; | ||
| import 'package:zeta_example/pages/assets/icons_example.dart'; | ||
| import 'package:zeta_example/pages/theme/radius_example.dart'; | ||
| import 'package:zeta_example/pages/theme/spacing_example.dart'; | ||
| import 'package:zeta_example/pages/theme/typography_example.dart'; | ||
| import 'package:zeta_example/widgets.dart'; | ||
| import 'package:zeta_flutter/zeta_flutter.dart'; | ||
| import 'home.dart'; | ||
|
|
||
| void main() async { | ||
| WidgetsFlutterBinding.ensureInitialized(); | ||
| class Component { | ||
| final String name; | ||
| final WidgetBuilder pageBuilder; | ||
| final List<Component> children; | ||
| Component(this.name, this.pageBuilder, [this.children = const []]); | ||
| } | ||
|
|
||
| final preferences = await SharedPreferences.getInstance(); | ||
| final themeService = SharedPrefsThemeService(preferences); | ||
| final themePreferences = await themeService.loadTheme(); | ||
| final List<Component> components = [ | ||
| Component(AccordionExample.name, (context) => const AccordionExample()), | ||
| Component(AppBarExample.name, (context) => const AppBarExample()), | ||
| Component(AvatarExample.name, (context) => const AvatarExample()), | ||
| Component(BannerExample.name, (context) => const BannerExample()), | ||
| Component(BadgesExample.name, (context) => const BadgesExample()), | ||
| Component(BottomSheetExample.name, (context) => const BottomSheetExample()), | ||
| Component(BreadCrumbsExample.name, (context) => const BreadCrumbsExample()), | ||
| Component(ButtonExample.name, (context) => const ButtonExample()), | ||
| Component(CheckBoxExample.name, (context) => const CheckBoxExample()), | ||
| Component(ChipExample.name, (context) => const ChipExample()), | ||
| Component(ListItemExample.name, (context) => const ListItemExample()), | ||
| Component(NavigationBarExample.name, (context) => const NavigationBarExample()), | ||
| Component(PasswordInputExample.name, (context) => const PasswordInputExample()), | ||
| Component(DropdownExample.name, (context) => const DropdownExample()), | ||
| Component(ProgressExample.name, (context) => const ProgressExample()), | ||
| Component(SnackBarExample.name, (context) => const SnackBarExample()), | ||
| Component(StepperExample.name, (context) => const StepperExample()), | ||
| Component(TabsExample.name, (context) => const TabsExample()), | ||
| Component(DialPadExample.name, (context) => const DialPadExample()), | ||
| Component(RadioButtonExample.name, (context) => const RadioButtonExample()), | ||
| Component(SwitchExample.name, (context) => const SwitchExample()), | ||
| Component(DateInputExample.name, (context) => const DateInputExample()), | ||
| Component(DialogExample.name, (context) => const DialogExample()), | ||
| ]; | ||
|
|
||
| runApp( | ||
| ZetaExample( | ||
| themeService: themeService, | ||
| initialThemeData: themePreferences.$1 ?? ZetaThemeData(), | ||
| initialThemeMode: themePreferences.$2 ?? ThemeMode.system, | ||
| initialContrast: themePreferences.$3 ?? ZetaContrast.aa, | ||
| ), | ||
| ); | ||
| } | ||
| final List<Component> theme = [ | ||
| Component(ColorExample.name, (context) => const ColorExample()), | ||
| Component(TypographyExample.name, (context) => const TypographyExample()), | ||
| Component(RadiusExample.name, (context) => const RadiusExample()), | ||
| Component(SpacingExample.name, (context) => const SpacingExample()), | ||
| ]; | ||
| final List<Component> assets = [ | ||
| Component(IconsExample.name, (context) => const IconsExample()), | ||
| ]; | ||
|
|
||
| class ZetaExample extends StatelessWidget { | ||
| const ZetaExample({ | ||
| super.key, | ||
| required this.themeService, | ||
| required this.initialContrast, | ||
| required this.initialThemeMode, | ||
| required this.initialThemeData, | ||
| }); | ||
| class Home extends StatefulWidget { | ||
| const Home({super.key}); | ||
|
|
||
| @override | ||
| State<Home> createState() => _HomeState(); | ||
| } | ||
|
|
||
| final ZetaThemeService themeService; | ||
| final ZetaContrast initialContrast; | ||
| final ThemeMode initialThemeMode; | ||
| final ZetaThemeData initialThemeData; | ||
| final GoRouter router = GoRouter( | ||
| routes: [ | ||
| GoRoute( | ||
| path: '/', | ||
| name: 'Home', | ||
| builder: (_, __) => const Home(), | ||
| routes: [ | ||
| ...[ | ||
| ...components, | ||
| ...assets, | ||
| ...theme, | ||
| ].map( | ||
| (e) => GoRoute( | ||
| path: e.name, | ||
| name: e.name, | ||
| builder: (_, __) => e.pageBuilder.call(_), | ||
| routes: e.children | ||
| .map((f) => GoRoute( | ||
| path: f.name, | ||
| name: f.name, | ||
| builder: (_, __) => f.pageBuilder(_), | ||
| )) | ||
| .toList(), | ||
| ), | ||
| ), | ||
| ], | ||
| ), | ||
| ], | ||
| ); | ||
|
|
||
| class _HomeState extends State<Home> { | ||
| @override | ||
| Widget build(BuildContext context) { | ||
| return ZetaProvider( | ||
| themeService: themeService, | ||
| initialContrast: initialContrast, | ||
| initialThemeData: initialThemeData, | ||
| initialThemeMode: initialThemeMode, | ||
| builder: (context, themeData, themeMode) { | ||
| final dark = themeData.colorsDark.toScheme(); | ||
| final light = themeData.colorsLight.toScheme(); | ||
| return MaterialApp.router( | ||
| routerConfig: router, | ||
| themeMode: themeMode, | ||
| theme: ThemeData( | ||
| useMaterial3: true, | ||
| fontFamily: themeData.fontFamily, | ||
| scaffoldBackgroundColor: light.background, | ||
| colorScheme: light, | ||
| textTheme: zetaTextTheme, | ||
| ), | ||
| darkTheme: ThemeData( | ||
| useMaterial3: true, | ||
| fontFamily: themeData.fontFamily, | ||
| scaffoldBackgroundColor: dark.background, | ||
| colorScheme: dark, | ||
| textTheme: zetaTextTheme, | ||
| ), | ||
| ); | ||
| }, | ||
| final _components = components..sort((a, b) => a.name.compareTo(b.name)); | ||
| final _assets = assets..sort((a, b) => a.name.compareTo(b.name)); | ||
| final _theme = theme..sort((a, b) => a.name.compareTo(b.name)); | ||
| return ExampleScaffold( | ||
| name: 'Zeta', | ||
| child: SingleChildScrollView( | ||
| child: Column( | ||
| children: [ | ||
| ExpansionTile( | ||
| title: Text('Widgets'), | ||
| backgroundColor: Zeta.of(context).colors.warm.shade30, | ||
| children: _components | ||
| .map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}'))) | ||
| .toList(), | ||
| ), | ||
| ExpansionTile( | ||
| title: Text('Theme'), | ||
| backgroundColor: Zeta.of(context).colors.warm.shade30, | ||
| children: _theme | ||
| .map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}'))) | ||
| .toList(), | ||
| ), | ||
| ExpansionTile( | ||
| title: Text('Assets'), | ||
| backgroundColor: Zeta.of(context).colors.warm.shade30, | ||
| children: _assets | ||
| .map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}'))) | ||
| .toList(), | ||
| ), | ||
| ], | ||
| ), | ||
| ), | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,182 @@ | ||
| import 'dart:math'; | ||
|
|
||
| import 'package:flutter/material.dart'; | ||
| import 'package:zeta_example/widgets.dart'; | ||
| import 'package:zeta_flutter/zeta_flutter.dart'; | ||
|
|
||
| class AppBarExample extends StatefulWidget { | ||
| const AppBarExample({super.key}); | ||
|
|
||
| static const String name = 'AppBar'; | ||
|
|
||
| @override | ||
| State<AppBarExample> createState() => _AppBarExampleState(); | ||
| } | ||
|
|
||
| class _AppBarExampleState extends State<AppBarExample> { | ||
| late final _searchController = AppBarSearchController(); | ||
|
|
||
| void _showHideSearch() { | ||
| _searchController.isEnabled ? _searchController.closeSearch() : _searchController.startSearch(); | ||
| } | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return ExampleScaffold( | ||
| name: AppBarExample.name, | ||
| child: SingleChildScrollView( | ||
| child: Column( | ||
| children: [ | ||
| // Default | ||
| Padding( | ||
| padding: const EdgeInsets.only(top: ZetaSpacing.x4), | ||
| child: ZetaAppBar( | ||
| leading: IconButton( | ||
| onPressed: () {}, | ||
| icon: Icon(Icons.menu_rounded), | ||
| ), | ||
| title: Row( | ||
| children: [ | ||
| ZetaAvatar(size: ZetaAvatarSize.xs), | ||
| Padding( | ||
| padding: const EdgeInsets.only(left: ZetaSpacing.s), | ||
| child: Text("Title"), | ||
| ), | ||
| ], | ||
| ), | ||
| actions: [ | ||
| IconButton( | ||
| onPressed: () {}, | ||
| icon: Icon(Icons.language), | ||
| ), | ||
| IconButton( | ||
| onPressed: () {}, | ||
| icon: Icon(Icons.favorite), | ||
| ), | ||
| IconButton( | ||
| onPressed: () {}, | ||
| icon: Icon(ZetaIcons.more_vertical_round), | ||
| ) | ||
| ], | ||
| ), | ||
| ), | ||
|
|
||
| // Centered | ||
| Padding( | ||
| padding: const EdgeInsets.only(top: ZetaSpacing.x4), | ||
| child: ZetaAppBar( | ||
| type: ZetaAppBarType.centeredTitle, | ||
| leading: IconButton( | ||
| onPressed: () {}, | ||
| icon: Icon(Icons.menu_rounded), | ||
| ), | ||
| title: Text("Title"), | ||
| actions: [ | ||
| IconButton( | ||
| onPressed: () {}, | ||
| icon: Icon(Icons.account_circle), | ||
| ), | ||
| ], | ||
| ), | ||
| ), | ||
|
|
||
| // Contextual | ||
| Padding( | ||
| padding: const EdgeInsets.only(top: ZetaSpacing.x4), | ||
| child: ZetaAppBar( | ||
| leading: IconButton( | ||
| onPressed: () {}, | ||
| icon: Icon(ZetaIcons.close_round), | ||
| ), | ||
| title: Text("2 items"), | ||
| actions: [ | ||
| IconButton( | ||
| onPressed: () {}, | ||
| icon: Icon(ZetaIcons.edit_round), | ||
| ), | ||
| IconButton( | ||
| onPressed: () {}, | ||
| icon: Icon(ZetaIcons.share_round), | ||
| ), | ||
| IconButton( | ||
| onPressed: () {}, | ||
| icon: Icon(ZetaIcons.delete_round), | ||
| ), | ||
| IconButton( | ||
| onPressed: () {}, | ||
| icon: Icon(ZetaIcons.more_vertical_round), | ||
| ), | ||
| ], | ||
| ), | ||
| ), | ||
|
|
||
| // Search | ||
| Padding( | ||
| padding: const EdgeInsets.only(top: ZetaSpacing.x4), | ||
| child: Column( | ||
| children: [ | ||
| ZetaAppBar( | ||
| type: ZetaAppBarType.centeredTitle, | ||
| leading: BackButton(), | ||
| title: Text("Title"), | ||
| actions: [ | ||
| IconButton( | ||
| onPressed: _showHideSearch, | ||
| icon: Icon(ZetaIcons.search_round), | ||
| ) | ||
| ], | ||
| searchController: _searchController, | ||
| onSearch: (text) => debugPrint('search text: $text'), | ||
| onSearchMicrophoneIconPressed: () async { | ||
| var sampleTexts = [ | ||
| 'This is a sample text', | ||
| 'Another sample', | ||
| 'Speech recognition text', | ||
| 'Example' | ||
| ]; | ||
|
|
||
| var generatedText = sampleTexts[Random().nextInt(sampleTexts.length)]; | ||
|
|
||
| _searchController.text = generatedText; | ||
| }, | ||
| ), | ||
| ZetaButton.primary( | ||
| label: "Show/Hide Search", | ||
| onPressed: _showHideSearch, | ||
| ) | ||
| ], | ||
| ), | ||
| ), | ||
|
|
||
| // Extended | ||
| Padding( | ||
| padding: const EdgeInsets.only(top: ZetaSpacing.x4), | ||
| child: ZetaAppBar( | ||
| type: ZetaAppBarType.extendedTitle, | ||
| leading: IconButton( | ||
| onPressed: () {}, | ||
| icon: Icon(Icons.menu), | ||
| ), | ||
| title: Text("Large title"), | ||
| actions: [ | ||
| IconButton( | ||
| onPressed: () {}, | ||
| icon: Icon(Icons.language), | ||
| ), | ||
| IconButton( | ||
| onPressed: () {}, | ||
| icon: Icon(Icons.favorite), | ||
| ), | ||
| IconButton( | ||
| onPressed: () {}, | ||
| icon: Icon(ZetaIcons.more_vertical_round), | ||
| ) | ||
| ], | ||
| ), | ||
| ), | ||
| ], | ||
| ), | ||
| ), | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.