Skip to content

Commit

Permalink
Final UI cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
WinsDominoes committed Mar 4, 2024
1 parent 96e9c19 commit be22d5b
Show file tree
Hide file tree
Showing 8 changed files with 222 additions and 82 deletions.
1 change: 1 addition & 0 deletions lib/constants/info.dart
Original file line number Diff line number Diff line change
@@ -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";
40 changes: 35 additions & 5 deletions lib/main.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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(),
Expand All @@ -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,
Expand Down
51 changes: 32 additions & 19 deletions lib/pages/calendar.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
))
Expand All @@ -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(
Expand All @@ -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)),
],
),
Expand All @@ -120,6 +127,7 @@ class _CalendarScreenState extends State<CalendarScreen> {
],
)),
Card(
elevation: 4,
child: Padding(
padding: const EdgeInsets.all(16),
child: SizedBox(
Expand All @@ -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)),
],
)),
),
Expand Down
112 changes: 67 additions & 45 deletions lib/pages/day.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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),
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: <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,
Expand Down
19 changes: 17 additions & 2 deletions lib/pages/settings.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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),
Expand Down Expand Up @@ -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"),
Expand Down
12 changes: 8 additions & 4 deletions lib/widgets/dialogs/about.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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)),
],
),
)
Expand Down
Loading

0 comments on commit be22d5b

Please sign in to comment.