switch to newer usage widet

lib/app.dart

@@ -92,7 +92,7 @@ final lightThemeData = ThemeData(
           fontFamily: 'Inter-Medium',
           color: Colors.black,
           fontSize: 16,
-          fontWeight: FontWeight.w500),
+          fontWeight: FontWeight.w500), // medium body weight
       bodyText1: TextStyle(
           fontFamily: 'Inter-Medium',
           color: Colors.black,

lib/ui/settings/details_section_widget.dart

@@ -1,5 +1,4 @@
 import 'dart:async';
-import 'dart:math';
 
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
@@ -8,9 +7,7 @@ import 'package:photos/events/user_details_changed_event.dart';
 import 'package:photos/models/user_details.dart';
 import 'package:photos/services/user_service.dart';
 import 'package:photos/ui/loading_widget.dart';
-import 'package:photos/utils/data_util.dart';
-import 'package:photos/utils/toast_util.dart';
-import 'package:pie_chart/pie_chart.dart';
+import 'package:photos/ui/settings/usage_details_widget.dart';
 
 class DetailsSectionWidget extends StatefulWidget {
   DetailsSectionWidget({Key key}) : super(key: key);
@@ -50,92 +47,12 @@ class _DetailsSectionWidgetState extends State<DetailsSectionWidget> {
   @override
   Widget build(BuildContext context) {
     return SizedBox(
-      height: 140,
+      height: 196,
       child: _userDetails == null ? loadWidget : getContainer(),
     );
   }
 
-  Container getContainer() {
-    return Container(
-      decoration: BoxDecoration(
-        color: Colors.grey.withBlue(210).withOpacity(0.1),
-        borderRadius: BorderRadius.circular(10),
-      ),
-      width: double.infinity,
-      padding: EdgeInsets.fromLTRB(20, 20, 20, 20),
-      margin: EdgeInsets.fromLTRB(12, 8, 12, 8),
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.spaceAround,
-        crossAxisAlignment: CrossAxisAlignment.center,
-        children: [
-          GestureDetector(
-            onTap: () {
-              showToast(formatBytes(
-                      _userDetails.subscription.storage - _userDetails.usage) +
-                  " / " +
-                  convertBytesToReadableFormat(
-                      _userDetails.subscription.storage) +
-                  " free");
-            },
-            child: PieChart(
-              dataMap: {
-                "used": _userDetails.usage.toDouble(),
-                "free": max(
-                    _userDetails.subscription.storage.toDouble() -
-                        _userDetails.usage.toDouble(),
-                    0),
-              },
-              colorList: const [
-                Colors.redAccent,
-                Color.fromRGBO(50, 194, 100, 1.0),
-              ],
-              legendOptions: LegendOptions(
-                showLegends: false,
-              ),
-              chartValuesOptions: ChartValuesOptions(
-                showChartValues: false,
-                showChartValueBackground: false,
-              ),
-              chartRadius: 80,
-              ringStrokeWidth: 4,
-              chartType: ChartType.ring,
-              centerText:
-                  convertBytesToReadableFormat(_userDetails.usage) + "\nused",
-              centerTextStyle: TextStyle(
-                fontSize: 12,
-              ),
-              initialAngleInDegree: 270,
-            ),
-          ),
-          Padding(padding: EdgeInsets.all(4)),
-          Expanded(
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Text(
-                  _userDetails.email,
-                  style: TextStyle(
-                    fontSize: 16,
-                  ),
-                  overflow: TextOverflow.ellipsis,
-                ),
-                Padding(padding: EdgeInsets.all(6)),
-                Text(
-                  _userDetails.fileCount.toString() + " memories preserved",
-                  style: Theme.of(context).textTheme.caption,
-                ),
-                Padding(padding: EdgeInsets.all(3)),
-                Text(
-                  _userDetails.sharedCollectionsCount.toString() +
-                      " albums shared",
-                  style: Theme.of(context).textTheme.caption,
-                ),
-              ],
-            ),
-          ),
-        ],
-      ),
-    );
+  Widget getContainer() {
+    return UsageDetailsWidget(_userDetails);
   }
 }

lib/ui/settings/usage_details_widget.dart

