Skip to content

Commit 96f4aad

Browse files
thelukewaltongithub-actions
thelukewalton
and
github-actions
committed
feat: AppBar (#19)
* feat(main): AppBar * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <[email protected]>
1 parent 7b762e6 commit 96f4aad

File tree

6 files changed

+920
-56
lines changed

6 files changed

+920
-56
lines changed

‎example/lib/main.dart

+138-56
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,151 @@
11
import 'package:flutter/material.dart';
2-
import 'package:shared_preferences/shared_preferences.dart';
3-
import 'package:zeta_example/theme_service.dart';
2+
import 'package:go_router/go_router.dart';
3+
import 'package:zeta_example/pages/components/accordion_example.dart';
4+
import 'package:zeta_example/pages/components/app_bar_example.dart';
5+
import 'package:zeta_example/pages/components/avatar_example.dart';
6+
import 'package:zeta_example/pages/components/badges_example.dart';
7+
import 'package:zeta_example/pages/components/banner_example.dart';
8+
import 'package:zeta_example/pages/components/bottom_sheet_example.dart';
9+
import 'package:zeta_example/pages/components/breadcrumbs_example.dart';
10+
import 'package:zeta_example/pages/components/button_example.dart';
11+
import 'package:zeta_example/pages/components/checkbox_example.dart';
12+
import 'package:zeta_example/pages/components/chip_example.dart';
13+
import 'package:zeta_example/pages/components/date_input_example.dart';
14+
import 'package:zeta_example/pages/components/dialog_example.dart';
15+
import 'package:zeta_example/pages/components/dialpad_example.dart';
16+
import 'package:zeta_example/pages/components/dropdown_example.dart';
17+
import 'package:zeta_example/pages/components/list_item_example.dart';
18+
import 'package:zeta_example/pages/components/navigation_bar_example.dart';
19+
import 'package:zeta_example/pages/components/radio_example.dart';
20+
import 'package:zeta_example/pages/components/stepper_example.dart';
21+
import 'package:zeta_example/pages/components/switch_example.dart';
22+
import 'package:zeta_example/pages/components/snackbar_example.dart';
23+
import 'package:zeta_example/pages/components/tabs_example.dart';
24+
import 'package:zeta_example/pages/theme/color_example.dart';
25+
import 'package:zeta_example/pages/components/password_input_example.dart';
26+
import 'package:zeta_example/pages/components/progress_example.dart';
27+
import 'package:zeta_example/pages/assets/icons_example.dart';
28+
import 'package:zeta_example/pages/theme/radius_example.dart';
29+
import 'package:zeta_example/pages/theme/spacing_example.dart';
30+
import 'package:zeta_example/pages/theme/typography_example.dart';
31+
import 'package:zeta_example/widgets.dart';
432
import 'package:zeta_flutter/zeta_flutter.dart';
5-
import 'home.dart';
633

7-
void main() async {
8-
WidgetsFlutterBinding.ensureInitialized();
34+
class Component {
35+
final String name;
36+
final WidgetBuilder pageBuilder;
37+
final List<Component> children;
38+
Component(this.name, this.pageBuilder, [this.children = const []]);
39+
}
940

10-
final preferences = await SharedPreferences.getInstance();
11-
final themeService = SharedPrefsThemeService(preferences);
12-
final themePreferences = await themeService.loadTheme();
41+
final List<Component> components = [
42+
Component(AccordionExample.name, (context) => const AccordionExample()),
43+
Component(AppBarExample.name, (context) => const AppBarExample()),
44+
Component(AvatarExample.name, (context) => const AvatarExample()),
45+
Component(BannerExample.name, (context) => const BannerExample()),
46+
Component(BadgesExample.name, (context) => const BadgesExample()),
47+
Component(BottomSheetExample.name, (context) => const BottomSheetExample()),
48+
Component(BreadCrumbsExample.name, (context) => const BreadCrumbsExample()),
49+
Component(ButtonExample.name, (context) => const ButtonExample()),
50+
Component(CheckBoxExample.name, (context) => const CheckBoxExample()),
51+
Component(ChipExample.name, (context) => const ChipExample()),
52+
Component(ListItemExample.name, (context) => const ListItemExample()),
53+
Component(NavigationBarExample.name, (context) => const NavigationBarExample()),
54+
Component(PasswordInputExample.name, (context) => const PasswordInputExample()),
55+
Component(DropdownExample.name, (context) => const DropdownExample()),
56+
Component(ProgressExample.name, (context) => const ProgressExample()),
57+
Component(SnackBarExample.name, (context) => const SnackBarExample()),
58+
Component(StepperExample.name, (context) => const StepperExample()),
59+
Component(TabsExample.name, (context) => const TabsExample()),
60+
Component(DialPadExample.name, (context) => const DialPadExample()),
61+
Component(RadioButtonExample.name, (context) => const RadioButtonExample()),
62+
Component(SwitchExample.name, (context) => const SwitchExample()),
63+
Component(DateInputExample.name, (context) => const DateInputExample()),
64+
Component(DialogExample.name, (context) => const DialogExample()),
65+
];
1366

14-
runApp(
15-
ZetaExample(
16-
themeService: themeService,
17-
initialThemeData: themePreferences.$1 ?? ZetaThemeData(),
18-
initialThemeMode: themePreferences.$2 ?? ThemeMode.system,
19-
initialContrast: themePreferences.$3 ?? ZetaContrast.aa,
20-
),
21-
);
22-
}
67+
final List<Component> theme = [
68+
Component(ColorExample.name, (context) => const ColorExample()),
69+
Component(TypographyExample.name, (context) => const TypographyExample()),
70+
Component(RadiusExample.name, (context) => const RadiusExample()),
71+
Component(SpacingExample.name, (context) => const SpacingExample()),
72+
];
73+
final List<Component> assets = [
74+
Component(IconsExample.name, (context) => const IconsExample()),
75+
];
2376

24-
class ZetaExample extends StatelessWidget {
25-
const ZetaExample({
26-
super.key,
27-
required this.themeService,
28-
required this.initialContrast,
29-
required this.initialThemeMode,
30-
required this.initialThemeData,
31-
});
77+
class Home extends StatefulWidget {
78+
const Home({super.key});
79+
80+
@override
81+
State<Home> createState() => _HomeState();
82+
}
3283

33-
final ZetaThemeService themeService;
34-
final ZetaContrast initialContrast;
35-
final ThemeMode initialThemeMode;
36-
final ZetaThemeData initialThemeData;
84+
final GoRouter router = GoRouter(
85+
routes: [
86+
GoRoute(
87+
path: '/',
88+
name: 'Home',
89+
builder: (_, __) => const Home(),
90+
routes: [
91+
...[
92+
...components,
93+
...assets,
94+
...theme,
95+
].map(
96+
(e) => GoRoute(
97+
path: e.name,
98+
name: e.name,
99+
builder: (_, __) => e.pageBuilder.call(_),
100+
routes: e.children
101+
.map((f) => GoRoute(
102+
path: f.name,
103+
name: f.name,
104+
builder: (_, __) => f.pageBuilder(_),
105+
))
106+
.toList(),
107+
),
108+
),
109+
],
110+
),
111+
],
112+
);
37113

114+
class _HomeState extends State<Home> {
38115
@override
39116
Widget build(BuildContext context) {
40-
return ZetaProvider(
41-
themeService: themeService,
42-
initialContrast: initialContrast,
43-
initialThemeData: initialThemeData,
44-
initialThemeMode: initialThemeMode,
45-
builder: (context, themeData, themeMode) {
46-
final dark = themeData.colorsDark.toScheme();
47-
final light = themeData.colorsLight.toScheme();
48-
return MaterialApp.router(
49-
routerConfig: router,
50-
themeMode: themeMode,
51-
theme: ThemeData(
52-
useMaterial3: true,
53-
fontFamily: themeData.fontFamily,
54-
scaffoldBackgroundColor: light.background,
55-
colorScheme: light,
56-
textTheme: zetaTextTheme,
57-
),
58-
darkTheme: ThemeData(
59-
useMaterial3: true,
60-
fontFamily: themeData.fontFamily,
61-
scaffoldBackgroundColor: dark.background,
62-
colorScheme: dark,
63-
textTheme: zetaTextTheme,
64-
),
65-
);
66-
},
117+
final _components = components..sort((a, b) => a.name.compareTo(b.name));
118+
final _assets = assets..sort((a, b) => a.name.compareTo(b.name));
119+
final _theme = theme..sort((a, b) => a.name.compareTo(b.name));
120+
return ExampleScaffold(
121+
name: 'Zeta',
122+
child: SingleChildScrollView(
123+
child: Column(
124+
children: [
125+
ExpansionTile(
126+
title: Text('Widgets'),
127+
backgroundColor: Zeta.of(context).colors.warm.shade30,
128+
children: _components
129+
.map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}')))
130+
.toList(),
131+
),
132+
ExpansionTile(
133+
title: Text('Theme'),
134+
backgroundColor: Zeta.of(context).colors.warm.shade30,
135+
children: _theme
136+
.map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}')))
137+
.toList(),
138+
),
139+
ExpansionTile(
140+
title: Text('Assets'),
141+
backgroundColor: Zeta.of(context).colors.warm.shade30,
142+
children: _assets
143+
.map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}')))
144+
.toList(),
145+
),
146+
],
147+
),
148+
),
67149
);
68150
}
69151
}

