Implemented New Screens in Dashboard Screen

Signed-off-by: Andreas Fahrecker <AndreasFahrecker@gmail.com>

lib/app.dart

@@ -1,10 +1,11 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
 import 'package:flutter_redux/flutter_redux.dart';
 import 'package:redux/redux.dart';
 import 'package:time_progress_tracker/models/app_state.dart';
-import 'package:time_progress_tracker/screens/progress_creation_screen.dart';
-import 'package:time_progress_tracker/screens/home_screen.dart';
-import 'package:time_progress_tracker/screens/progress_detail_screen.dart';
+import 'package:time_progress_tracker/screens/dashboard_screen.dart';
+import 'package:time_progress_tracker/utils/color_utils.dart';
 
 class TimeProgressTrackerApp extends StatelessWidget {
   static const String name = "Time Progress Tracker";
@@ -20,23 +21,11 @@ class TimeProgressTrackerApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return StoreProvider(
       store: store,
-      child: MaterialApp(
+      child: PlatformApp(
         title: name,
-        theme: ThemeData(
-          primarySwatch: Colors.indigo,
-          accentColor: Colors.indigoAccent,
-          brightness: Brightness.light,
-          visualDensity: VisualDensity.adaptivePlatformDensity,
-        ),
-        initialRoute: HomeScreen.routeName,
-        routes: {
-          HomeScreen.routeName: (BuildContext context) =>
-              HomeScreen(),
-          ProgressDetailScreen.routeName: (BuildContext context) =>
-              ProgressDetailScreen(),
-          ProgressCreationScreen.routeName: (BuildContext context) =>
-              ProgressCreationScreen(),
-        },
+        home: DashboardScreen(),
+        material: (_, __) => MaterialAppData(theme: materialThemeData),
+        cupertino: (_, __) => CupertinoAppData(theme: cupertinoThemeData),
       ),
     );
   }

lib/screens/active_time_progresses_screen.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/widgets.dart';
+import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
+import 'package:time_progress_tracker/helper_functions.dart';
+import 'package:time_progress_tracker/models/time_progress.dart';
+import 'package:time_progress_tracker/widgets/progress_list_view/progress_list_view.dart';
+import 'package:time_progress_tracker/widgets/store_connectors/settings_store_connector.dart';
+import 'package:time_progress_tracker/widgets/store_connectors/time_progress_list_store_connector.dart';
+
+class ActiveTimeProgressesScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return SettingsStoreConnector(loadedBuilder: (context, settingsVm) {
+      return TimeProgressListStoreConnector(loadedBuilder: (context, tpListVm) {
+        List<TimeProgress> activeTpList =
+            selectActiveProgresses(tpListVm.tpList);
+        if (activeTpList.length < 1)
+          return Container(
+            padding: EdgeInsets.all(16),
+            child: Center(
+              child: PlatformText(
+                  "You don't have any active time progress, that are tracked."),
+            ),
+          );
+        return ProgressListView(
+          timeProgressList: activeTpList,
+          doneColor: settingsVm.appSettings.doneColor,
+          leftColor: settingsVm.appSettings.leftColor,
+        );
+      });
+    });
+  }
+}

lib/screens/dashboard_screen.dart

