Merge pull request #272 from vostpt/task/#271_UIFixes_StatsHome_2

closes #271 - UI improvements, adds base widget tests

ios/Podfile.lock

@@ -214,4 +214,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 083258d7f5e80b42ea9bfee905fe93049bc04c64
 
-COCOAPODS: 1.9.1
+COCOAPODS: 1.8.4

lib/generated/intl/messages_all.dart

@@ -34,9 +34,8 @@ MessageLookupByLibrary _findExact(String localeName) {
 /// User programs should call this before using [localeName] for messages.
 Future<bool> initializeMessages(String localeName) async {
   var availableLocale = Intl.verifiedLocale(
-    localeName,
-    (locale) => _deferredLibraries[locale] != null,
-    onFailure: (_) => null);
+      localeName, (locale) => _deferredLibraries[locale] != null,
+      onFailure: (_) => null);
   if (availableLocale == null) {
     return new Future.value(false);
   }
@@ -56,8 +55,8 @@ bool _messagesExistFor(String locale) {
 }
 
 MessageLookupByLibrary _findGeneratedMessagesFor(String locale) {
-  var actualLocale = Intl.verifiedLocale(locale, _messagesExistFor,
-      onFailure: (_) => null);
+  var actualLocale =
+      Intl.verifiedLocale(locale, _messagesExistFor, onFailure: (_) => null);
   if (actualLocale == null) return null;
   return _findExact(actualLocale);
 }

lib/resources/constants.dart

@@ -38,6 +38,9 @@ const String routeStatisticsDeaths = "statistics/deaths";
 const String routeStatisticsRecovered = "statistics/recovered";
 const String routeStatisticsHospitalized = "statistics/hospitalized";
 
+/// Default PT Locale
+const defaultLocal = "pt_PT";
+
 /// DSSG Source Date Time format
 final DateFormat formatDSSGDateTime = DateFormat("DD-MM-yyyy HH:mm");
 

lib/resources/style/text_styles.dart

@@ -31,8 +31,8 @@ class TextStyles {
       GoogleFonts.robotoCondensed(
         textStyle: TextStyle(
           color: color,
-          fontSize: 38.0,
-          fontWeight: FontWeight.w900,
+          fontSize: 36.0,
+          fontWeight: FontWeight.w700,
         ),
       );
 
@@ -71,6 +71,18 @@ class TextStyles {
         ),
       );
 
+  static TextStyle statsNumber({
+    Color color = Covid19Colors.darkGrey,
+    FontWeight fontWeight = FontWeight.w700,
+  }) =>
+      GoogleFonts.robotoCondensed(
+        textStyle: TextStyle(
+          color: color,
+          fontSize: 20.0,
+          fontWeight: fontWeight,
+        ),
+      );
+
   static TextStyle h3({
     Color color = Covid19Colors.darkGrey,
   }) =>

lib/ui/assets/colors.dart

@@ -63,6 +63,9 @@ class Covid19Colors {
   /// Stats grey
   static const Color statsGrey = Color(0xffeceef0);
 
+  /// Stats Percentage Number Color
+  static const Color statsPercentageNumber = Color(0xff6d787e);
+
   /// Contact Card Background Color grey
   static const Color contactCardBackgroundGrey = Color(0xffeceef0);
 

lib/ui/assets/dimensions.dart

@@ -1,4 +1,20 @@
+///     This program is free software: you can redistribute it and/or modify
+///    it under the terms of the GNU General Public License as published by
+///    the Free Software Foundation, either version 3 of the License, or
+///    (at your option) any later version.
+///
+///    This program is distributed in the hope that it will be useful,
+///    but WITHOUT ANY WARRANTY; without even the implied warranty of
+///    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+///    GNU General Public License for more details.
+///
+///    You should have received a copy of the GNU General Public License
+///    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
 const identMargin = 10.0;
 const tabIndicatorMagin = 20.0;
 const tabIndicatorWeight = 4.0;
 const marginVidCloseBt = 10.0;
+
+const defaultMinimumScreenWidth = 375;
+const defaultDevicePixelRatio = 2.0;

lib/ui/screens/statistics/components/number_and_percentage.dart

@@ -1,3 +1,5 @@
+import 'package:covid19mobile/resources/constants.dart';
+
 ///    This program is free software: you can redistribute it and/or modify
 ///    it under the terms of the GNU General Public License as published by
 ///    the Free Software Foundation, either version 3 of the License, or
@@ -14,19 +16,28 @@
 import 'package:covid19mobile/resources/style/text_styles.dart';
 import 'package:covid19mobile/ui/assets/colors.dart';
 import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
 
 class NumberAndPercentageWidget extends StatelessWidget {
   final int value;
   final double percentage;
+  final bool shouldWrapContent;
 
   const NumberAndPercentageWidget(
-      {Key key, @required this.value, @required this.percentage})
+      {Key key,
+      @required this.value,
+      @required this.percentage,
+      this.shouldWrapContent = false})
       : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     return Wrap(
-      crossAxisAlignment: WrapCrossAlignment.center,
+      direction: shouldWrapContent ? Axis.vertical : Axis.horizontal,
+      crossAxisAlignment: shouldWrapContent
+          ? WrapCrossAlignment.start
+          : WrapCrossAlignment.center,
+      alignment: WrapAlignment.start,
       children: <Widget>[
         Container(
           margin: const EdgeInsets.all(4.0),
@@ -36,9 +47,11 @@ class NumberAndPercentageWidget extends StatelessWidget {
           ),
         ),
         Container(
+          margin: const EdgeInsets.only(left: 4.0),
           child: Text(
             _showPercentage(percentage),
-            style: TextStyles.h3Number(color: Covid19Colors.grey),
+            style:
+                TextStyles.h3Number(color: Covid19Colors.statsPercentageNumber),
           ),
         ),
       ],
@@ -48,8 +61,19 @@ class NumberAndPercentageWidget extends StatelessWidget {
 
 /// Return the label for percentage depending
 ///   of the value passed.
+///
+/// Formats the percentage using [defaultLocal]
+/// in future this can be changed to get the
+/// Locale from Device and format accordingly
+///
+/// [NumberFormat] ##0.# formats the number
+/// to have only 1 decimal place if decimal value
+/// is greater then 0, if 0 the decimal place is omitted
+///
 String _showPercentage(double percentage) {
-  String value = percentage.toStringAsFixed(1);
+  var f = NumberFormat("##0.#", defaultLocal);
+
+  String value = f.format(percentage);
 
   if (percentage > 0.0) {
     return "(+$value%)";

lib/ui/screens/statistics/components/see_details.dart

@@ -19,8 +19,8 @@ import 'package:flutter/material.dart';
 class SeeDetailsWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.only(bottom: 16.0),
+    return Container(
+      padding: const EdgeInsets.only(top: 16.0),
       child: Text(
         S.of(context).seeDetails,
         style: TextStyles.h3Regular(color: Covid19Colors.green),

lib/ui/screens/statistics/components/statistics_container.dart

@@ -1,3 +1,5 @@
+import 'package:covid19mobile/ui/assets/colors.dart';
+
 ///    This program is free software: you can redistribute it and/or modify
 ///    it under the terms of the GNU General Public License as published by
 ///    the Free Software Foundation, either version 3 of the License, or
@@ -30,7 +32,7 @@ class StatisticsContainer extends StatelessWidget {
     return Container(
       margin: const EdgeInsets.only(bottom: 8.0),
       child: Ink(
-        decoration: Covid19BorderDecorator(),
+        decoration: Covid19StatsBorderDecorator(),
         child: InkWell(
           onTap: onTap,
           child: Padding(

lib/ui/screens/statistics/components/statistics_horizontal.dart

@@ -20,6 +20,8 @@ import 'package:covid19mobile/ui/screens/statistics/components/statistics_new_ab
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 
+import 'statistics_title.dart';
+
 class StatisticHorizontalWidget extends StatelessWidget {
   final String label;
   final int value;
@@ -42,31 +44,35 @@ class StatisticHorizontalWidget extends StatelessWidget {
     return StatisticsContainer(
       onTap: onTap,
       child: Column(
-        mainAxisAlignment: MainAxisAlignment.start,
-        crossAxisAlignment: CrossAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.stretch,
         children: <Widget>[
-          Text(
-            label,
-            style: TextStyles.h3(),
-          ),
+          StatisticsTitle(label: label),
           Row(
             crossAxisAlignment: CrossAxisAlignment.center,
             mainAxisAlignment: MainAxisAlignment.start,
             children: <Widget>[
-              Container(
-                alignment: Alignment.centerLeft,
-                child: NumberAndPercentageWidget(
-                  value: value,
-                  percentage: percentage,
+              Expanded(
+                child: Container(
+                  alignment: Alignment.centerLeft,
+                  child: NumberAndPercentageWidget(
+                    value: value,
+                    percentage: percentage,
+                  ),
                 ),
               ),
-              Expanded(child: SizedBox()),
               Container(
-                alignment: Alignment.centerLeft,
-                child: StatisticsNewAbsolute(
-                    value: absolute, label: absoluteLabel),
+                color: Covid19Colors.lightGreyLight,
+                height: 32.0,
+                width: 1.0,
+              ),
+              Expanded(
+                child: Container(
+                  padding: const EdgeInsets.only(left: 17.0),
+                  alignment: Alignment.centerLeft,
+                  child: StatisticsNewAbsolute(
+                      value: absolute, label: absoluteLabel),
+                ),
               ),
-              Expanded(child: SizedBox()),
             ],
           ),
           SeeDetailsWidget()

lib/ui/screens/statistics/components/statistics_new_absolute.dart

@@ -29,7 +29,10 @@ class StatisticsNewAbsolute extends StatelessWidget {
     return Wrap(
       crossAxisAlignment: WrapCrossAlignment.center,
       children: <Widget>[
-        SquaredNumberWidget(value: value),
+        SquaredNumberWidget(
+          value: value,
+          style: TextStyles.statsNumber(),
+        ),
         SizedBox(
           width: 3,
         ),

lib/ui/screens/statistics/components/statistics_title.dart

@@ -0,0 +1,32 @@
+///    This program is free software: you can redistribute it and/or modify
+///    it under the terms of the GNU General Public License as published by
+///    the Free Software Foundation, either version 3 of the License, or
+///    (at your option) any later version.
+///
+///    This program is distributed in the hope that it will be useful,
+///    but WITHOUT ANY WARRANTY; without even the implied warranty of
+///    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+///    GNU General Public License for more details.
+///
+///    You should have received a copy of the GNU General Public License
+///    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+import 'package:covid19mobile/resources/style/text_styles.dart';
+
+class StatisticsTitle extends StatelessWidget {
+  final String label;
+
+  const StatisticsTitle({Key key, this.label}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.only(bottom: 16.0),
+      child: Text(
+        label,
+        style: TextStyles.h3(),
+      ),
+    );
+  }
+}