[Gallery] Update desktop Rally for pages that did not have designs before (#314)

* Update desktop Rally for pages that did not have designs before

gallery/lib/studies/rally/tabs/accounts.dart

@@ -5,11 +5,10 @@
 import 'package:flutter/material.dart';
 
 import 'package:gallery/l10n/gallery_localizations.dart';
-import 'package:gallery/layout/adaptive.dart';
 import 'package:gallery/studies/rally/charts/pie_chart.dart';
-import 'package:gallery/studies/rally/colors.dart';
 import 'package:gallery/studies/rally/data.dart';
 import 'package:gallery/studies/rally/finance.dart';
+import 'package:gallery/studies/rally/tabs/sidebar.dart';
 
 /// A page that shows a summary of accounts.
 class AccountsView extends StatelessWidget {
@@ -18,74 +17,18 @@ class AccountsView extends StatelessWidget {
     final items = DummyDataService.getAccountDataList(context);
     final detailItems = DummyDataService.getAccountDetailList(context);
     final balanceTotal = sumAccountDataPrimaryAmount(items);
-    final view = FinancialEntityView(
-      heroLabel: GalleryLocalizations.of(context).rallyAccountTotal,
-      heroAmount: balanceTotal,
-      segments: buildSegmentsFromAccountItems(items),
-      wholeAmount: balanceTotal,
-      financialEntityCards: buildAccountDataListViews(items, context),
-    );
-    if (isDisplayDesktop(context)) {
-      return Row(
-        children: [
-          Flexible(
-            flex: 2,
-            child: SingleChildScrollView(
-              child: Padding(
-                padding: const EdgeInsets.symmetric(vertical: 24),
-                child: view,
-              ),
-            ),
-          ),
-          Expanded(
-            flex: 1,
-            child: Container(
-              color: RallyColors.inputBackground,
-              padding: EdgeInsetsDirectional.only(start: 24),
-              height: double.infinity,
-              alignment: AlignmentDirectional.centerStart,
-              child: ListView(
-                shrinkWrap: true,
-                children: [
-                  for (AccountDetailData item in detailItems)
-                    _AccountDetail(title: item.title, value: item.value),
-                ],
-              ),
-            ),
-          ),
-        ],
-      );
-    } else {
-      return SingleChildScrollView(child: view);
-    }
-  }
-}
 
-class _AccountDetail extends StatelessWidget {
-  const _AccountDetail({Key key, this.value, this.title}) : super(key: key);
-
-  final String value;
-  final String title;
-
-  @override
-  Widget build(BuildContext context) {
-    final textTheme = Theme.of(context).textTheme;
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        SizedBox(height: 8),
-        Text(
-          title,
-          style:
-              textTheme.body1.copyWith(fontSize: 16, color: RallyColors.gray60),
-        ),
-        SizedBox(height: 8),
-        Text(
-          value,
-          style: textTheme.body2.copyWith(fontSize: 20),
-        ),
-        SizedBox(height: 8),
-        Container(color: RallyColors.primaryBackground, height: 1),
+    return TabWithSidebar(
+      mainView: FinancialEntityView(
+        heroLabel: GalleryLocalizations.of(context).rallyAccountTotal,
+        heroAmount: balanceTotal,
+        segments: buildSegmentsFromAccountItems(items),
+        wholeAmount: balanceTotal,
+        financialEntityCards: buildAccountDataListViews(items, context),
+      ),
+      sidebarItems: [
+        for (UserDetailData item in detailItems)
+          SidebarItem(title: item.title, value: item.value)
       ],
     );
   }

gallery/lib/studies/rally/tabs/bills.dart

@@ -5,10 +5,10 @@
 import 'package:flutter/widgets.dart';
 
 import 'package:gallery/l10n/gallery_localizations.dart';
-import 'package:gallery/layout/adaptive.dart';
 import 'package:gallery/studies/rally/charts/pie_chart.dart';
 import 'package:gallery/studies/rally/data.dart';
 import 'package:gallery/studies/rally/finance.dart';
+import 'package:gallery/studies/rally/tabs/sidebar.dart';
 
 /// A page that shows a summary of bills.
 class BillsView extends StatefulWidget {
@@ -22,17 +22,25 @@ class _BillsViewState extends State<BillsView>
   Widget build(BuildContext context) {
     List<BillData> items = DummyDataService.getBillDataList(context);
     final dueTotal = sumBillDataPrimaryAmount(items);
-    return SingleChildScrollView(
-      child: Container(
-        padding: isDisplayDesktop(context) ? EdgeInsets.only(top: 24) : null,
-        child: FinancialEntityView(
-          heroLabel: GalleryLocalizations.of(context).rallyBillsDue,
-          heroAmount: dueTotal,
-          segments: buildSegmentsFromBillItems(items),
-          wholeAmount: dueTotal,
-          financialEntityCards: buildBillDataListViews(items, context),
-        ),
+    final paidTotal = sumBillDataPaidAmount(items);
+    final detailItems = DummyDataService.getBillDetailList(
+      context,
+      dueTotal: dueTotal,
+      paidTotal: paidTotal,
+    );
+
+    return TabWithSidebar(
+      mainView: FinancialEntityView(
+        heroLabel: GalleryLocalizations.of(context).rallyBillsDue,
+        heroAmount: dueTotal,
+        segments: buildSegmentsFromBillItems(items),
+        wholeAmount: dueTotal,
+        financialEntityCards: buildBillDataListViews(items, context),
       ),
+      sidebarItems: [
+        for (UserDetailData item in detailItems)
+          SidebarItem(title: item.title, value: item.value)
+      ],
     );
   }
 }

gallery/lib/studies/rally/tabs/budgets.dart

@@ -5,10 +5,10 @@
 import 'package:flutter/widgets.dart';
 
 import 'package:gallery/l10n/gallery_localizations.dart';
-import 'package:gallery/layout/adaptive.dart';
 import 'package:gallery/studies/rally/charts/pie_chart.dart';
 import 'package:gallery/studies/rally/data.dart';
 import 'package:gallery/studies/rally/finance.dart';
+import 'package:gallery/studies/rally/tabs/sidebar.dart';
 
 class BudgetsView extends StatefulWidget {
   @override
@@ -22,17 +22,24 @@ class _BudgetsViewState extends State<BudgetsView>
     final items = DummyDataService.getBudgetDataList(context);
     final capTotal = sumBudgetDataPrimaryAmount(items);
     final usedTotal = sumBudgetDataAmountUsed(items);
-    return SingleChildScrollView(
-      child: Container(
-        padding: isDisplayDesktop(context) ? EdgeInsets.only(top: 24) : null,
-        child: FinancialEntityView(
-          heroLabel: GalleryLocalizations.of(context).rallyBudgetLeft,
-          heroAmount: capTotal - usedTotal,
-          segments: buildSegmentsFromBudgetItems(items),
-          wholeAmount: capTotal,
-          financialEntityCards: buildBudgetDataListViews(items, context),
-        ),
+    final detailItems = DummyDataService.getBudgetDetailList(
+      context,
+      capTotal: capTotal,
+      usedTotal: usedTotal,
+    );
+
+    return TabWithSidebar(
+      mainView: FinancialEntityView(
+        heroLabel: GalleryLocalizations.of(context).rallyBudgetLeft,
+        heroAmount: capTotal - usedTotal,
+        segments: buildSegmentsFromBudgetItems(items),
+        wholeAmount: capTotal,
+        financialEntityCards: buildBudgetDataListViews(items, context),
       ),
+      sidebarItems: [
+        for (UserDetailData item in detailItems)
+          SidebarItem(title: item.title, value: item.value)
+      ],
     );
   }
 }

gallery/lib/studies/rally/tabs/settings.dart

@@ -5,6 +5,7 @@
 import 'package:flutter/material.dart';
 
 import 'package:gallery/layout/adaptive.dart';
+import 'package:gallery/studies/rally/colors.dart';
 import 'package:gallery/studies/rally/data.dart';
 import 'package:gallery/studies/rally/login.dart';
 
@@ -16,14 +17,19 @@ class SettingsView extends StatefulWidget {
 class _SettingsViewState extends State<SettingsView> {
   @override
   Widget build(BuildContext context) {
-    final items = DummyDataService.getSettingsTitles(context)
-        .map((title) => _SettingsItem(title))
-        .toList();
     return Container(
       padding: EdgeInsets.only(top: isDisplayDesktop(context) ? 24 : 0),
       child: ListView(
         shrinkWrap: true,
-        children: items,
+        children: [
+          for (String title in DummyDataService.getSettingsTitles(context)) ...[
+            _SettingsItem(title),
+            Divider(
+              color: RallyColors.dividerColor,
+              height: 1,
+            )
+          ]
+        ],
       ),
     );
   }

gallery/lib/studies/rally/tabs/sidebar.dart

@@ -0,0 +1,87 @@
+// Copyright 2020 The Flutter team. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:gallery/layout/adaptive.dart';
+import 'package:gallery/studies/rally/colors.dart';
+
+class TabWithSidebar extends StatelessWidget {
+  const TabWithSidebar({
+    Key key,
+    @required this.mainView,
+    @required this.sidebarItems,
+  }) : super(key: key);
+
+  final Widget mainView;
+  final List<Widget> sidebarItems;
+
+  @override
+  Widget build(BuildContext context) {
+    if (isDisplayDesktop(context)) {
+      return Row(
+        children: [
+          Flexible(
+            flex: 2,
+            child: SingleChildScrollView(
+              child: Padding(
+                padding: const EdgeInsets.symmetric(vertical: 24),
+                child: mainView,
+              ),
+            ),
+          ),
+          Expanded(
+            flex: 1,
+            child: Container(
+              color: RallyColors.inputBackground,
+              padding: EdgeInsetsDirectional.only(start: 24),
+              height: double.infinity,
+              alignment: AlignmentDirectional.centerStart,
+              child: ListView(
+                shrinkWrap: true,
+                children: sidebarItems,
+              ),
+            ),
+          ),
+        ],
+      );
+    } else {
+      return SingleChildScrollView(child: mainView);
+    }
+  }
+}
+
+class SidebarItem extends StatelessWidget {
+  const SidebarItem({Key key, this.value, this.title}) : super(key: key);
+
+  final String value;
+  final String title;
+
+  @override
+  Widget build(BuildContext context) {
+    final textTheme = Theme.of(context).textTheme;
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        SizedBox(height: 8),
+        Text(
+          title,
+          style: textTheme.body1.copyWith(
+            fontSize: 16,
+            color: RallyColors.gray60,
+          ),
+        ),
+        SizedBox(height: 8),
+        Text(
+          value,
+          style: textTheme.body2.copyWith(fontSize: 20),
+        ),
+        SizedBox(height: 8),
+        Container(
+          color: RallyColors.primaryBackground,
+          height: 1,
+        ),
+      ],
+    );
+  }
+}