@@ -0,0 +1,83 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
+import 'package:time_progress_tracker/screens/active_time_progresses_screen.dart';
+import 'package:time_progress_tracker/screens/inactive_time_progresses_screen.dart';
+import 'package:time_progress_tracker/screens/settings_screen.dart';
+import 'package:time_progress_tracker/utils/color_utils.dart';
+import 'package:time_progress_tracker/utils/constants.dart';
+
+class DashboardScreen extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() => _DashboardScreenState();
+}
+
+class _DashboardScreenState extends State<DashboardScreen> {
+  int _tabSelectedIndex = 0;
+  String title = txtActiveProgressesScreen;
+
+  Widget _renderTabScreen(int tabIndex) {
+    switch (tabIndex) {
+      case 1:
+        return InactiveTimeProgressesScreen();
+      case 2:
+        return SettingsScreen();
+      default:
+        return ActiveTimeProgressesScreen();
+    }
+  }
+
+  String getScreenTitle(int tabIndex) {
+    switch (tabIndex) {
+      case 1:
+        return txtInactiveProgressesScreen;
+      case 2:
+        return txtSettingsScreen;
+      default:
+        return txtActiveProgressesScreen;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return PlatformScaffold(
+      appBar: PlatformAppBar(
+        title: Text(
+          title,
+          style: toolbarTextStyle,
+        ),
+        cupertino: (_, __) => CupertinoNavigationBarData(
+          transitionBetweenRoutes: false,
+        ),
+      ),
+      material: (_, __) => MaterialScaffoldData(),
+      body: _renderTabScreen(_tabSelectedIndex),
+      bottomNavBar: PlatformNavBar(
+          currentIndex: _tabSelectedIndex,
+          itemChanged: (index) {
+            setState(() {
+              _tabSelectedIndex = index;
+              title = getScreenTitle(index);
+            });
+          },
+          backgroundColor: bottomTabsBackground,
+          items: [
+            BottomNavigationBarItem(
+              icon: Icon(Icons.alarm, color: Colors.grey),
+              label: txtActiveProgressesScreen,
+              activeIcon: Icon(Icons.alarm, color: Colors.white),
+            ),
+            BottomNavigationBarItem(
+              icon: Icon(Icons.alarm_off, color: Colors.grey),
+              label: txtInactiveProgressesScreen,
+              activeIcon: Icon(Icons.alarm_off, color: Colors.white),
+            ),
+            BottomNavigationBarItem(
+              icon: Icon(Icons.settings, color: Colors.grey),
+              label: txtSettingsScreen,
+              activeIcon: Icon(Icons.settings, color: Colors.white),
+            )
+          ]),
+    );
+  }
+}

lib/screens/inactive_time_progresses_screen.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/widgets.dart';
+import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
+import 'package:time_progress_tracker/helper_functions.dart';
+import 'package:time_progress_tracker/models/time_progress.dart';
+import 'package:time_progress_tracker/widgets/progress_list_view/progress_list_view.dart';
+import 'package:time_progress_tracker/widgets/store_connectors/settings_store_connector.dart';
+import 'package:time_progress_tracker/widgets/store_connectors/time_progress_list_store_connector.dart';
+
+class InactiveTimeProgressesScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return SettingsStoreConnector(loadedBuilder: (context, settingsVm) {
+      return TimeProgressListStoreConnector(loadedBuilder: (context, tpListVm) {
+        List<TimeProgress> activeTpList =
+            selectInactiveProgresses(tpListVm.tpList);
+        if (activeTpList.length < 1)
+          return Container(
+            padding: EdgeInsets.all(16),
+            child: Center(
+              child: PlatformText(
+                  "You don't have any inactive time progress, that are tracked."),
+            ),
+          );
+        return ProgressListView(
+          timeProgressList: activeTpList,
+          doneColor: settingsVm.appSettings.doneColor,
+          leftColor: settingsVm.appSettings.leftColor,
+        );
+      });
+    });
+  }
+}

lib/screens/settings_screen.dart

