More UI updates

This commit is contained in:
Win 2024-03-04 12:51:10 +07:00
parent aa2d8db85f
commit 96e9c19147
4 changed files with 68 additions and 32 deletions

View File

@ -49,6 +49,9 @@ class MyApp extends StatelessWidget {
brightness: Brightness.dark, brightness: Brightness.dark,
colorScheme: darkColorScheme, colorScheme: darkColorScheme,
useMaterial3: true, useMaterial3: true,
navigationRailTheme: const NavigationRailThemeData(
unselectedLabelTextStyle: TextStyle(fontSize: 13),
selectedLabelTextStyle: TextStyle(fontSize: 13)),
); );
return MaterialApp( return MaterialApp(
@ -130,13 +133,13 @@ class _MyHomePageState extends State<MyHomePage> {
selectedIndex: _selectedTab, selectedIndex: _selectedTab,
destinations: const <Widget>[ destinations: const <Widget>[
NavigationDestination( NavigationDestination(
icon: Icon(Icons.calendar_month_outlined), icon: Icon(Icons.date_range_outlined),
selectedIcon: Icon(Icons.calendar_month), selectedIcon: Icon(Icons.date_range),
label: 'Calendar', label: 'Range',
), ),
NavigationDestination( NavigationDestination(
icon: Icon(Icons.calendar_today_outlined), icon: Icon(Icons.today_outlined),
selectedIcon: Icon(Icons.calendar_today), selectedIcon: Icon(Icons.today),
label: 'Day', label: 'Day',
), ),
NavigationDestination( NavigationDestination(
@ -162,13 +165,13 @@ class _MyHomePageState extends State<MyHomePage> {
extended: extendedValue, extended: extendedValue,
destinations: const [ destinations: const [
NavigationRailDestination( NavigationRailDestination(
icon: Icon(Icons.calendar_month_outlined), icon: Icon(Icons.date_range_outlined),
selectedIcon: Icon(Icons.calendar_month), selectedIcon: Icon(Icons.date_range),
label: Text('Calendar'), label: Text('Range'),
), ),
NavigationRailDestination( NavigationRailDestination(
icon: Icon(Icons.calendar_today_outlined), icon: Icon(Icons.today_outlined),
selectedIcon: Icon(Icons.calendar_today), selectedIcon: Icon(Icons.today),
label: Text('Day'), label: Text('Day'),
), ),
NavigationRailDestination( NavigationRailDestination(

View File

@ -33,6 +33,7 @@ class _CalendarScreenState extends State<CalendarScreen> {
final startDate = _selectedDateRange?.start ?? DateTime(2020, 1, 1); final startDate = _selectedDateRange?.start ?? DateTime(2020, 1, 1);
final endDate = _selectedDateRange?.end ?? DateTime(2022, 1, 1); final endDate = _selectedDateRange?.end ?? DateTime(2022, 1, 1);
final textTheme = Theme.of(context).textTheme;
int diffD = GregorianDate.differenceInDays(startDate, endDate); int diffD = GregorianDate.differenceInDays(startDate, endDate);
@ -45,16 +46,42 @@ class _CalendarScreenState extends State<CalendarScreen> {
return Scaffold( return Scaffold(
body: _selectedDateRange == null body: _selectedDateRange == null
? const Padding( ? Padding(
padding: EdgeInsets.all(16), padding: EdgeInsets.all(16),
child: Center( child: Center(
child: child: Column(
Text('Select the date range by using the calendar button'), mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Icon(
Icons.date_range_outlined,
size: 150,
),
Text('Date Range',
style: TextStyle(
fontSize: textTheme.displaySmall?.fontSize,
fontWeight: FontWeight.bold)),
Text('Select the date range',
style: TextStyle(
fontSize: textTheme.bodyMedium?.fontSize,
))
],
),
), ),
) )
: Padding( : Padding(
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(16),
child: Column(children: [ child: ListView(children: [
Container(
alignment: Alignment.centerLeft,
child: Row(
children: <Widget>[
Text("Range",
style: TextStyle(
fontSize: textTheme.displaySmall?.fontSize,
fontWeight: FontWeight.bold))
],
)),
Card( Card(
child: Padding( child: Padding(
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(16),
@ -64,11 +91,7 @@ class _CalendarScreenState extends State<CalendarScreen> {
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
const Text("Difference", const Text("Full Format",
style: TextStyle(
fontSize: 40,
)),
const Text("Date Range",
style: TextStyle(fontSize: 14)), style: 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",
@ -76,7 +99,7 @@ class _CalendarScreenState extends State<CalendarScreen> {
fontSize: 24, fontSize: 24,
fontWeight: FontWeight.bold)), fontWeight: FontWeight.bold)),
const SizedBox(height: 10), const SizedBox(height: 10),
const Text("Date Range in days", const Text("Days Format",
style: TextStyle(fontSize: 14)), style: TextStyle(fontSize: 14)),
Text("$diffD days", Text("$diffD days",
style: const TextStyle( style: const TextStyle(
@ -86,6 +109,16 @@ class _CalendarScreenState extends State<CalendarScreen> {
), ),
))), ))),
const SizedBox(height: 16), const SizedBox(height: 16),
Container(
alignment: Alignment.centerLeft,
child: Row(
children: <Widget>[
Text("Dates",
style: TextStyle(
fontSize: textTheme.displaySmall?.fontSize,
fontWeight: FontWeight.bold))
],
)),
Card( Card(
child: Padding( child: Padding(
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(16),
@ -95,10 +128,8 @@ class _CalendarScreenState extends State<CalendarScreen> {
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
const Text("Dates", style: TextStyle(fontSize: 40)),
const Text("Start Date", const Text("Start Date",
style: TextStyle(fontSize: 14)), style: TextStyle(fontSize: 14)),
const SizedBox(height: 5),
Text( Text(
startDateString, startDateString,
style: const TextStyle( style: const TextStyle(
@ -107,7 +138,6 @@ class _CalendarScreenState extends State<CalendarScreen> {
const SizedBox(height: 10), const SizedBox(height: 10),
const Text("End Date", const Text("End Date",
style: TextStyle(fontSize: 14)), style: TextStyle(fontSize: 14)),
const SizedBox(height: 5),
Text(endDateString, Text(endDateString,
style: const TextStyle( style: const TextStyle(
fontSize: 22, fontWeight: FontWeight.bold)), fontSize: 22, fontWeight: FontWeight.bold)),
@ -119,7 +149,7 @@ class _CalendarScreenState extends State<CalendarScreen> {
// 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: showRangeDialog, onPressed: showRangeDialog,
child: const Icon(Icons.date_range), child: const Icon(Icons.edit_calendar),
), ),
); );
} }

View File

@ -102,7 +102,7 @@ class _DayScreenState extends State<DayScreen> {
// 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,
child: const Icon(Icons.today), child: const Icon(Icons.border_color_outlined),
), ),
); );
} }

View File

@ -7,6 +7,8 @@ const matrixSVG = "assets/app_icons/external/Matrix.svg";
const telegramSVG = "assets/app_icons/external/Telegram.svg"; 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;
return showDialog<void>( return showDialog<void>(
context: context, context: context,
builder: (BuildContext context) { builder: (BuildContext context) {
@ -24,8 +26,7 @@ Future<void> communityDialogBuilder(BuildContext context) {
child: SvgPicture.asset( child: SvgPicture.asset(
discordSVG, discordSVG,
semanticsLabel: 'Discord Logo', semanticsLabel: 'Discord Logo',
colorFilter: colorFilter: ColorFilter.mode(colorMode, BlendMode.srcIn),
const ColorFilter.mode(Colors.white, BlendMode.srcIn),
width: 50, width: 50,
height: 50, height: 50,
), ),
@ -49,14 +50,17 @@ Future<void> communityDialogBuilder(BuildContext context) {
child: SvgPicture.asset( child: SvgPicture.asset(
matrixSVG, matrixSVG,
semanticsLabel: 'Matrix Logo', semanticsLabel: 'Matrix Logo',
colorFilter: colorFilter: ColorFilter.mode(colorMode, BlendMode.srcIn),
const ColorFilter.mode(Colors.white, BlendMode.srcIn),
width: 50, width: 50,
height: 50, height: 50,
), ),
), ),
const Expanded( const Expanded(
child: Text('Matrix', textAlign: TextAlign.center), child: Text(
'Matrix',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20),
),
), ),
], ],
), ),
@ -72,8 +76,7 @@ Future<void> communityDialogBuilder(BuildContext context) {
child: SvgPicture.asset( child: SvgPicture.asset(
telegramSVG, telegramSVG,
semanticsLabel: 'Telegram Logo', semanticsLabel: 'Telegram Logo',
colorFilter: colorFilter: ColorFilter.mode(colorMode, BlendMode.srcIn),
const ColorFilter.mode(Colors.white, BlendMode.srcIn),
width: 50, width: 50,
height: 50, height: 50,
), ),