From 41d00c82a67450f2de2d0076e83387ba524d4321 Mon Sep 17 00:00:00 2001 From: bootloopmaster636 Date: Wed, 27 Sep 2023 15:54:43 +0700 Subject: [PATCH] fix: fix new ui --- lib/displayLayers/OverlayLayer.dart | 2 +- lib/displayLayers/TopLayer.dart | 102 +++++++++++++++++++++++----- test/widget_test.dart | 29 ++++++++ 3 files changed, 114 insertions(+), 19 deletions(-) create mode 100644 test/widget_test.dart diff --git a/lib/displayLayers/OverlayLayer.dart b/lib/displayLayers/OverlayLayer.dart index 325b933..55034b2 100644 --- a/lib/displayLayers/OverlayLayer.dart +++ b/lib/displayLayers/OverlayLayer.dart @@ -273,7 +273,7 @@ class AboutUs extends StatelessWidget { style: TextStyle(fontWeight: FontWeight.bold), ), const Text( - "Made with <3 by bootloopmaster636, Byonicku, and other contributors", + "Made with ❤️ by bootloopmaster636, Byonicku, and other contributors", textAlign: TextAlign.center, ), const SizedBox( diff --git a/lib/displayLayers/TopLayer.dart b/lib/displayLayers/TopLayer.dart index f5054fe..e634ca2 100644 --- a/lib/displayLayers/TopLayer.dart +++ b/lib/displayLayers/TopLayer.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_animate/flutter_animate.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; +import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:ugd_timer/main.dart'; class TopLayer extends ConsumerWidget { @@ -8,6 +9,7 @@ class TopLayer extends ConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { + final scaleFactor = ref.watch(displayStateProvider).displayFontScale; final displayStateWatcher = ref.watch(displayStateProvider); return Animate( effects: const [ @@ -15,15 +17,22 @@ class TopLayer extends ConsumerWidget { FadeEffect(duration: Duration(milliseconds: 450), curve: Curves.easeOutCubic, begin: 1.0, end: 0.6), ], target: (displayStateWatcher.settingsExpanded == true) ? 1 : 0, - child: const SizedBox( - child: Column( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - TopBar(), - TimerCard(), - InfoCard(), - ], - ), + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + const TopBar(), + SizedBox( + height: MediaQuery.of(context).size.height - 50 * scaleFactor, + child: const Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + TimerCard(), + InfoCard(), + ], + ), + ), + ], ), ); } @@ -90,7 +99,7 @@ class TimerCard extends ConsumerWidget { width: MediaQuery.of(context).size.width * 0.6 * scaleFactor, height: MediaQuery.of(context).size.height * 0.3 * scaleFactor, decoration: BoxDecoration( - color: Theme.of(context).colorScheme.background, + color: Theme.of(context).colorScheme.background.withOpacity(0.9), borderRadius: BorderRadius.circular(16), boxShadow: [ BoxShadow( @@ -105,10 +114,11 @@ class TimerCard extends ConsumerWidget { "${ref.watch(timerProvider).mainTimer.inHours.toString().padLeft(2, '0')}:" "${ref.watch(timerProvider).mainTimer.inMinutes.remainder(60).toString().padLeft(2, '0')}:" "${ref.watch(timerProvider).mainTimer.inSeconds.remainder(60).toString().padLeft(2, '0')}", - style: TextStyle( - fontSize: 116 * scaleFactor, + style: const TextStyle( + fontSize: 116, fontWeight: FontWeight.w600, ), + overflow: TextOverflow.ellipsis, ), ), ); @@ -120,12 +130,68 @@ class InfoCard extends ConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { - return Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Text("Pengumpulan pada pukul ${ref.watch(timerProvider).endAt.hour}:${ref.watch(timerProvider).endAt.minute}"), - ], + final scaleFactor = ref.watch(displayStateProvider).displayFontScale; + return Padding( + padding: const EdgeInsets.all(24.0), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Text( + "Pengumpulan pada pukul ${ref.watch(timerProvider).endAt.hour.toString().padLeft(2, '0')}:${ref.watch(timerProvider).endAt.minute. toString().padLeft(2, '0')}", + style: const TextStyle(fontSize: 28, fontWeight: FontWeight.w600), + ), + SizedBox(height: 56 * scaleFactor,), + Row( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Icon( + FontAwesomeIcons.personCircleQuestion, + size: 64 * scaleFactor, + color: Theme.of(context).colorScheme.onPrimaryContainer, + ), + SizedBox(width: 24 * scaleFactor,), + RichText( + text: TextSpan(text: "Dapat bertanya asisten setelah\n", + style: TextStyle(fontSize: 24 * scaleFactor, color: Theme.of(context).colorScheme.onTertiaryContainer), + children: [TextSpan( + text: "${ref.watch(timerProvider).assistTimer.inMinutes.toString().padLeft(2, '0')} menit " + "${ref.watch(timerProvider).assistTimer.inSeconds.remainder(60).toString().padLeft(2, '0')} detik", + style: TextStyle(fontSize: 32 * scaleFactor, fontWeight: FontWeight.bold, color: Theme.of(context).colorScheme.onSecondaryContainer), + ), + ], + ), + ), + Container( + padding: EdgeInsets.symmetric(horizontal: 40 * scaleFactor), + height: 72 * scaleFactor, + child: VerticalDivider( + color: Theme.of(context).colorScheme.onBackground, + thickness: 6, + ), + ), + Icon( + FontAwesomeIcons.anglesUp, + size: 64 * scaleFactor, + color: Theme.of(context).colorScheme.onPrimaryContainer, + ), + SizedBox(width: 12 * scaleFactor,), + RichText( + text: TextSpan(text: "Bonus harus dikumpul sebelum\n", + style: TextStyle(fontSize: 24 * scaleFactor, color: Theme.of(context).colorScheme.onTertiaryContainer), + children: [TextSpan( + text: "${ref.watch(timerProvider).assistTimer.inMinutes.toString().padLeft(2, '0')} menit " + "${ref.watch(timerProvider).assistTimer.inSeconds.remainder(60).toString().padLeft(2, '0')} detik", + style: TextStyle(fontSize: 32 * scaleFactor, fontWeight: FontWeight.bold, color: Theme.of(context).colorScheme.onSecondaryContainer), + ), + ], + ), + ) + ], + ), + ], + ), ); } } diff --git a/test/widget_test.dart b/test/widget_test.dart new file mode 100644 index 0000000..01ac5d8 --- /dev/null +++ b/test/widget_test.dart @@ -0,0 +1,29 @@ +// This is a basic Flutter widget test. +// +// To perform an interaction with a widget in your test, use the WidgetTester +// utility in the flutter_test package. For example, you can send tap and scroll +// gestures. You can also use WidgetTester to find child widgets in the widget +// tree, read text, and verify that the values of widget properties are correct. + +import 'package:flutter/material.dart'; +import 'package:flutter_test/flutter_test.dart'; + + +void main() { + testWidgets('Counter increments smoke test', (WidgetTester tester) async { + // Build our app and trigger a frame. + await tester.pumpWidget(const MyApp()); + + // Verify that our counter starts at 0. + expect(find.text('0'), findsOneWidget); + expect(find.text('1'), findsNothing); + + // Tap the '+' icon and trigger a frame. + await tester.tap(find.byIcon(Icons.add)); + await tester.pump(); + + // Verify that our counter has incremented. + expect(find.text('0'), findsNothing); + expect(find.text('1'), findsOneWidget); + }); +}