Skip to content

Commit

Permalink
fix: UX-1090 - Add expansion option for TopAppBar (#73)
Browse files Browse the repository at this point in the history
  • Loading branch information
@thelukewalton
thelukewalton committed May 16, 2024
1 parent a1496f2 commit 117af93
Show file tree
Hide file tree
Showing 9 changed files with 809 additions and 511 deletions.
248 changes: 163 additions & 85 deletions example/lib/pages/components/top_app_bar_example.dart
View file
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
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

0 comments on commit 117af93

Please sign in to comment.