Final UI cleanup
This commit is contained in:
parent
96e9c19147
commit
be22d5bcf1
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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)),
|
||||
],
|
||||
)),
|
||||
),
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
child: Column(
|
||||
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",
|
||||
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)),
|
||||
],
|
||||
),
|
||||
)),
|
||||
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: [
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -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"),
|
||||
|
|
|
|||
|
|
@ -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)),
|
||||
],
|
||||
),
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue