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 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,
);
}
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<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,

View File

@ -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",
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<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",
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)),
],
)),
),

View File

@ -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: EdgeInsets.all(30),
? Padding(
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),
child: Center(
padding: const EdgeInsets.all(16),
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,
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",
"$pickedDateString is",
style: TextStyle(
fontSize: 30, fontWeight: FontWeight.bold)),
Text(pickedDateString,
style: const TextStyle(fontSize: 14)),
fontSize:
textTheme.headlineSmall?.fontSize),
),
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)),
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: const TextStyle(
fontSize: 24, fontWeight: FontWeight.bold)),
style: TextStyle(
fontSize:
textTheme.headlineMedium?.fontSize,
fontWeight: FontWeight.bold)),
],
),
)),
))),
])),
// This button is used to show the date range picker
floatingActionButton: FloatingActionButton(
onPressed: showDateDialog,

View File

@ -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"),

View File

@ -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("v$versionString", style: TextStyle(fontSize: 14)),
Text("Date Calculator",
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) {
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(
child: Text('Discord', textAlign: TextAlign.center),
Expanded(
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(
child: Text('Telegram', textAlign: TextAlign.center),
Expanded(
child: Text('Telegram',
style: TextStyle(fontSize: textTheme.bodyLarge?.fontSize),
textAlign: TextAlign.center),
),
],
),

View File

@ -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>