@@ -1,8 +1,13 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
+import 'package:photos/models/user_details.dart';
+import 'package:photos/utils/data_util.dart';
+import 'package:photos/utils/date_time_util.dart';
 
 class UsageDetailsWidget extends StatelessWidget {
-  const UsageDetailsWidget({Key key}) : super(key: key);
+  final UserDetails userDetails;
+
+  const UsageDetailsWidget(this.userDetails, {Key key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -85,11 +90,15 @@ class UsageDetailsWidget extends StatelessWidget {
                           ),
                           Positioned.fill(
                             child: Align(
-                              alignment: Alignment.bottomRight,
+                              alignment: Alignment.bottomCenter,
                               child: Container(
                                 width: 229,
                                 height: 226,
-                                child: FlutterLogo(size: 226),
+                                child: Image.asset(
+                                  "assets/preserved_green.png",
+                                  height: 226,
+                                ),
+                                // child: FlutterLogo(size: 226),
                               ),
                             ),
                           ),
@@ -144,12 +153,12 @@ class UsageDetailsWidget extends StatelessWidget {
                   ),
                 ),
                 Positioned(
-                  left: 224,
+                  left: 210,
                   top: 20,
                   child: Opacity(
                     opacity: 0.50,
                     child: Text(
-                      "Ends 22 Jan’23",
+                      "Ends ${getDateAndMonthAndYear(DateTime.fromMicrosecondsSinceEpoch(userDetails.subscription.expiryTime))}",
                       textAlign: TextAlign.right,
                       style: TextStyle(
                         color: Colors.white,
@@ -164,7 +173,8 @@ class UsageDetailsWidget extends StatelessWidget {
                   left: 16,
                   top: 40,
                   child: Text(
-                    "10 GB",
+                    convertBytesToReadableFormat(
+                        userDetails.subscription.storage),
                     style: TextStyle(
                       color: Colors.white,
                       fontSize: 24,
@@ -189,9 +199,9 @@ class UsageDetailsWidget extends StatelessWidget {
                         Padding(padding: EdgeInsets.fromLTRB(0, 12, 0, 0)),
                         Row(
                           mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                          children: const [
+                          children: [
                             Text(
-                              "2.3 GB of 10 GB used",
+                              "${convertBytesToReadableFormat(userDetails.usage)} of ${convertBytesToReadableFormat(userDetails.subscription.storage)} used",
                               style: TextStyle(
                                 color: Colors.white,
                                 fontSize: 14,
@@ -200,7 +210,7 @@ class UsageDetailsWidget extends StatelessWidget {
                               ),
                             ),
                             Text(
-                              "3,846 Memories",
+                              "${userDetails.fileCount.toString()} Memories",
                               style: TextStyle(
                                 color: Colors.white,
                                 fontSize: 14,

lib/ui/settings_page.dart

@@ -12,7 +12,6 @@ import 'package:photos/ui/settings/security_section_widget.dart';
 import 'package:photos/ui/settings/social_section_widget.dart';
 import 'package:photos/ui/settings/support_section_widget.dart';
 import 'package:photos/ui/settings/theme_switch_widget.dart';
-import 'package:photos/ui/settings/usage_details_widget.dart';
 
 class SettingsPage extends StatelessWidget {
   const SettingsPage({Key key}) : super(key: key);
@@ -26,11 +25,23 @@ class SettingsPage extends StatelessWidget {
 
   Widget _getBody(BuildContext context) {
     final hasLoggedIn = Configuration.instance.getToken() != null;
+    final String email = Configuration.instance.getEmail();
     final List<Widget> contents = [];
-    contents.add(Row(
-        mainAxisAlignment: MainAxisAlignment.spaceAround,
-        crossAxisAlignment: CrossAxisAlignment.center,
-        children: const [ThemeSwitchWidget()]));
+    contents.add(Container(
+        padding: EdgeInsets.symmetric(horizontal: 10),
+        child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              Text(
+                email,
+                style: Theme.of(context)
+                    .textTheme
+                    .subtitle1
+                    .copyWith(overflow: TextOverflow.ellipsis),
+              ),
+              ThemeSwitchWidget()
+            ])));
     final sectionDivider = Divider(
       height: 10,
       color: Theme.of(context).colorScheme.onSurface.withOpacity(0.4),
@@ -39,8 +50,6 @@ class SettingsPage extends StatelessWidget {
       contents.addAll([
         DetailsSectionWidget(),
         sectionDivider,
-        UsageDetailsWidget(),
-        sectionDivider,
         BackupSectionWidget(),
         sectionDivider,
         AccountSectionWidget(),