fix(battery_widget.dart,detail_screen.dart,lock.dart,power_widget.dar…

…t,widget_style_constants.dart): Make icons and text colors on widgets and icons customizable
Yonomi · Dec 28, 2021 · d4510a4 · d4510a4
1 parent e7ffca0
commit d4510a4
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 33 deletions.
diff --git a/lib/traits/battery_widget.dart b/lib/traits/battery_widget.dart
@@ -5,8 +5,15 @@ import 'package:yonomi_device_widgets/ui/widget_style_constants.dart';
 
 class BatteryWidget extends StatelessWidget {
   final BatteryLevelTraitProvider _batteryLevelTraitProvider;
+  late final Color _iconColor;
+  late final Color _textColor;
 
-  BatteryWidget(this._batteryLevelTraitProvider);
+  BatteryWidget(this._batteryLevelTraitProvider,
+      {Color iconColor = WidgetStyleConstants.deviceIconColor,
+      Color textColor = Colors.white}) {
+    this._iconColor = iconColor;
+    this._textColor = textColor;
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -20,9 +27,11 @@ class BatteryWidget extends StatelessWidget {
           children: <Widget>[
             Row(children: <Widget>[
               Text(
-                (_batteryLevelTraitProvider.deviceDetail?.displayName ??
-                    'BATTERY'),
-                style: Theme.of(context).textTheme.headline6,
+                'BATTERY',
+                style: Theme.of(context)
+                    .textTheme
+                    .headline6
+                    ?.copyWith(color: _textColor),
                 textAlign: TextAlign.left,
               ),
             ]),
@@ -49,7 +58,7 @@ class BatteryWidget extends StatelessWidget {
                 child: BatteryLevelIcon(
                   _batteryLevelTraitProvider.getBatteryLevel,
                   size: 100.0,
-                  color: Colors.white,
+                  color: _iconColor,
                 ),
               ),
             ),
@@ -58,7 +67,8 @@ class BatteryWidget extends StatelessWidget {
             ),
             Text(
               "Battery Level: ${_batteryLevelTraitProvider.getBatteryLevel}%",
-              style: TextStyle(fontSize: 22, fontStyle: FontStyle.normal),
+              style: TextStyle(
+                  fontSize: 22, fontStyle: FontStyle.normal, color: _textColor),
             ),
           ]);
     }

diff --git a/lib/traits/detail_screen.dart b/lib/traits/detail_screen.dart
@@ -59,46 +59,116 @@ class DetailScreenWidget extends StatelessWidget {
 
   Widget buildContainer(List<Trait> traits) {
     return Container(
-      alignment: Alignment.center,
-      child: Center(
-        child: Column(
-            children: traits.map((element) {
-          return Row(children: [
-            SizedBox(width: 50),
-            createTraitWidget(element.name),
-          ]);
-        }).toList()),
-      ),
-    );
+        alignment: Alignment.center,
+        child: Center(
+            child: Column(children: [
+          createTraitWidget(traits.first.name, iconColor: Colors.white),
+          Accordion(
+              maxOpenSections: 1,
+              headerPadding: EdgeInsets.symmetric(vertical: 8, horizontal: 15),
+              children: traits.skip(1).map((trait) {
+                return AccordionSection(
+                  header: createTraitWidgetHeader(trait.name),
+                  content: createTraitWidget(trait.name),
+                  contentHorizontalPadding: 20,
+                  contentBorderWidth: 1,
+                  contentBorderColor: Colors.white,
+                  headerBackgroundColor: Colors.white,
+                  contentBackgroundColor: Colors.white,
+                );
+              }).toList())
+        ])));
   }
 
