Skip to content

Commit

Permalink
feat: add account balance widget (#11)
Browse files Browse the repository at this point in the history
* move `SendPage` to app tabs

* update tests for new send tab

* update `outline` color in `lightColorScheme`

* add `accountBalance` localization

* add `AccountBalance` widget

* add test for `AccountBalance` widget
  • Loading branch information
ethan-tbd authored Jan 24, 2024
1 parent 63281e3 commit 13a2b3e
Show file tree
Hide file tree
Showing 9 changed files with 133 additions and 28 deletions.
6 changes: 6 additions & 0 deletions frontend/lib/features/app/app_tabs.dart
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_starter/features/account/account_page.dart';
import 'package:flutter_starter/features/home/home_page.dart';
import 'package:flutter_starter/features/send/send_page.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

class _TabItem {
Expand All @@ -25,6 +26,11 @@ class AppTabs extends HookConsumerWidget {
const Icon(Icons.home_outlined),
const HomePage(),
),
_TabItem(
'Send',
const Icon(Icons.attach_money),
const SendPage(),
),
_TabItem(
'Account',
const Icon(Icons.person_outlined),
Expand Down
57 changes: 57 additions & 0 deletions frontend/lib/features/home/account_balance.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_starter/l10n/app_localizations.dart';

class AccountBalance extends HookWidget {
const AccountBalance({super.key});

@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Theme.of(context).colorScheme.outline, width: 2.0),
borderRadius: BorderRadius.circular(24.0),
),
padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
Loc.of(context).accountBalance,
style: Theme.of(context).textTheme.labelMedium,
),
const SizedBox(height: 10),
Center(
child: Text(
'\$0.00',
style: Theme.of(context).textTheme.displayMedium?.copyWith(
fontWeight: FontWeight.bold,
),
),
),
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: FilledButton(
onPressed: () {}, child: Text(Loc.of(context).deposit)),
),
const SizedBox(
width: 20,
),
Expanded(
child: FilledButton(
onPressed: () {}, child: Text(Loc.of(context).withdraw)),
),
],
),
],
),
),
);
}
}
29 changes: 3 additions & 26 deletions frontend/lib/features/home/home_page.dart
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter_starter/features/send/send_page.dart';
import 'package:flutter_starter/features/home/account_balance.dart';
import 'package:flutter_starter/l10n/app_localizations.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

Expand All @@ -10,33 +10,10 @@ class HomePage extends HookConsumerWidget {
Widget build(BuildContext context, WidgetRef ref) {
return Scaffold(
appBar: AppBar(title: Text(Loc.of(context).home)),
body: Column(
body: const Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(height: 40),
Text(
'Balance: \$0.00 USD',
style: Theme.of(context).textTheme.titleLarge,
textAlign: TextAlign.center,
),
const Spacer(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
FilledButton(
onPressed: () {}, child: Text(Loc.of(context).deposit)),
FilledButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => const SendPage(),
));
},
child: Text(Loc.of(context).send)),
FilledButton(
onPressed: () {}, child: Text(Loc.of(context).withdraw)),
],
),
const SizedBox(height: 40),
AccountBalance(),
],
),
);
Expand Down
3 changes: 2 additions & 1 deletion frontend/lib/l10n/app_en.arb
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,6 @@
"done": "Done",
"deposit": "Deposit",
"send": "Send",
"withdraw": "Withdraw"
"withdraw": "Withdraw",
"accountBalance": "Account balance"
}
6 changes: 6 additions & 0 deletions frontend/lib/l10n/app_localizations.dart
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,12 @@ abstract class Loc {
/// In en, this message translates to:
/// **'Withdraw'**
String get withdraw;

/// No description provided for @accountBalance.
///
/// In en, this message translates to:
/// **'Account balance'**
String get accountBalance;
}

class _LocDelegate extends LocalizationsDelegate<Loc> {
Expand Down
3 changes: 3 additions & 0 deletions frontend/lib/l10n/app_localizations_en.dart
Original file line number Diff line number Diff line change
Expand Up @@ -33,4 +33,7 @@ class LocEn extends Loc {

@override
String get withdraw => 'Withdraw';

@override
String get accountBalance => 'Account balance';
}
3 changes: 2 additions & 1 deletion frontend/lib/shared/theme/color_scheme.dart
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,13 @@ const lightColorScheme = ColorScheme(
onSurface: Color(0xff000000),
surfaceVariant: Color(0xffFFE8DE),
onSurfaceVariant: Color(0xff212121),
outline: Color(0xff79747E),
outline: Color(0xff333333),
inverseSurface: Color(0xff313033),
onInverseSurface: Color(0xffFFEC19),
inversePrimary: Color(0xff000000),
shadow: Color(0xff000000),
surfaceTint: Color(0xffFFEC19),
outlineVariant: Color(0xff333333),
);

const darkColorScheme = ColorScheme(
Expand Down
11 changes: 11 additions & 0 deletions frontend/test/features/app/app_tabs_test.dart
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import 'package:flutter_starter/features/account/account_page.dart';
import 'package:flutter_starter/features/app/app_tabs.dart';
import 'package:flutter_starter/features/home/home_page.dart';
import 'package:flutter_starter/features/send/send_page.dart';
import 'package:flutter_test/flutter_test.dart';

import '../../helpers/widget_helpers.dart';
Expand All @@ -14,6 +15,16 @@ void main() {
expect(find.byType(HomePage), findsOneWidget);
});

testWidgets('should show SendPage when tapped', (WidgetTester tester) async {
await tester.pumpWidget(
WidgetHelpers.testableWidget(child: const AppTabs()),
);

await tester.tap(find.text('Send'));
await tester.pumpAndSettle();
expect(find.byType(SendPage), findsOneWidget);
});

testWidgets('should show AccountPage when tapped',
(WidgetTester tester) async {
await tester.pumpWidget(
Expand Down
43 changes: 43 additions & 0 deletions frontend/test/features/home/account_balance_test.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import 'package:flutter_starter/features/home/account_balance.dart';
import 'package:flutter_test/flutter_test.dart';

import '../../helpers/widget_helpers.dart';

void main() {
group('AccountBalance', () {
testWidgets('should show account balance', (widgetTester) async {
await widgetTester.pumpWidget(
WidgetHelpers.testableWidget(child: const AccountBalance()),
);

expect(find.text('Account balance'), findsOneWidget);
});

testWidgets('should show valid account balance amount',
(widgetTester) async {
await widgetTester.pumpWidget(
WidgetHelpers.testableWidget(child: const AccountBalance()),
);

final dollarAmountPattern = RegExp(r'\$[0-9]+\.[0-9]{2}$');

expect(find.textContaining(dollarAmountPattern), findsOneWidget);
});

testWidgets('should show deposit button', (tester) async {
await tester.pumpWidget(
WidgetHelpers.testableWidget(child: const AccountBalance()),
);

expect(find.text('Deposit'), findsOneWidget);
});

testWidgets('should show withdraw button', (tester) async {
await tester.pumpWidget(
WidgetHelpers.testableWidget(child: const AccountBalance()),
);

expect(find.text('Withdraw'), findsOneWidget);
});
});
}

0 comments on commit 13a2b3e

Please sign in to comment.