Improve dashboard design

Author: CodeDoctorDE

app/lib/pages/dashboard/events.dart

@@ -11,14 +11,14 @@ import 'package:flow_api/models/model.dart';
 import '../../cubits/flow.dart';
 import '../../widgets/markdown_field.dart';
 
-class DashboardEventsCard extends StatefulWidget {
-  const DashboardEventsCard({super.key});
+class DashboardEventsView extends StatefulWidget {
+  const DashboardEventsView({super.key});
 
   @override
-  State<DashboardEventsCard> createState() => _DashboardEventsCardState();
+  State<DashboardEventsView> createState() => _DashboardEventsViewState();
 }
 
-class _DashboardEventsCardState extends State<DashboardEventsCard> {
+class _DashboardEventsViewState extends State<DashboardEventsView> {
   Future<List<SourcedConnectedModel<CalendarItem, Event?>>> _getAppointments(
       BuildContext context) async {
     final sources = context.read<FlowCubit>().getCurrentServicesMap();
@@ -33,7 +33,7 @@ class _DashboardEventsCardState extends State<DashboardEventsCard> {
   }
 
   @override
-  void didUpdateWidget(covariant DashboardEventsCard oldWidget) {
+  void didUpdateWidget(covariant DashboardEventsView oldWidget) {
     super.didUpdateWidget(oldWidget);
     setState(() {});
   }

app/lib/pages/dashboard/notes.dart

@@ -8,14 +8,14 @@ import 'package:flow_api/models/note/model.dart';
 
 import '../../cubits/flow.dart';
 
-class DashboardNotesCard extends StatefulWidget {
-  const DashboardNotesCard({super.key});
+class DashboardNotesView extends StatefulWidget {
+  const DashboardNotesView({super.key});
 
   @override
-  State<DashboardNotesCard> createState() => _DashboardNotesCardState();
+  State<DashboardNotesView> createState() => _DashboardNotesViewState();
 }
 
-class _DashboardNotesCardState extends State<DashboardNotesCard> {
+class _DashboardNotesViewState extends State<DashboardNotesView> {
   Future<List<(Note, String)>> _getNotes(BuildContext context) async {
     final sources = context.read<FlowCubit>().getCurrentServicesMap();
     final notes = <(Note, String)>[];
@@ -28,7 +28,7 @@ class _DashboardNotesCardState extends State<DashboardNotesCard> {
   }
 
   @override
-  void didUpdateWidget(covariant DashboardNotesCard oldWidget) {
+  void didUpdateWidget(covariant DashboardNotesView oldWidget) {
     super.didUpdateWidget(oldWidget);
     setState(() {});
   }

app/lib/pages/dashboard/page.dart

@@ -3,6 +3,7 @@ import 'package:flow/widgets/clock.dart';
 import 'package:flow/widgets/navigation.dart';
 import 'package:flutter/material.dart';
 import 'package:flow/src/generated/i18n/app_localizations.dart';
+import 'package:material_leap/helpers.dart';
 
 import 'events.dart';
 
@@ -28,40 +29,56 @@ class _DashboardPageState extends State<DashboardPage> {
               children: [
                 Card(
                     child: Padding(
-                  padding: const EdgeInsets.all(8.0),
-                  child: ConstrainedBox(
-                    constraints: const BoxConstraints(
-                        minHeight: 300,
-                        minWidth: 300,
-                        maxWidth: 600,
-                        maxHeight: 600),
-                    child: const ClockView(),
+                  padding: const EdgeInsets.all(16),
+                  child: Column(
+                    children: [
+                      ConstrainedBox(
+                        constraints: const BoxConstraints(
+                            minHeight: 300,
+                            minWidth: 300,
+                            maxWidth: 600,
+                            maxHeight: 600),
+                        child: const ClockView(),
+                      ),
+                      const SizedBox(height: 16),
+                      Text(
+                        AppLocalizations.of(context).welcome,
+                        style: Theme.of(context).textTheme.headlineMedium,
+                        textAlign: TextAlign.center,
+                      ),
+                    ],
                   ),
                 )),
                 Card(
-                    child: Padding(
-                  padding: const EdgeInsets.all(16.0),
-                  child: Text(
-                    AppLocalizations.of(context).welcome,
-                    style: Theme.of(context).textTheme.titleLarge,
-                    textAlign: TextAlign.center,
+                  child: Padding(
+                    padding: const EdgeInsets.all(16),
+                    child: LayoutBuilder(
+                      builder: (context, constraints) {
+                        if (constraints.maxWidth >= LeapBreakpoints.medium) {
+                          return SizedBox(
+                            height: 250,
+                            child: Row(
+                              crossAxisAlignment: CrossAxisAlignment.stretch,
+                              spacing: 8,
+                              children: [
+                                Expanded(child: DashboardNotesView()),
+                                const VerticalDivider(),
+                                Expanded(child: DashboardEventsView()),
+                              ],
+                            ),
+                          );
+                        }
+                        return Column(
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          children: [
+                            DashboardNotesView(),
+                            const Divider(),
+                            DashboardEventsView(),
+                          ],
+                        );
+                      },
+                    ),
                   ),
-                )),
-                Wrap(
-                  alignment: WrapAlignment.center,
-                  children: [
-                    const DashboardNotesCard(),
-                    const DashboardEventsCard(),
-                  ]
-                      .map((e) => ConstrainedBox(
-                            constraints: const BoxConstraints(maxWidth: 500),
-                            child: Card(
-                                child: Padding(
-                              padding: const EdgeInsets.all(16.0),
-                              child: e,
-                            )),
-                          ))
-                      .toList(),
                 ),
               ],
             ),

app/lib/pages/settings/data.dart

@@ -5,7 +5,6 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flow/src/generated/i18n/app_localizations.dart';
 import 'package:material_leap/material_leap.dart';
-import 'package:package_info_plus/package_info_plus.dart';
 import 'package:phosphor_flutter/phosphor_flutter.dart';
 
 import '../../cubits/settings.dart';

metadata/en-US/changelogs/10.txt

@@ -1,4 +1,5 @@
 * Unify settings dialog with other linwood apps
+* Improve dashboard design
 * Use linking instead of creating inside details tab views
 * Fix calendar fetching not working correctly ([#86](https://github.com/LinwoodDev/Flow/issues/86))
 * Fix group list view not working correctly