-  Widget createTraitWidget(String name) {
+  Widget createTraitWidget(String name,
+      {Color iconColor = WidgetStyleConstants.deviceDetailIconColorActive,
+      Color textColor = WidgetStyleConstants.deviceDetailIconColorActive}) {
     switch (name) {
       case 'lock':
         return Consumer<LockProvider>(builder: (_, lockProvider, child) {
           return Padding(
             padding: const EdgeInsets.all(8.0),
-            child: LockWidget(lockProvider),
+            child: LockWidget(lockProvider,
+                iconColor: iconColor, textColor: textColor),
           );
         });
       case 'power':
         return Consumer<PowerTraitProvider>(builder: (_, powerProvider, child) {
           return Padding(
             padding: const EdgeInsets.all(8.0),
-            child: PowerWidget(powerProvider),
+            child: PowerWidget(powerProvider,
+                iconColor: iconColor, textColor: textColor),
           );
         });
       case 'battery_level':
         return Consumer<BatteryLevelTraitProvider>(
-            builder: (_, batteryLevelProvider, child) {
+            builder: (_, batteryLevelTraitProvider, child) {
+          return Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: BatteryWidget(batteryLevelTraitProvider,
+                iconColor: iconColor, textColor: textColor),
+          );
+        });
+      default:
+        return Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: UnknownItemIcon(color: iconColor));
+    }
+  }
+
+  Widget createTraitWidgetHeader(String name) {
+    switch (name) {
+      case 'lock':
+        return Consumer<LockProvider>(builder: (_, lockProvider, child) {
+          return Padding(
+              padding: const EdgeInsets.all(8.0),
+              child: Row(
+                children: [
+                  LockIcon(
+                    lockProvider.isLocked,
+                    size: 20.0,
+                    color: WidgetStyleConstants.deviceDetailIconColorActive,
+                  ),
+                  Padding(
+                      padding: const EdgeInsets.all(8.0),
+                      child: Text(lockProvider.getLockTrait().name,
+                          style: TextStyle(
+                              fontSize: 20,
+                              color: WidgetStyleConstants.darkTextColor))),
+                ],
+              ));
+        });
+      case 'power':
+        return Consumer<PowerTraitProvider>(builder: (_, powerProvider, child) {
+          return Padding(
+              padding: const EdgeInsets.all(8.0),
+              child: Row(
+                children: [
+                  PowerItemIcon(powerProvider.getOnOffState,
+                      size: 20.0,
+                      color: WidgetStyleConstants.deviceDetailIconColorActive),
+                  Padding(
+                      padding: const EdgeInsets.all(8.0),
+                      child: Text(
+                          (powerProvider.getPowerTrait()?.name ??
+                              'Power Switch'),
+                          style: TextStyle(
+                              fontSize: 20,
+                              color: WidgetStyleConstants.darkTextColor))),
+                ],
+              ));
+        });
+      case 'battery_level':
+        return Consumer<BatteryLevelTraitProvider>(
+            builder: (_, batteryLevelTraitProvider, child) {
           return Padding(
             padding: const EdgeInsets.all(8.0),
             child: Row(
               children: [
                 BatteryLevelIcon(
                   batteryLevelProvider.getBatteryLevel,
                   size: 20.0,
-                  color: Colors.white,
+                  color: WidgetStyleConstants.deviceDetailIconColorActive,
                 ),
                 Padding(
                   padding: const EdgeInsets.all(8.0),
@@ -117,11 +187,14 @@ class DetailScreenWidget extends StatelessWidget {
             children: [
               UnknownItemIcon(
                 size: 20.0,
-                color: Colors.white,
+                color: WidgetStyleConstants.deviceDetailIconColorActive,
               ),
               Padding(
                 padding: const EdgeInsets.all(8.0),
-                child: Text(name, style: TextStyle(fontSize: 20)),
+                child: Text(name,
+                    style: TextStyle(
+                        fontSize: 20,
+                        color: WidgetStyleConstants.darkTextColor)),
               ),
             ],
           ),
@@ -135,7 +208,7 @@ class DetailScreenWidget extends StatelessWidget {
     } else if (batteryLevel <= WidgetStyleConstants.batteryLowMax) {
       return WidgetStyleConstants.globalWarningColor;
     } else {
-      return Colors.white;
+      return WidgetStyleConstants.darkTextColor;
     }
   }
 }
diff --git a/lib/traits/lock.dart b/lib/traits/lock.dart
@@ -2,11 +2,19 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:yonomi_device_widgets/assets/traits/lock_item_icon.dart';
 import 'package:yonomi_device_widgets/providers/lock_provider.dart';
+import 'package:yonomi_device_widgets/ui/widget_style_constants.dart';
 
 class LockWidget extends StatelessWidget {
-  late final LockProvider _lockProvider;
+  final LockProvider _lockProvider;
+  late final Color _iconColor;
+  late final Color _textColor;
 
-  LockWidget(this._lockProvider);
+  LockWidget(this._lockProvider,
+      {Color iconColor = WidgetStyleConstants.deviceIconColor,
+      Color textColor = Colors.white}) {
+    this._iconColor = iconColor;
+    this._textColor = textColor;
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -19,7 +27,10 @@ class LockWidget extends StatelessWidget {
                 children: <Widget>[
                   Text(
                     'LOCK',
-                    style: Theme.of(context).textTheme.headline6,
+                    style: Theme.of(context)
+                        .textTheme
+                        .headline6
+                        ?.copyWith(color: _textColor),
                   ),
                 ],
               ),
@@ -34,9 +45,9 @@ class LockWidget extends StatelessWidget {
                       child: _lockProvider.loadingAction
                           ? CircularProgressIndicator()
                           : _lockProvider.isLocked
-                              ? LockIcon(true, size: 100.0, color: Colors.white)
+                              ? LockIcon(true, size: 100.0, color: _iconColor)
                               : LockIcon(false,
-                                  size: 100.0, color: Colors.white)),
+                                  size: 100.0, color: _iconColor)),
                 ),
               ),
               SizedBox(

diff --git a/lib/traits/power_widget.dart b/lib/traits/power_widget.dart
@@ -6,8 +6,15 @@ import 'package:yonomi_device_widgets/ui/widget_style_constants.dart';
 
 class PowerWidget extends StatelessWidget {
   final PowerTraitProvider _powerTraitProvider;
+  late final Color _iconColor;
+  late final Color _textColor;
 
-  PowerWidget(this._powerTraitProvider);
+  PowerWidget(this._powerTraitProvider,
+      {Color iconColor = WidgetStyleConstants.deviceIconColor,
+      Color textColor = Colors.white}) {
+    this._iconColor = iconColor;
+    this._textColor = textColor;
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -24,7 +31,10 @@ class PowerWidget extends StatelessWidget {
             children: <Widget>[
               Text(
                 'POWER',
-                style: Theme.of(context).textTheme.headline6,
+                style: Theme.of(context)
+                    .textTheme
+                    .headline6
+                    ?.copyWith(color: _textColor),
               ),
             ],
           ),
@@ -37,7 +47,7 @@ class PowerWidget extends StatelessWidget {
                   width: 100,
                   height: 100,
                   child: PowerItemIcon(_powerTraitProvider.getOnOffState,
-                      size: 100.0, color: Colors.white)),
+                      size: 100.0, color: _iconColor)),
             ),
           ),
           SizedBox(

diff --git a/lib/ui/widget_style_constants.dart b/lib/ui/widget_style_constants.dart
@@ -17,6 +17,8 @@ class WidgetStyleConstants {
 
   static const Color textColorState = Color(0xFF00B3A6);
 
+  static const Color darkTextColor = Color(0xFF25262F);
+
   static TextStyle deviceItemTextPrimaryState = TextStyle(
       fontWeight: FontWeight.w900,
       color: WidgetStyleConstants.textColorState,