Skip to content
This repository has been archived by the owner on Jan 9, 2024. It is now read-only.

feat: adding hover to sources navigation arrows #71

Merged
merged 1 commit into from
Dec 7, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
40 changes: 32 additions & 8 deletions lib/home/widgets/sources_carousel_view.dart
Original file line number Diff line number Diff line change
Expand Up @@ -371,10 +371,12 @@ class _NavigationButtons extends StatelessWidget {
GoPreviousButton(
onBackPressed: onBackPressed,
),
const SizedBox(width: 4),
Text(
counter,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(color: color),
),
const SizedBox(width: 4),
GoNextButton(
onNextPressed: onNextPressed,
),
Expand All @@ -392,7 +394,7 @@ class GoPreviousButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
const color = VertexColors.white;
return _NavigationButton(
return NavigationButton(
icon: vertexIcons.arrowBack.image(color: color),
onTap: onBackPressed,
);
Expand All @@ -408,31 +410,53 @@ class GoNextButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
const color = VertexColors.white;
return _NavigationButton(
return NavigationButton(
icon: vertexIcons.arrowForward.image(color: color),
onTap: onNextPressed,
);
}
}

class _NavigationButton extends StatelessWidget {
const _NavigationButton({
class NavigationButton extends StatefulWidget {
@visibleForTesting
const NavigationButton({
required this.icon,
required this.onTap,
super.key,
});

final Widget icon;
final VoidCallback onTap;

@override
State<NavigationButton> createState() => _NavigationButtonState();
}

class _NavigationButtonState extends State<NavigationButton> {
var _isHovering = false;

@override
Widget build(BuildContext context) {
return InkWell(
onTap: onTap,
onHover: (bool hover) {
setState(() {
_isHovering = hover;
});
},
onTap: widget.onTap,
child: SizedBox.square(
dimension: 48,
child: Padding(
padding: const EdgeInsets.all(12),
child: icon,
child: DecoratedBox(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24),
color: _isHovering
? VertexColors.white.withOpacity(.1)
: Colors.transparent,
),
child: Padding(
padding: const EdgeInsets.all(12),
child: widget.icon,
),
),
),
);
Expand Down
57 changes: 57 additions & 0 deletions test/home/widgets/sources_carousel_view_test.dart
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:api_client/api_client.dart';
import 'package:app_ui/app_ui.dart';
import 'package:bloc_test/bloc_test.dart';
import 'package:dash_ai_search/home/home.dart';
import 'package:flutter/material.dart';
Expand Down Expand Up @@ -257,4 +258,60 @@ void main() {
},
);
});

group('NavigationButton', () {
testWidgets('renders', (tester) async {
await tester.pumpApp(
NavigationButton(
icon: Icon(Icons.arrow_back_ios),
onTap: () {},
),
);

expect(find.byType(InkWell), findsOneWidget);
});

testWidgets('renders', (tester) async {
await tester.pumpApp(
NavigationButton(
icon: Icon(Icons.arrow_back_ios),
onTap: () {},
),
);

expect(find.byType(InkWell), findsOneWidget);
});

testWidgets('adds the hover circle when hovered', (tester) async {
await tester.pumpApp(
NavigationButton(
icon: Icon(Icons.arrow_back_ios),
onTap: () {},
),
);

var decoratedBox = tester.widget<DecoratedBox>(
find.byType(DecoratedBox),
);

expect(
(decoratedBox.decoration as BoxDecoration).color,
Colors.transparent,
);

final inkWell = tester.widget<InkWell>(find.byType(InkWell));
inkWell.onHover?.call(true);

await tester.pump();

decoratedBox = tester.widget<DecoratedBox>(
find.byType(DecoratedBox),
);

expect(
(decoratedBox.decoration as BoxDecoration).color,
VertexColors.white.withOpacity(0.1),
);
});
});
}