From be22d5bcf11c65e79dd41f4be3b5ed89395db60e Mon Sep 17 00:00:00 2001 From: winsdominoes Date: Mon, 4 Mar 2024 19:09:36 +0700 Subject: [PATCH] Final UI cleanup --- lib/constants/info.dart | 1 + lib/main.dart | 40 ++++++- lib/pages/calendar.dart | 51 +++++--- lib/pages/day.dart | 112 +++++++++++------- lib/pages/settings.dart | 19 ++- lib/widgets/dialogs/about.dart | 12 +- lib/widgets/dialogs/community.dart | 17 ++- .../net.winscloud.DateCalculator.appdata.xml | 52 +++++++- 8 files changed, 222 insertions(+), 82 deletions(-) diff --git a/lib/constants/info.dart b/lib/constants/info.dart index 0c6f5f2..23e8a9f 100644 --- a/lib/constants/info.dart +++ b/lib/constants/info.dart @@ -1,2 +1,3 @@ const String versionString = "0.0.7"; const String iconPath = "assets/app_icons/net.winscloud.Datecalculator.svg"; +const String iconPathPng = "assets/app_icons/icon.png"; diff --git a/lib/main.dart b/lib/main.dart index 924946c..8843384 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -39,19 +39,45 @@ class MyApp extends StatelessWidget { brightness: Brightness.dark, ); } + final textTheme = Theme.of(context).textTheme; ThemeData lightTheme = ThemeData( colorScheme: lightColorScheme, useMaterial3: true, + navigationRailTheme: NavigationRailThemeData( + unselectedLabelTextStyle: TextStyle( + fontSize: textTheme.labelLarge?.fontSize, color: Colors.black), + unselectedIconTheme: const IconThemeData( + color: Colors.black, + ), + selectedLabelTextStyle: TextStyle( + fontSize: textTheme.labelLarge?.fontSize, + color: Colors.black, + ), + selectedIconTheme: const IconThemeData( + color: Colors.black, + ), + ), ); ThemeData darkTheme = ThemeData( brightness: Brightness.dark, colorScheme: darkColorScheme, useMaterial3: true, - navigationRailTheme: const NavigationRailThemeData( - unselectedLabelTextStyle: TextStyle(fontSize: 13), - selectedLabelTextStyle: TextStyle(fontSize: 13)), + navigationRailTheme: NavigationRailThemeData( + unselectedLabelTextStyle: TextStyle( + fontSize: textTheme.labelLarge?.fontSize, color: Colors.white), + unselectedIconTheme: const IconThemeData( + color: Colors.white, + ), + selectedLabelTextStyle: TextStyle( + fontSize: textTheme.labelLarge?.fontSize, + color: Colors.white, + ), + selectedIconTheme: const IconThemeData( + color: Colors.white, + ), + ), ); return MaterialApp( @@ -91,6 +117,8 @@ class _MyHomePageState extends State { double screenWidth = MediaQuery.of(context).size.width; bool extendedValue = true; NavigationRailLabelType labelType = NavigationRailLabelType.none; + final textTheme = Theme.of(context).textTheme; + Widget leading = const Visibility( visible: false, child: SizedBox.shrink(), @@ -107,9 +135,11 @@ class _MyHomePageState extends State { child: Column( children: [ SvgPicture.asset(iconPath, semanticsLabel: 'Date Calculator Logo'), - const Text( + Text( "Date Calculator", - style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30.0), + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: textTheme.headlineLarge?.fontSize), ), const SizedBox( height: 5, diff --git a/lib/pages/calendar.dart b/lib/pages/calendar.dart index f8f5ff6..b31b996 100644 --- a/lib/pages/calendar.dart +++ b/lib/pages/calendar.dart @@ -47,7 +47,7 @@ class _CalendarScreenState extends State { return Scaffold( body: _selectedDateRange == null ? Padding( - padding: EdgeInsets.all(16), + padding: const EdgeInsets.all(16), child: Center( child: Column( mainAxisSize: MainAxisSize.min, @@ -61,7 +61,7 @@ class _CalendarScreenState extends State { style: TextStyle( fontSize: textTheme.displaySmall?.fontSize, fontWeight: FontWeight.bold)), - Text('Select the date range', + Text('Select a date range in the bottom right corner', style: TextStyle( fontSize: textTheme.bodyMedium?.fontSize, )) @@ -78,11 +78,12 @@ class _CalendarScreenState extends State { children: [ Text("Range", style: TextStyle( - fontSize: textTheme.displaySmall?.fontSize, + fontSize: textTheme.displayMedium?.fontSize, fontWeight: FontWeight.bold)) ], )), Card( + elevation: 4, child: Padding( padding: const EdgeInsets.all(16), child: SizedBox( @@ -91,19 +92,25 @@ class _CalendarScreenState extends State { mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ - const Text("Full Format", - style: TextStyle(fontSize: 14)), + Text("Full Format", + style: TextStyle( + fontSize: + textTheme.titleMedium?.fontSize)), Text( "${diffYMD[3]} days \n${diffYMD[2]} weeks \n${diffYMD[1]} months\n${diffYMD[0]} years", - style: const TextStyle( - fontSize: 24, + style: TextStyle( + fontSize: + textTheme.headlineMedium?.fontSize, fontWeight: FontWeight.bold)), const SizedBox(height: 10), - const Text("Days Format", - style: TextStyle(fontSize: 14)), + Text("Days Format", + style: TextStyle( + fontSize: + textTheme.titleMedium?.fontSize)), Text("$diffD days", - style: const TextStyle( - fontSize: 24, + style: TextStyle( + fontSize: + textTheme.headlineMedium?.fontSize, fontWeight: FontWeight.bold)), ], ), @@ -120,6 +127,7 @@ class _CalendarScreenState extends State { ], )), Card( + elevation: 4, child: Padding( padding: const EdgeInsets.all(16), child: SizedBox( @@ -128,19 +136,24 @@ class _CalendarScreenState extends State { mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ - const Text("Start Date", - style: TextStyle(fontSize: 14)), + Text("Start Date", + style: TextStyle( + fontSize: textTheme.titleMedium?.fontSize)), Text( startDateString, - style: const TextStyle( - fontSize: 22, fontWeight: FontWeight.bold), + style: TextStyle( + fontSize: textTheme.headlineMedium?.fontSize, + fontWeight: FontWeight.bold), ), const SizedBox(height: 10), - const Text("End Date", - style: TextStyle(fontSize: 14)), + Text("End Date", + style: TextStyle( + fontSize: textTheme.titleMedium?.fontSize)), Text(endDateString, - style: const TextStyle( - fontSize: 22, fontWeight: FontWeight.bold)), + style: TextStyle( + fontSize: + textTheme.headlineMedium?.fontSize, + fontWeight: FontWeight.bold)), ], )), ), diff --git a/lib/pages/day.dart b/lib/pages/day.dart index 1dcdced..b73f77e 100644 --- a/lib/pages/day.dart +++ b/lib/pages/day.dart @@ -32,6 +32,8 @@ class _DayScreenState extends State { } final pickedDate = _selectedDate ?? DateTime.now(); + final textTheme = Theme.of(context).textTheme; + // List diffYMD = GregorianDate.differenceInYearsMonthsDays(DateTime.now(), pickedDate); int diffD = GregorianDate.differenceInDays(DateTime.now(), pickedDate); List diffYMD = GregorianDate.differenceInYearsMonthsDays(diffD); @@ -44,61 +46,81 @@ class _DayScreenState extends State { dynamic pickedDateString = DateFormat("EEEE, d MMM yyyy").format(pickedDate).toString(); - dynamic todayString = - DateFormat("EEEE, d MMM yyyy").format(DateTime.now()).toString(); return Scaffold( body: _selectedDate == null - ? const Padding( - padding: EdgeInsets.all(30), - child: Center( - child: Text('Select the date by using the date picker button'), - ), - ) - : Padding( - padding: const EdgeInsets.all(30), + ? Padding( + padding: const EdgeInsets.all(16), child: Center( child: Column( - crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.center, children: [ - const Text("Dates", - style: TextStyle( - fontSize: 30, fontWeight: FontWeight.bold)), - const Text("Chosen Date", style: TextStyle(fontSize: 14)), - Text( - pickedDateString, - style: const TextStyle( - fontSize: 22, fontWeight: FontWeight.bold), + const Icon( + Icons.today_outlined, + size: 150, ), - const SizedBox(height: 5), - const Text("Today", style: TextStyle(fontSize: 14)), - Text( - todayString, - style: const TextStyle( - fontSize: 22, fontWeight: FontWeight.bold), - ), - const SizedBox(height: 20), - const Text("Difference", + Text('Days From Now', style: TextStyle( - fontSize: 30, fontWeight: FontWeight.bold)), - Text(pickedDateString, - style: const TextStyle(fontSize: 14)), - Text( - "${diffYMD[3]} days \n${diffYMD[2]} weeks \n${diffYMD[1]} months\n${diffYMD[0]} years", - style: const TextStyle( - fontSize: 24, fontWeight: FontWeight.bold)), - Text(period, style: const TextStyle(fontSize: 14)), - const SizedBox( - height: 20, - ), - const Text("Or in total is", - style: TextStyle(fontSize: 14)), - Text("$diffD days $period", - style: const TextStyle( - fontSize: 24, fontWeight: FontWeight.bold)), + fontSize: textTheme.displaySmall?.fontSize, + fontWeight: FontWeight.bold)), + Text('Select a date in the bottom right corner', + style: TextStyle( + fontSize: textTheme.bodyMedium?.fontSize, + )) ], ), - )), + ), + ) + : Padding( + padding: const EdgeInsets.all(16), + child: ListView(children: [ + Container( + alignment: Alignment.centerLeft, + child: Row( + children: [ + Text("Results", + style: TextStyle( + fontSize: textTheme.displayMedium?.fontSize, + fontWeight: FontWeight.bold)) + ], + )), + Card( + elevation: 4, + child: Padding( + padding: const EdgeInsets.all(16), + child: SizedBox( + width: double.infinity, + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "$pickedDateString is", + style: TextStyle( + fontSize: + textTheme.headlineSmall?.fontSize), + ), + Text( + "${diffYMD[3]} days \n${diffYMD[2]} weeks \n${diffYMD[1]} months\n${diffYMD[0]} years", + style: TextStyle( + fontSize: + textTheme.headlineMedium?.fontSize, + fontWeight: FontWeight.bold)), + const SizedBox(height: 10), + Text("or in total of", + style: TextStyle( + fontSize: + textTheme.titleMedium?.fontSize)), + Text("$diffD days $period", + style: TextStyle( + fontSize: + textTheme.headlineMedium?.fontSize, + fontWeight: FontWeight.bold)), + ], + ), + ))), + ])), // This button is used to show the date range picker floatingActionButton: FloatingActionButton( onPressed: showDateDialog, diff --git a/lib/pages/settings.dart b/lib/pages/settings.dart index e2f00c0..fae76c5 100644 --- a/lib/pages/settings.dart +++ b/lib/pages/settings.dart @@ -20,12 +20,26 @@ class _Body extends StatelessWidget { @override Widget build(BuildContext context) { + final textTheme = Theme.of(context).textTheme; return Scaffold( body: Column( children: [ + Padding( + padding: const EdgeInsets.only(top: 16, left: 16), + child: Container( + alignment: Alignment.centerLeft, + child: Row( + children: [ + Text("Settings", + style: TextStyle( + fontSize: textTheme.displayMedium?.fontSize, + fontWeight: FontWeight.bold)) + ], + )), + ), Expanded( child: Padding( - padding: const EdgeInsets.all(16), + padding: const EdgeInsets.only(bottom: 16, left: 16, right: 16), child: ListView.separated( itemBuilder: (context, index) => const _ListItem(), separatorBuilder: (context, index) => const SizedBox( @@ -49,7 +63,7 @@ class _ListItem extends StatelessWidget { return Column( children: [ Card( - elevation: 4.0, + elevation: 4, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)), margin: const EdgeInsets.all(8.0), @@ -98,6 +112,7 @@ class _ListItem extends StatelessWidget { margin: const EdgeInsets.all(8.0), child: InkWell( onTap: () => aboutDialogBuilder(context), + borderRadius: const BorderRadius.all(Radius.circular(10.0)), child: const ListTile( leading: Icon(Icons.info_outlined), title: Text("About"), diff --git a/lib/widgets/dialogs/about.dart b/lib/widgets/dialogs/about.dart index 4ad8d16..c2e2c20 100644 --- a/lib/widgets/dialogs/about.dart +++ b/lib/widgets/dialogs/about.dart @@ -3,6 +3,7 @@ import '../license.dart'; import '../../constants/info.dart'; Future aboutDialogBuilder(BuildContext context) { + final textTheme = Theme.of(context).textTheme; return showDialog( context: context, builder: (BuildContext context) { @@ -14,14 +15,17 @@ Future aboutDialogBuilder(BuildContext context) { decoration: const BoxDecoration( image: DecorationImage( alignment: Alignment.centerLeft, - image: ExactAssetImage('assets/app_icons/icon.png'))), + image: ExactAssetImage(iconPathPng))), ), Container( - child: const Column( + child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Text("Date Calculator"), - Text("v$versionString", style: TextStyle(fontSize: 14)), + Text("Date Calculator", + style: + TextStyle(fontSize: textTheme.headlineSmall?.fontSize)), + Text("v$versionString", + style: TextStyle(fontSize: textTheme.bodyLarge?.fontSize)), ], ), ) diff --git a/lib/widgets/dialogs/community.dart b/lib/widgets/dialogs/community.dart index 0c63fc4..605cba9 100644 --- a/lib/widgets/dialogs/community.dart +++ b/lib/widgets/dialogs/community.dart @@ -8,6 +8,7 @@ const telegramSVG = "assets/app_icons/external/Telegram.svg"; Future communityDialogBuilder(BuildContext context) { final colorMode = Theme.of(context).colorScheme.primary; + final textTheme = Theme.of(context).textTheme; return showDialog( context: context, @@ -31,8 +32,10 @@ Future communityDialogBuilder(BuildContext context) { height: 50, ), ), - const Expanded( - child: Text('Discord', textAlign: TextAlign.center), + Expanded( + child: Text('Discord', + style: TextStyle(fontSize: textTheme.bodyLarge?.fontSize), + textAlign: TextAlign.center), ), ], ), @@ -55,11 +58,11 @@ Future communityDialogBuilder(BuildContext context) { height: 50, ), ), - const Expanded( + Expanded( child: Text( 'Matrix', textAlign: TextAlign.center, - style: TextStyle(fontSize: 20), + style: TextStyle(fontSize: textTheme.bodyLarge?.fontSize), ), ), ], @@ -81,8 +84,10 @@ Future communityDialogBuilder(BuildContext context) { height: 50, ), ), - const Expanded( - child: Text('Telegram', textAlign: TextAlign.center), + Expanded( + child: Text('Telegram', + style: TextStyle(fontSize: textTheme.bodyLarge?.fontSize), + textAlign: TextAlign.center), ), ], ), diff --git a/linux/net.winscloud.DateCalculator.appdata.xml b/linux/net.winscloud.DateCalculator.appdata.xml index 1542336..2567e7d 100644 --- a/linux/net.winscloud.DateCalculator.appdata.xml +++ b/linux/net.winscloud.DateCalculator.appdata.xml @@ -46,15 +46,65 @@ - + + +
    +
  • UI deisng overhaul
    • +
  • New navigation bar, removed slow animations
    • +
  • Modified "Calendar" to "Range"
    • +
  • Minor icon changes
    • +
  • Added source code and community links
    • +
  • Font modification: Following device's TextTheme
    • +
  • Removed unnecessary / unused libraries
    • +
+ + +
    +
  • Fixed touchscreen scrolling issues
    • +
+ + +
    +
  • Added ARM version
    • +
  • Added Settings page
    • +
  • Fallback for dynamic color is now blue
    • +
+ + +
    +
  • UI is now responsive
    • +
  • Day mode added
    • +
  • Added dynamic color support - following your accent color
    • +
+ + +
    +
  • Updated AppBar to Material You Look
    • +
+ + + + +
    +
  • Added dark mode
    • +
  • UI element following a static color
    • +
+ + + + +
    +
  • Initial Release
    • +
+