Final UI cleanup

This commit is contained in:
Win 2024-03-04 19:09:36 +07:00
parent 96e9c19147
commit be22d5bcf1
8 changed files with 225 additions and 85 deletions

View File

@ -1,2 +1,3 @@
const String versionString = "0.0.7"; const String versionString = "0.0.7";
const String iconPath = "assets/app_icons/net.winscloud.Datecalculator.svg"; const String iconPath = "assets/app_icons/net.winscloud.Datecalculator.svg";
const String iconPathPng = "assets/app_icons/icon.png";

View File

@ -39,19 +39,45 @@ class MyApp extends StatelessWidget {
brightness: Brightness.dark, brightness: Brightness.dark,
); );
} }
final textTheme = Theme.of(context).textTheme;
ThemeData lightTheme = ThemeData( ThemeData lightTheme = ThemeData(
colorScheme: lightColorScheme, colorScheme: lightColorScheme,
useMaterial3: true, 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( ThemeData darkTheme = ThemeData(
brightness: Brightness.dark, brightness: Brightness.dark,
colorScheme: darkColorScheme, colorScheme: darkColorScheme,
useMaterial3: true, 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( return MaterialApp(
@ -91,6 +117,8 @@ class _MyHomePageState extends State<MyHomePage> {
double screenWidth = MediaQuery.of(context).size.width; double screenWidth = MediaQuery.of(context).size.width;
bool extendedValue = true; bool extendedValue = true;
NavigationRailLabelType labelType = NavigationRailLabelType.none; NavigationRailLabelType labelType = NavigationRailLabelType.none;
final textTheme = Theme.of(context).textTheme;
Widget leading = const Visibility( Widget leading = const Visibility(
visible: false, visible: false,
child: SizedBox.shrink(), child: SizedBox.shrink(),
@ -107,9 +135,11 @@ class _MyHomePageState extends State<MyHomePage> {
child: Column( child: Column(
children: [ children: [
SvgPicture.asset(iconPath, semanticsLabel: 'Date Calculator Logo'), SvgPicture.asset(iconPath, semanticsLabel: 'Date Calculator Logo'),
const Text( Text(
"Date Calculator", "Date Calculator",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30.0), style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: textTheme.headlineLarge?.fontSize),
), ),
const SizedBox( const SizedBox(
height: 5, height: 5,

View File

@ -47,7 +47,7 @@ class _CalendarScreenState extends State<CalendarScreen> {
return Scaffold( return Scaffold(
body: _selectedDateRange == null body: _selectedDateRange == null
? Padding( ? Padding(
padding: EdgeInsets.all(16), padding: const EdgeInsets.all(16),
child: Center( child: Center(
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
@ -61,7 +61,7 @@ class _CalendarScreenState extends State<CalendarScreen> {
style: TextStyle( style: TextStyle(
fontSize: textTheme.displaySmall?.fontSize, fontSize: textTheme.displaySmall?.fontSize,
fontWeight: FontWeight.bold)), fontWeight: FontWeight.bold)),
Text('Select the date range', Text('Select a date range in the bottom right corner',
style: TextStyle( style: TextStyle(
fontSize: textTheme.bodyMedium?.fontSize, fontSize: textTheme.bodyMedium?.fontSize,
)) ))
@ -78,11 +78,12 @@ class _CalendarScreenState extends State<CalendarScreen> {
children: <Widget>[ children: <Widget>[
Text("Range", Text("Range",
style: TextStyle( style: TextStyle(
fontSize: textTheme.displaySmall?.fontSize, fontSize: textTheme.displayMedium?.fontSize,
fontWeight: FontWeight.bold)) fontWeight: FontWeight.bold))
], ],
)), )),
Card( Card(
elevation: 4,
child: Padding( child: Padding(
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(16),
child: SizedBox( child: SizedBox(
@ -91,19 +92,25 @@ class _CalendarScreenState extends State<CalendarScreen> {
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
const Text("Full Format", Text("Full Format",
style: TextStyle(fontSize: 14)), style: TextStyle(
fontSize:
textTheme.titleMedium?.fontSize)),
Text( Text(
"${diffYMD[3]} days \n${diffYMD[2]} weeks \n${diffYMD[1]} months\n${diffYMD[0]} years", "${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)), fontWeight: FontWeight.bold)),
const SizedBox(height: 10), const SizedBox(height: 10),
const Text("Days Format", Text("Days Format",
style: TextStyle(fontSize: 14)), style: TextStyle(
fontSize:
textTheme.titleMedium?.fontSize)),
Text("$diffD days", Text("$diffD days",
style: const TextStyle( style: TextStyle(
fontSize: 24, fontSize:
textTheme.headlineMedium?.fontSize,
fontWeight: FontWeight.bold)), fontWeight: FontWeight.bold)),
], ],
), ),
@ -120,6 +127,7 @@ class _CalendarScreenState extends State<CalendarScreen> {
], ],
)), )),
Card( Card(
elevation: 4,
child: Padding( child: Padding(
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(16),
child: SizedBox( child: SizedBox(
@ -128,19 +136,24 @@ class _CalendarScreenState extends State<CalendarScreen> {
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
const Text("Start Date", Text("Start Date",
style: TextStyle(fontSize: 14)), style: TextStyle(
fontSize: textTheme.titleMedium?.fontSize)),
Text( Text(
startDateString, startDateString,
style: const TextStyle( style: TextStyle(
fontSize: 22, fontWeight: FontWeight.bold), fontSize: textTheme.headlineMedium?.fontSize,
fontWeight: FontWeight.bold),
), ),
const SizedBox(height: 10), const SizedBox(height: 10),
const Text("End Date", Text("End Date",
style: TextStyle(fontSize: 14)), style: TextStyle(
fontSize: textTheme.titleMedium?.fontSize)),
Text(endDateString, Text(endDateString,
style: const TextStyle( style: TextStyle(
fontSize: 22, fontWeight: FontWeight.bold)), fontSize:
textTheme.headlineMedium?.fontSize,
fontWeight: FontWeight.bold)),
], ],
)), )),
), ),

View File

@ -32,6 +32,8 @@ class _DayScreenState extends State<DayScreen> {
} }
final pickedDate = _selectedDate ?? DateTime.now(); final pickedDate = _selectedDate ?? DateTime.now();
final textTheme = Theme.of(context).textTheme;
// List<int> diffYMD = GregorianDate.differenceInYearsMonthsDays(DateTime.now(), pickedDate); // List<int> diffYMD = GregorianDate.differenceInYearsMonthsDays(DateTime.now(), pickedDate);
int diffD = GregorianDate.differenceInDays(DateTime.now(), pickedDate); int diffD = GregorianDate.differenceInDays(DateTime.now(), pickedDate);
List<int> diffYMD = GregorianDate.differenceInYearsMonthsDays(diffD); List<int> diffYMD = GregorianDate.differenceInYearsMonthsDays(diffD);
@ -44,61 +46,81 @@ class _DayScreenState extends State<DayScreen> {
dynamic pickedDateString = dynamic pickedDateString =
DateFormat("EEEE, d MMM yyyy").format(pickedDate).toString(); DateFormat("EEEE, d MMM yyyy").format(pickedDate).toString();
dynamic todayString =
DateFormat("EEEE, d MMM yyyy").format(DateTime.now()).toString();
return Scaffold( return Scaffold(
body: _selectedDate == null body: _selectedDate == null
? const Padding( ? Padding(
padding: EdgeInsets.all(30), padding: const EdgeInsets.all(16),
child: Center( 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(
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( child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
const Text("Dates",
style: TextStyle(
fontSize: 30, fontWeight: FontWeight.bold)),
const Text("Chosen Date", style: TextStyle(fontSize: 14)),
Text( 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( style: TextStyle(
fontSize: 30, fontWeight: FontWeight.bold)), fontSize:
Text(pickedDateString, textTheme.headlineSmall?.fontSize),
style: const TextStyle(fontSize: 14)), ),
Text( Text(
"${diffYMD[3]} days \n${diffYMD[2]} weeks \n${diffYMD[1]} months\n${diffYMD[0]} years", "${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", 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 // This button is used to show the date range picker
floatingActionButton: FloatingActionButton( floatingActionButton: FloatingActionButton(
onPressed: showDateDialog, onPressed: showDateDialog,

View File

@ -20,12 +20,26 @@ class _Body extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final textTheme = Theme.of(context).textTheme;
return Scaffold( return Scaffold(
body: Column( body: Column(
children: [ 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( Expanded(
child: Padding( child: Padding(
padding: const EdgeInsets.all(16), padding: const EdgeInsets.only(bottom: 16, left: 16, right: 16),
child: ListView.separated( child: ListView.separated(
itemBuilder: (context, index) => const _ListItem(), itemBuilder: (context, index) => const _ListItem(),
separatorBuilder: (context, index) => const SizedBox( separatorBuilder: (context, index) => const SizedBox(
@ -49,7 +63,7 @@ class _ListItem extends StatelessWidget {
return Column( return Column(
children: [ children: [
Card( Card(
elevation: 4.0, elevation: 4,
shape: shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)), RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
margin: const EdgeInsets.all(8.0), margin: const EdgeInsets.all(8.0),
@ -98,6 +112,7 @@ class _ListItem extends StatelessWidget {
margin: const EdgeInsets.all(8.0), margin: const EdgeInsets.all(8.0),
child: InkWell( child: InkWell(
onTap: () => aboutDialogBuilder(context), onTap: () => aboutDialogBuilder(context),
borderRadius: const BorderRadius.all(Radius.circular(10.0)),
child: const ListTile( child: const ListTile(
leading: Icon(Icons.info_outlined), leading: Icon(Icons.info_outlined),
title: Text("About"), title: Text("About"),

View File

@ -3,6 +3,7 @@ import '../license.dart';
import '../../constants/info.dart'; import '../../constants/info.dart';
Future<void> aboutDialogBuilder(BuildContext context) { Future<void> aboutDialogBuilder(BuildContext context) {
final textTheme = Theme.of(context).textTheme;
return showDialog<void>( return showDialog<void>(
context: context, context: context,
builder: (BuildContext context) { builder: (BuildContext context) {
@ -14,14 +15,17 @@ Future<void> aboutDialogBuilder(BuildContext context) {
decoration: const BoxDecoration( decoration: const BoxDecoration(
image: DecorationImage( image: DecorationImage(
alignment: Alignment.centerLeft, alignment: Alignment.centerLeft,
image: ExactAssetImage('assets/app_icons/icon.png'))), image: ExactAssetImage(iconPathPng))),
), ),
Container( Container(
child: const Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ 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)),
], ],
), ),
) )

View File

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

View File

@ -46,15 +46,65 @@
</branding> </branding>
<content_rating type="oars-1.0"/> <content_rating type="oars-1.0"/>
<releases> <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>
<release version="0.0.6" date="2024-02-03"> <release version="0.0.6" date="2024-02-03">
<description>
<ul>
<li>Fixed touchscreen scrolling issues</li>
</ul>
</description>
</release> </release>
<release version="0.0.5" date="2024-02-02"> <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>
<release version="0.0.4" date="2024-02-02"> <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>
<release version="0.0.3" date="2024-01-31"> <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> </release>
</releases> </releases>
</component> </component>