‎example/lib/pages/components/app_bar_example.dart

+182
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
import 'dart:math';
2+
3+
import 'package:flutter/material.dart';
4+
import 'package:zeta_example/widgets.dart';
5+
import 'package:zeta_flutter/zeta_flutter.dart';
6+
7+
class AppBarExample extends StatefulWidget {
8+
const AppBarExample({super.key});
9+
10+
static const String name = 'AppBar';
11+
12+
@override
13+
State<AppBarExample> createState() => _AppBarExampleState();
14+
}
15+
16+
class _AppBarExampleState extends State<AppBarExample> {
17+
late final _searchController = AppBarSearchController();
18+
19+
void _showHideSearch() {
20+
_searchController.isEnabled ? _searchController.closeSearch() : _searchController.startSearch();
21+
}
22+
23+
@override
24+
Widget build(BuildContext context) {
25+
return ExampleScaffold(
26+
name: AppBarExample.name,
27+
child: SingleChildScrollView(
28+
child: Column(
29+
children: [
30+
// Default
31+
Padding(
32+
padding: const EdgeInsets.only(top: ZetaSpacing.x4),
33+
child: ZetaAppBar(
34+
leading: IconButton(
35+
onPressed: () {},
36+
icon: Icon(Icons.menu_rounded),
37+
),
38+
title: Row(
39+
children: [
40+
ZetaAvatar(size: ZetaAvatarSize.xs),
41+
Padding(
42+
padding: const EdgeInsets.only(left: ZetaSpacing.s),
43+
child: Text("Title"),
44+
),
45+
],
46+
),
47+
actions: [
48+
IconButton(
49+
onPressed: () {},
50+
icon: Icon(Icons.language),
51+
),
52+
IconButton(
53+
onPressed: () {},
54+
icon: Icon(Icons.favorite),
55+
),
56+
IconButton(
57+
onPressed: () {},
58+
icon: Icon(ZetaIcons.more_vertical_round),
59+
)
60+
],
61+
),
62+
),
63+
64+
// Centered
65+
Padding(
66+
padding: const EdgeInsets.only(top: ZetaSpacing.x4),
67+
child: ZetaAppBar(
68+
type: ZetaAppBarType.centeredTitle,
69+
leading: IconButton(
70+
onPressed: () {},
71+
icon: Icon(Icons.menu_rounded),
72+
),
73+
title: Text("Title"),
74+
actions: [
75+
IconButton(
76+
onPressed: () {},
77+
icon: Icon(Icons.account_circle),
78+
),
79+
],
80+
),
81+
),
82+
83+
// Contextual
84+
Padding(
85+
padding: const EdgeInsets.only(top: ZetaSpacing.x4),
86+
child: ZetaAppBar(
87+
leading: IconButton(
88+
onPressed: () {},
89+
icon: Icon(ZetaIcons.close_round),
90+
),
91+
title: Text("2 items"),
92+
actions: [
93+
IconButton(
94+
onPressed: () {},
95+
icon: Icon(ZetaIcons.edit_round),
96+
),
97+
IconButton(
98+
onPressed: () {},
99+
icon: Icon(ZetaIcons.share_round),
100+
),
101+
IconButton(
102+
onPressed: () {},
103+
icon: Icon(ZetaIcons.delete_round),
104+
),
105+
IconButton(
106+
onPressed: () {},
107+
icon: Icon(ZetaIcons.more_vertical_round),
108+
),
109+
],
110+
),
111+
),
112+
113+
// Search
114+
Padding(
115+
padding: const EdgeInsets.only(top: ZetaSpacing.x4),
116+
child: Column(
117+
children: [
118+
ZetaAppBar(
119+
type: ZetaAppBarType.centeredTitle,
120+
leading: BackButton(),
121+
title: Text("Title"),
122+
actions: [
123+
IconButton(
124+
onPressed: _showHideSearch,
125+
icon: Icon(ZetaIcons.search_round),
126+
)
127+
],
128+
searchController: _searchController,
129+
onSearch: (text) => debugPrint('search text: $text'),
130+
onSearchMicrophoneIconPressed: () async {
131+
var sampleTexts = [
132+
'This is a sample text',
133+
'Another sample',
134+
'Speech recognition text',
135+
'Example'
136+
];
137+
138+
var generatedText = sampleTexts[Random().nextInt(sampleTexts.length)];
139+
140+
_searchController.text = generatedText;
141+
},
142+
),
143+
ZetaButton.primary(
144+
label: "Show/Hide Search",
145+
onPressed: _showHideSearch,
146+
)
147+
],
148+
),
149+
),
150+
151+
// Extended
152+
Padding(
153+
padding: const EdgeInsets.only(top: ZetaSpacing.x4),
154+
child: ZetaAppBar(
155+
type: ZetaAppBarType.extendedTitle,
156+
leading: IconButton(
157+
onPressed: () {},
158+
icon: Icon(Icons.menu),
159+
),
160+
title: Text("Large title"),
161+
actions: [
162+
IconButton(
163+
onPressed: () {},
164+
icon: Icon(Icons.language),
165+
),
166+
IconButton(
167+
onPressed: () {},
168+
icon: Icon(Icons.favorite),
169+
),
170+
IconButton(
171+
onPressed: () {},
172+
icon: Icon(ZetaIcons.more_vertical_round),
173+
)
174+
],
175+
),
176+
),
177+
],
178+
),
179+
),
180+
);
181+
}
182+
}

0 commit comments

Comments
 (0)