More UI updates
This commit is contained in:
parent
aa2d8db85f
commit
96e9c19147
|
@ -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(
|
||||||
|
|
|
@ -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),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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,
|
||||||
),
|
),
|
||||||
|
|
Loading…
Reference in New Issue