@@ -0,0 +1,89 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
+import 'package:time_progress_tracker/app.dart';
+import 'package:time_progress_tracker/widgets/buttons/color_picker_btn.dart';
+import 'package:time_progress_tracker/widgets/home/tabs/settings/duration_settings_widget.dart';
+import 'package:time_progress_tracker/widgets/store_connectors/settings_store_connector.dart';
+
+class SettingsScreen extends StatelessWidget {
+  Widget _renderColorSettings(
+      BuildContext context, SettingsViewModel settingsVm) {
+    ThemeData appTheme = Theme.of(context);
+    return Expanded(
+      child: Column(
+        children: [
+          Expanded(
+              child: PlatformText(
+            "Color Settings",
+            style: appTheme.primaryTextTheme.caption,
+          )),
+          Row(
+            children: [
+              Expanded(
+                child: Padding(
+                  padding: EdgeInsets.only(right: 5),
+                  child: ColorPickerButton(
+                    title: "Done Color",
+                    dialogTitle: "Select Done Color",
+                    selectedColor: settingsVm.appSettings.doneColor,
+                    onColorPicked: settingsVm.updateDoneColor,
+                  ),
+                ),
+              ),
+              Expanded(
+                child: Padding(
+                  padding: EdgeInsets.only(left: 5),
+                  child: ColorPickerButton(
+                    title: "Left Color",
+                    dialogTitle: "Select Left Color",
+                    selectedColor: settingsVm.appSettings.leftColor,
+                    onColorPicked: settingsVm.updateLeftColor,
+                  ),
+                ),
+              )
+            ],
+          )
+        ],
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SettingsStoreConnector(loadedBuilder: (context, settingsVm) {
+      return Container(
+        padding: EdgeInsets.all(16),
+        child: Center(
+          child: Column(
+            children: [
+              Expanded(
+                child: _renderColorSettings(context, settingsVm),
+              ),
+              Expanded(
+                child: DurationSettingsWidget(
+                  duration: settingsVm.appSettings.duration,
+                  updateDuration: settingsVm.updateDuration,
+                ),
+              ),
+              Spacer(),
+              Expanded(
+                child: PlatformButton(
+                  onPressed: () {
+                    showAboutDialog(
+                        context: context,
+                        applicationName: TimeProgressTrackerApp.name,
+                        applicationVersion: "Beta",
+                        applicationLegalese:
+                            '\u00a9Andreas Fahrecker 2020-2021');
+                  },
+                  child: Text("About"),
+                ),
+              ),
+            ],
+          ),
+        ),
+      );
+    });
+  }
+}

lib/utils/color_utils.dart

@@ -0,0 +1,20 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+
+final ThemeData materialThemeData = ThemeData(
+  primarySwatch: Colors.indigo,
+  scaffoldBackgroundColor: Colors.white,
+  accentColor: Colors.indigo,
+  appBarTheme: AppBarTheme(color: Colors.indigo.shade600),
+  primaryColor: Colors.indigo,
+  secondaryHeaderColor: Colors.indigo,
+  canvasColor: Colors.indigo,
+  backgroundColor: Colors.red,
+);
+final CupertinoThemeData cupertinoThemeData = CupertinoThemeData(
+  primaryColor: Colors.indigo,
+  barBackgroundColor: Colors.indigo,
+  scaffoldBackgroundColor: Colors.white,
+);
+final toolbarTextStyle = TextStyle(color: Colors.white, fontSize: 16);
+final bottomTabsBackground = Colors.indigoAccent;

lib/utils/constants.dart

@@ -0,0 +1,3 @@
+const txtActiveProgressesScreen = "Active Progresses";
+const txtInactiveProgressesScreen = "Inactive Progresses";
+const txtSettingsScreen = "Settings";

lib/widgets/progress_list_view/progress_list_item.dart

@@ -1,4 +1,8 @@
+import 'dart:io' show Platform;
+
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
 import 'package:percent_indicator/linear_percent_indicator.dart';
 import 'package:time_progress_tracker/models/time_progress.dart';
 import 'package:time_progress_tracker/screens/progress_detail_screen.dart';
@@ -14,11 +18,11 @@ class ProgressListTileStrings {
       "Ended ${tp.daysSinceEnd()} Days ago.";
 }
 
-class ProgressListTile extends StatelessWidget {
+class ProgressListItem extends StatelessWidget {
   final TimeProgress timeProgress;
   final Color doneColor, leftColor;
 
-  ProgressListTile({
+  ProgressListItem({
     @required this.timeProgress,
     @required this.doneColor,
     @required this.leftColor,
@@ -26,11 +30,11 @@ class ProgressListTile extends StatelessWidget {
 
   Widget _renderSubtitle(BuildContext context) {
     if (!timeProgress.hasStarted())
-      return Text(ProgressListTileStrings.startsInDaysString(timeProgress));
+      return PlatformText(ProgressListTileStrings.startsInDaysString(timeProgress));
     if (timeProgress.hasEnded())
-      return Text(ProgressListTileStrings.endedDaysAgoString(timeProgress));
+      return PlatformText(ProgressListTileStrings.endedDaysAgoString(timeProgress));
     return LinearPercentIndicator(
-      center: Text(ProgressListTileStrings.percentString(timeProgress)),
+      center: PlatformText(ProgressListTileStrings.percentString(timeProgress)),
       percent: timeProgress.percentDone(),
       progressColor: doneColor,
       backgroundColor: leftColor,
@@ -43,9 +47,26 @@ class ProgressListTile extends StatelessWidget {
     void _onTileTap() =>
         Navigator.pushNamed(context, ProgressDetailScreen.routeName,
             arguments: ProgressDetailScreenArguments(timeProgress.id));
+    Text titleText = Text(timeProgress.name);
 
+    if (Platform.isIOS)
+      return CupertinoButton(
+          child: Container(
+            decoration: BoxDecoration(
+              color: Colors.grey,
+              borderRadius: BorderRadius.circular(12),
+            ),
+            padding: EdgeInsets.fromLTRB(15, 15, 5, 5),
+            child: Column(
+              children: [
+                titleText,
+                _renderSubtitle(context),
+              ],
+            ),
+          ),
+          onPressed: _onTileTap);
     return ListTile(
-      title: Text(timeProgress.name),
+      title: titleText,
       subtitle: _renderSubtitle(context),
       onTap: _onTileTap,
     );

lib/widgets/progress_list_view/progress_list_view.dart

@@ -1,6 +1,9 @@
+import 'dart:io' show Platform;
+
 import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
 import 'package:time_progress_tracker/models/time_progress.dart';
-import 'package:time_progress_tracker/widgets/progress_list_view/progress_list_tile.dart';
+import 'package:time_progress_tracker/widgets/progress_list_view/progress_list_item.dart';
 
 class ProgressListView extends StatelessWidget {
   final List<TimeProgress> timeProgressList;
@@ -12,15 +15,18 @@ class ProgressListView extends StatelessWidget {
     @required this.leftColor,
   });
 
+  Widget _renderListTile(TimeProgress tp) {
+    ProgressListItem listTile = ProgressListItem(
+        timeProgress: tp, doneColor: doneColor, leftColor: leftColor);
+    if (Platform.isIOS) return listTile;
+    return Card(
+      child: listTile,
+    );
+  }
+
   List<Widget> _renderListViewChildren() {
     return timeProgressList
-        .map((e) => Card(
-              child: ProgressListTile(
-                timeProgress: e,
-                doneColor: doneColor,
-                leftColor: leftColor,
-              ),
-            ))
+        .map((e) => _renderListTile(e))
         .toList(growable: false);
   }
 

pubspec.lock

@@ -127,6 +127,13 @@ packages:
       url: "git://github.com/yangyxd/flutter_picker.git"
     source: git
     version: "1.1.5"
+  flutter_platform_widgets:
+    dependency: "direct main"
+    description:
+      name: flutter_platform_widgets
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.80.0"
   flutter_redux:
     dependency: "direct main"
     description:
@@ -375,4 +382,4 @@ packages:
     version: "2.2.1"
 sdks:
   dart: ">=2.12.0-259.9.beta <3.0.0"
-  flutter: ">=1.20.0"
+  flutter: ">=1.20.4"

pubspec.yaml

@@ -27,14 +27,11 @@ dependencies:
   flutter_redux:
   flutter_picker:
     git: git://github.com/yangyxd/flutter_picker.git
+  flutter_platform_widgets:
   meta:
   percent_indicator:
   redux:
   shared_preferences:
-
-
-  # The following adds the Cupertino Icons font to your application.
-  # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^0.1.3
 
 dev_dependencies:

test/widget_test.dart

@@ -10,7 +10,7 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:percent_indicator/linear_percent_indicator.dart';
 import 'package:time_progress_tracker/models/app_settings.dart';
 import 'package:time_progress_tracker/models/time_progress.dart';
-import 'package:time_progress_tracker/widgets/progress_list_view/progress_list_tile.dart';
+import 'package:time_progress_tracker/widgets/progress_list_view/progress_list_item.dart';
 import 'package:time_progress_tracker/widgets/progress_list_view/progress_list_view.dart';
 
 import 'MaterialTesterWidget.dart';
@@ -26,7 +26,7 @@ void main() {
   testWidgets("Progress List Tile with currently active progress works",
       (WidgetTester tester) async {
     await tester.pumpWidget(MaterialTesterWidget(
-      widget: ProgressListTile(
+      widget: ProgressListItem(
         timeProgress: _activeProgress,
         doneColor: _defaultAppSettings.doneColor,
         leftColor: _defaultAppSettings.leftColor,
@@ -53,7 +53,7 @@ void main() {
     );
 
     await tester.pumpWidget(MaterialTesterWidget(
-      widget: ProgressListTile(
+      widget: ProgressListItem(
         timeProgress: futureProgress,
         doneColor: _defaultAppSettings.doneColor,
         leftColor: _defaultAppSettings.leftColor,
@@ -73,7 +73,7 @@ void main() {
     );
 
     await tester.pumpWidget(MaterialTesterWidget(
-      widget: ProgressListTile(
+      widget: ProgressListItem(
         timeProgress: pastProgress,
         doneColor: _defaultAppSettings.doneColor,
         leftColor: _defaultAppSettings.leftColor,
@@ -87,7 +87,7 @@ void main() {
   WidgetPredicate getProgressListTilePredicate(
           TimeProgress tp, AppSettings as) =>
       (Widget widget) =>
-          widget is ProgressListTile &&
+          widget is ProgressListItem &&
           widget.timeProgress == tp &&
           widget.doneColor == as.doneColor &&
           widget.leftColor == as.leftColor;