Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: UX-1090 - Add expansion option for TopAppBar #73

Merged
merged 3 commits into from
May 16, 2024
Merged

fix: UX-1090 - Add expansion option for TopAppBar #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
457f110
fix: UX-1090 - Add expansion option for TopAppBar
thelukewalton May 16, 2024
25a06af
align search bar
thelukewalton May 16, 2024
5a01824
remove magic numbers
thelukewalton May 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
248 changes: 163 additions & 85 deletions example/lib/pages/components/top_app_bar_example.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import 'dart:math';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:zeta_example/widgets.dart';
import 'package:zeta_flutter/zeta_flutter.dart';
Expand All @@ -14,30 +15,47 @@ class TopAppBarExample extends StatefulWidget {
}

class _TopAppBarExampleState extends State<TopAppBarExample> {
late final _searchController = AppBarSearchController();
final _searchControllerExtended = AppBarSearchController();
final _searchControllerRegular = AppBarSearchController();

void _showHideSearch() {
_searchController.isEnabled ? _searchController.closeSearch() : _searchController.startSearch();
void _showHideSearchExtended() {
_searchControllerExtended.isEnabled
? _searchControllerExtended.closeSearch()
: _searchControllerExtended.startSearch();
}

void _showHideSearchRegular() {
_searchControllerRegular.isEnabled
? _searchControllerRegular.closeSearch()
: _searchControllerRegular.startSearch();
}

@override
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),
fit: BoxFit.cover,
);
final colors = Zeta.of(context).colors;

return ExampleScaffold(
name: TopAppBarExample.name,
child: SingleChildScrollView(
child: Column(
children: [
// Default
Padding(
padding: const EdgeInsets.only(top: ZetaSpacing.x4),
child: ZetaTopAppBar(
child: ColoredBox(
color: colors.surfaceSecondary,
child: SingleChildScrollView(
child: Column(
children: [
Text('Default', style: ZetaTextStyles.titleLarge),
ZetaTopAppBar(
leading: IconButton(
onPressed: () {},
icon: Icon(Icons.menu_rounded),
),
title: Row(
children: [
ZetaAvatar(size: ZetaAvatarSize.xs),
ZetaAvatar(size: ZetaAvatarSize.xs, image: image),
Padding(
padding: const EdgeInsets.only(left: ZetaSpacing.s),
child: Text("Title"),
Expand All @@ -59,12 +77,8 @@ class _TopAppBarExampleState extends State<TopAppBarExample> {
)
],
),
),

// Centered
Padding(
padding: const EdgeInsets.only(top: ZetaSpacing.x4),
child: ZetaTopAppBar(
Text('Centered', style: ZetaTextStyles.titleLarge),
ZetaTopAppBar(
type: ZetaTopAppBarType.centeredTitle,
leading: IconButton(
onPressed: () {},
Expand All @@ -78,12 +92,8 @@ class _TopAppBarExampleState extends State<TopAppBarExample> {
),
],
),
),

// Contextual
Padding(
padding: const EdgeInsets.only(top: ZetaSpacing.x4),
child: ZetaTopAppBar(
Text('Contextual', style: ZetaTextStyles.titleLarge),
ZetaTopAppBar(
leading: IconButton(
onPressed: () {},
icon: Icon(ZetaIcons.close_round),
Expand All @@ -108,75 +118,143 @@ class _TopAppBarExampleState extends State<TopAppBarExample> {
),
],
),
),

// Search
Padding(
padding: const EdgeInsets.only(top: ZetaSpacing.x4),
child: Column(
children: [
ZetaTopAppBar(
type: ZetaTopAppBarType.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: ZetaTopAppBar(
type: ZetaTopAppBarType.extendedTitle,
leading: IconButton(
onPressed: () {},
icon: Icon(Icons.menu),
),
title: Text("Large title"),
Text('Search', style: ZetaTextStyles.titleLarge),
ZetaTopAppBar(
type: ZetaTopAppBarType.centeredTitle,
leading: BackButton(),
title: Text("Title"),
actions: [
IconButton(
onPressed: () {},
icon: Icon(Icons.language),
),
IconButton(
onPressed: () {},
icon: Icon(Icons.favorite),
),
IconButton(
onPressed: () {},
icon: Icon(ZetaIcons.more_vertical_round),
onPressed: _showHideSearchRegular,
icon: Icon(ZetaIcons.search_round),
)
],
searchController: _searchControllerRegular,
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)];

_searchControllerRegular.text = generatedText;
},
),
Text('Extended', style: ZetaTextStyles.titleLarge),
SizedBox(
width: 800,
height: 200,
child: CustomScrollView(
slivers: [
ZetaTopAppBar.extended(
leading: IconButton(
onPressed: () {},
icon: Icon(Icons.menu_rounded),
),
title: Row(
children: [
ZetaAvatar(size: ZetaAvatarSize.xs, image: image),
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),
)
],
),
SliverToBoxAdapter(
child: Container(
width: 800,
height: 800,
color: Zeta.of(context).colors.surfaceSecondary,
child: CustomPaint(
painter: Painter(colors: colors),
size: Size(800, 800),
),
),
),
],
),
),
Text('Extended Search', style: ZetaTextStyles.titleLarge),
SizedBox(
width: 800,
height: 200,
child: CustomScrollView(
slivers: [
ZetaTopAppBar.extended(
leading: BackButton(),
title: Text("Title"),
actions: [
IconButton(
onPressed: _showHideSearchExtended,
icon: Icon(ZetaIcons.search_round),
)
],
searchController: _searchControllerExtended,
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)];
_searchControllerExtended.text = generatedText;
},
),
SliverToBoxAdapter(
child: Container(
width: 800,
height: 800,
color: Zeta.of(context).colors.surfaceSecondary,
child: CustomPaint(
painter: Painter(colors: colors),
size: Size(800, 800),
),
),
),
],
),
),
),
],
].gap(20),
),
),
),
);
}
}

class Painter extends CustomPainter {
final ZetaColors colors;

Painter({super.repaint, required this.colors});

@override
void paint(Canvas canvas, Size size) {
for (double i = -760; i < 760; i += 50) {
var p1 = Offset(i, -10);
var p2 = Offset(800 + i, 810);
var paint = Paint()
..color = colors.primary
..strokeWidth = ZetaSpacing.x1;
canvas.drawLine(p1, p2, paint);
}
}

@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => oldDelegate != this;
}
1 change: 1 addition & 0 deletions example/widgetbook/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ class HotReload extends StatelessWidget {
useCases: [
WidgetbookUseCase(name: 'Default', builder: (context) => defaultTopAppBarUseCase(context)),
WidgetbookUseCase(name: 'Search', builder: (context) => searchTopAppBarUseCase(context)),
WidgetbookUseCase(name: 'Extended', builder: (context) => extendedTopAppBarUseCase(context)),
],
),
WidgetbookComponent(
Expand Down
Loading
Loading