Final UI cleanup

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";

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(
+        navigationRailTheme: NavigationRailThemeData(
-            unselectedLabelTextStyle: TextStyle(fontSize: 13),
+          unselectedLabelTextStyle: TextStyle(
-            selectedLabelTextStyle: TextStyle(fontSize: 13)),
+              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<MyHomePage> {
     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<MyHomePage> {
         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,

lib/pages/calendar.dart

@@ -47,7 +47,7 @@ class _CalendarScreenState extends State<CalendarScreen> {
     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<CalendarScreen> {
                         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<CalendarScreen> {
                       children: <Widget>[
                         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<CalendarScreen> {
                             mainAxisSize: MainAxisSize.min,
                             crossAxisAlignment: CrossAxisAlignment.start,
                             children: [
-                              const Text("Full Format",
+                              Text("Full Format",
-                                  style: TextStyle(fontSize: 14)),
+                                  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(
+                                  style: TextStyle(
-                                      fontSize: 24,
+                                      fontSize:
+                                          textTheme.headlineMedium?.fontSize,
                                       fontWeight: FontWeight.bold)),
                               const SizedBox(height: 10),
-                              const Text("Days Format",
+                              Text("Days Format",
-                                  style: TextStyle(fontSize: 14)),
+                                  style: TextStyle(
+                                      fontSize:
+                                          textTheme.titleMedium?.fontSize)),
                               Text("$diffD days",
-                                  style: const TextStyle(
+                                  style: TextStyle(
-                                      fontSize: 24,
+                                      fontSize:
+                                          textTheme.headlineMedium?.fontSize,
                                       fontWeight: FontWeight.bold)),
                             ],
                           ),
@@ -120,6 +127,7 @@ class _CalendarScreenState extends State<CalendarScreen> {
                       ],
                     )),
                 Card(
+                  elevation: 4,
                   child: Padding(
                     padding: const EdgeInsets.all(16),
                     child: SizedBox(
@@ -128,19 +136,24 @@ class _CalendarScreenState extends State<CalendarScreen> {
                           mainAxisSize: MainAxisSize.min,
                           crossAxisAlignment: CrossAxisAlignment.start,
                           children: [
-                            const Text("Start Date",
+                            Text("Start Date",
-                                style: TextStyle(fontSize: 14)),
+                                style: TextStyle(
+                                    fontSize: textTheme.titleMedium?.fontSize)),
                             Text(
                               startDateString,
-                              style: const TextStyle(
+                              style: TextStyle(
-                                  fontSize: 22, fontWeight: FontWeight.bold),
+                                  fontSize: textTheme.headlineMedium?.fontSize,
+                                  fontWeight: FontWeight.bold),
                             ),
                             const SizedBox(height: 10),
-                            const Text("End Date",
+                            Text("End Date",
-                                style: TextStyle(fontSize: 14)),
+                                style: TextStyle(
+                                    fontSize: textTheme.titleMedium?.fontSize)),
                             Text(endDateString,
-                                style: const TextStyle(
+                                style: TextStyle(
-                                    fontSize: 22, fontWeight: FontWeight.bold)),
+                                    fontSize:
+                                        textTheme.headlineMedium?.fontSize,
+                                    fontWeight: FontWeight.bold)),
                           ],
                         )),
                   ),

lib/pages/day.dart

@@ -32,6 +32,8 @@ class _DayScreenState extends State<DayScreen> {
     }
 
     final pickedDate = _selectedDate ?? DateTime.now();
+    final textTheme = Theme.of(context).textTheme;
+
     // List<int> diffYMD = GregorianDate.differenceInYearsMonthsDays(DateTime.now(), pickedDate);
     int diffD = GregorianDate.differenceInDays(DateTime.now(), pickedDate);
     List<int> diffYMD = GregorianDate.differenceInYearsMonthsDays(diffD);
@@ -44,61 +46,81 @@ class _DayScreenState extends State<DayScreen> {
 
     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(
-              padding: EdgeInsets.all(30),
+              padding: const EdgeInsets.all(16),
               child: Center(
-                child: Text('Select the date by using the date picker button'),
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    const Icon(
+                      Icons.today_outlined,
+                      size: 150,
+                    ),
+                    Text('Days From Now',
+                        style: TextStyle(
+                            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(30),
+              padding: const EdgeInsets.all(16),
-              child: Center(
+              child: ListView(children: [
+                Container(
+                    alignment: Alignment.centerLeft,
+                    child: Row(
+                      children: <Widget>[
+                        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: [
-                    const Text("Dates",
-                        style: TextStyle(
-                            fontSize: 30, fontWeight: FontWeight.bold)),
-                    const Text("Chosen Date", style: TextStyle(fontSize: 14)),
                               Text(
-                      pickedDateString,
+                                "$pickedDateString is",
-                      style: const TextStyle(
-                          fontSize: 22, fontWeight: FontWeight.bold),
-                    ),
-                    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",
                                 style: TextStyle(
-                            fontSize: 30, fontWeight: FontWeight.bold)),
+                                    fontSize:
-                    Text(pickedDateString,
+                                        textTheme.headlineSmall?.fontSize),
-                        style: const TextStyle(fontSize: 14)),
+                              ),
                               Text(
                                   "${diffYMD[3]} days \n${diffYMD[2]} weeks \n${diffYMD[1]} months\n${diffYMD[0]} years",
-                        style: const TextStyle(
+                                  style: TextStyle(
-                            fontSize: 24, fontWeight: FontWeight.bold)),
+                                      fontSize:
-                    Text(period, style: const TextStyle(fontSize: 14)),
+                                          textTheme.headlineMedium?.fontSize,
-                    const SizedBox(
+                                      fontWeight: FontWeight.bold)),
-                      height: 20,
+                              const SizedBox(height: 10),
-                    ),
+                              Text("or in total of",
-                    const Text("Or in total is",
+                                  style: TextStyle(
-                        style: TextStyle(fontSize: 14)),
+                                      fontSize:
+                                          textTheme.titleMedium?.fontSize)),
                               Text("$diffD days $period",
-                        style: const TextStyle(
+                                  style: TextStyle(
-                            fontSize: 24, fontWeight: FontWeight.bold)),
+                                      fontSize:
+                                          textTheme.headlineMedium?.fontSize,
+                                      fontWeight: FontWeight.bold)),
                             ],
                           ),
-              )),
+                        ))),
+              ])),
       // This button is used to show the date range picker
       floatingActionButton: FloatingActionButton(
         onPressed: showDateDialog,

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: <Widget>[
+                    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"),

lib/widgets/dialogs/about.dart

@@ -3,6 +3,7 @@ import '../license.dart';
 import '../../constants/info.dart';
 
 Future<void> aboutDialogBuilder(BuildContext context) {
+  final textTheme = Theme.of(context).textTheme;
   return showDialog<void>(
     context: context,
     builder: (BuildContext context) {
@@ -14,14 +15,17 @@ Future<void> 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("Date Calculator",
-                Text("v$versionString", style: TextStyle(fontSize: 14)),
+                    style:
+                        TextStyle(fontSize: textTheme.headlineSmall?.fontSize)),
+                Text("v$versionString",
+                    style: TextStyle(fontSize: textTheme.bodyLarge?.fontSize)),
               ],
             ),
           )

lib/widgets/dialogs/community.dart

@@ -8,6 +8,7 @@ const telegramSVG = "assets/app_icons/external/Telegram.svg";
 
 Future<void> communityDialogBuilder(BuildContext context) {
   final colorMode = Theme.of(context).colorScheme.primary;
+  final textTheme = Theme.of(context).textTheme;
 
   return showDialog<void>(
     context: context,
@@ -31,8 +32,10 @@ Future<void> communityDialogBuilder(BuildContext context) {
                     height: 50,
                   ),
                 ),
-                const Expanded(
+                Expanded(
-                  child: Text('Discord', textAlign: TextAlign.center),
+                  child: Text('Discord',
+                      style: TextStyle(fontSize: textTheme.bodyLarge?.fontSize),
+                      textAlign: TextAlign.center),
                 ),
               ],
             ),
@@ -55,11 +58,11 @@ Future<void> 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<void> communityDialogBuilder(BuildContext context) {
                     height: 50,
                   ),
                 ),
-                const Expanded(
+                Expanded(
-                  child: Text('Telegram', textAlign: TextAlign.center),
+                  child: Text('Telegram',
+                      style: TextStyle(fontSize: textTheme.bodyLarge?.fontSize),
+                      textAlign: TextAlign.center),
                 ),
               ],
             ),

linux/net.winscloud.DateCalculator.appdata.xml

@@ -46,15 +46,65 @@
   </branding>
   <content_rating type="oars-1.0"/>
   <releases>
-    <release version="0.0.7" date="2024-03-03">
+    <release version="0.0.7" date="2024-03-04">
+      <description>
+        <ul>
+          <li>UI deisng overhaul</li>
+          <li>New navigation bar, removed slow animations</li>
+          <li>Modified "Calendar" to "Range"</li>
+          <li>Minor icon changes</li>
+          <li>Added source code and community links</li>
+          <li>Font modification: Following device's TextTheme</li>
+          <li>Removed unnecessary / unused libraries</li>
+        </ul>
+      </description>
     </release>
     <release version="0.0.6" date="2024-02-03">
+      <description>
+        <ul>
+          <li>Fixed touchscreen scrolling issues</li>
+        </ul>
+      </description>
     </release>
     <release version="0.0.5" date="2024-02-02">
+      <description>
+        <ul>
+          <li>Added ARM version</li>
+          <li>Added Settings page</li>
+          <li>Fallback for dynamic color is now blue</li>
+        </ul>
+      </description>
     </release>
     <release version="0.0.4" date="2024-02-02">
+      <description>
+        <ul>
+          <li>UI is now responsive</li>
+          <li>Day mode added</li>
+          <li>Added dynamic color support - following your accent color</li>
+        </ul>
+      </description>
     </release>
     <release version="0.0.3" date="2024-01-31">
+      <description>
+        <ul>
+          <li>Updated AppBar to Material You Look</li>
+        </ul>
+      </description>
+    </release>
+    <release version="0.0.2" date="2024-01-24">
+      <description>
+        <ul>
+          <li>Added dark mode</li>
+          <li>UI element following a static color</li>
+        </ul>
+      </description>
+    </release>
+    <release version="0.0.1" date="2024-01-22">
+      <description>
+        <ul>
+          <li>Initial Release</li>
+        </ul>
+      </description>
     </release>
   </releases>
 </component>