feat: add themeboxcolored for lightDark mode (#223)(#233)

* feat: add themeboxcolored for lightDark mode

* feat: Add ThemeBox to Checkbox

* feat: Add ThemeBox for component divider

* feat: Add ThemeBox component RadioButton

* feat: change Column by CustomizableSection

* feat: replace Divider by OudsDivider

* review: fix listen controller to rebuild widget

* review: fix import in ouds control item

* review: change CustomizableSection by Column

* feat: Add ChangeLog

* fix: enabled state button ouds

* feat: replace imports

* review: fix some error token and fix changelog

---------

Co-authored-by: Ahmed Amine Zribi <ahmedamine.zribi@sofrecom>
Co-authored-by: Tayeb Sedraia <tayeb.sedraia@orange.com>

Author: 3 people

app/CHANGELOG.md

@@ -7,13 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased](https://github.com/Orange-OpenSource/ouds-flutter/compare/0.3.0...develop)
 
 ### Added
+- [DemoApp] Display components in both light/dark mode ([#223](https://github.com/Orange-OpenSource/ouds-flutter/issues/223))
 - [DemoApp] Add token version in About page and documentation ([#142](https://github.com/Orange-OpenSource/ouds-flutter/issues/#142))
 
 ### Changed
 - [DemoApp][Library] Update tokens 1.1.0 ([#225](https://github.com/Orange-OpenSource/ouds-flutter/issues/225))
 
 ### Fixed
-
 - [DemoApp][Library] Delayed pressed state ([#220](https://github.com/Orange-OpenSource/ouds-flutter/issues/220))
 - [DemoApp] Update cards backgrounds token ([#204](https://github.com/Orange-OpenSource/ouds-flutter/issues/204))
 - [DemoApp][Library] Token `size` values now adapt based on device type ([#218](https://github.com/Orange-OpenSource/ouds-flutter/issues/218))

app/lib/ui/components/button/button_demo_screen.dart

@@ -27,6 +27,7 @@ import 'package:ouds_flutter_demo/ui/utilities/customizable/customizable_section
 import 'package:ouds_flutter_demo/ui/utilities/customizable/customizable_switch.dart';
 import 'package:ouds_flutter_demo/ui/utilities/customizable/customizable_textfield.dart';
 import 'package:ouds_flutter_demo/ui/utilities/sheets_bottom/ouds_sheets_bottom.dart';
+import 'package:ouds_flutter_demo/ui/utilities/theme_colored_box.dart';
 import 'package:provider/provider.dart';
 
 /// This screen displays a button demo and allows customization of button properties
@@ -107,23 +108,53 @@ class _ButtonDemoState extends State<_ButtonDemo> {
   @override
   Widget build(BuildContext context) {
     customizationState = ButtonCustomization.of(context);
-    themeController = Provider.of<ThemeController>(context, listen: false);
+    themeController = Provider.of<ThemeController>(context, listen: true);
 
     // Adding post-frame callback to update theme based on customization state
     WidgetsBinding.instance.addPostFrameCallback((_) {
       themeController?.setOnColoredSurface(customizationState?.hasOnColoredBox);
     });
 
-    return OudsColoredBox(
-      color: customizationState?.hasOnColoredBox == true ? OudsColoredBoxColor.brandPrimary : OudsColoredBoxColor.statusNeutralMuted,
-      child: OudsButton(
-        label: ButtonCustomizationUtils.getText(customizationState),
-        icon: ButtonCustomizationUtils.getIcon(customizationState),
-        hierarchy: ButtonCustomizationUtils.getHierarchy(customizationState?.selectedHierarchy as Object),
-        style: ButtonCustomizationUtils.getStyle(customizationState?.selectedStyle as Object),
-        onPressed: customizationState?.hasEnabled == true ? () {} : null,
-      ),
-    );
+    if (customizationState?.hasOnColoredBox == true) {
+      return OudsColoredBox(
+        color: customizationState?.hasOnColoredBox == true ? OudsColoredBoxColor.brandPrimary : OudsColoredBoxColor.statusNeutralMuted,
+        child: OudsButton(
+          label: ButtonCustomizationUtils.getText(customizationState),
+          icon: ButtonCustomizationUtils.getIcon(customizationState),
+          hierarchy: ButtonCustomizationUtils.getHierarchy(customizationState?.selectedHierarchy as Object),
+          style: ButtonCustomizationUtils.getStyle(customizationState?.selectedStyle as Object),
+          onPressed: customizationState?.hasEnabled == true ? () {} : null,
+        ),
+      );
+    } else {
+      return Column(
+        children: [
+          /// [themeMode] we test here theme of system and inverse theme mode if is not dark
+          ThemeBox(
+            themeContract: themeController!.currentTheme,
+            themeMode: themeController!.isInverseDarkTheme ? ThemeMode.light : ThemeMode.dark,
+            child: OudsButton(
+              label: ButtonCustomizationUtils.getText(customizationState),
+              icon: ButtonCustomizationUtils.getIcon(customizationState),
+              hierarchy: ButtonCustomizationUtils.getHierarchy(customizationState?.selectedHierarchy as Object),
+              style: ButtonCustomizationUtils.getStyle(customizationState?.selectedStyle as Object),
+              onPressed: customizationState?.hasEnabled == true ? () {} : null,
+            ),
+          ),
+          ThemeBox(
+            themeContract: themeController!.currentTheme,
+            themeMode: themeController!.isInverseDarkTheme ? ThemeMode.dark : ThemeMode.light,
+            child: OudsButton(
+              label: ButtonCustomizationUtils.getText(customizationState),
+              icon: ButtonCustomizationUtils.getIcon(customizationState),
+              hierarchy: ButtonCustomizationUtils.getHierarchy(customizationState?.selectedHierarchy as Object),
+              style: ButtonCustomizationUtils.getStyle(customizationState?.selectedStyle as Object),
+              onPressed: customizationState?.hasEnabled == true ? () {} : null,
+            ),
+          )
+        ],
+      );
+    }
   }
 }
 

app/lib/ui/components/checkbox/checkbox_demo_screen.dart

@@ -12,7 +12,6 @@
 
 import 'package:flutter/material.dart';
 import 'package:ouds_core/components/checkbox/ouds_checkbox.dart';
-import 'package:ouds_core/components/ouds_colored_box.dart';
 import 'package:ouds_flutter_demo/l10n/app_localizations.dart';
 import 'package:ouds_flutter_demo/main_app_bar.dart';
 import 'package:ouds_flutter_demo/ui/components/checkbox/checkbox_code_generator.dart';
@@ -23,6 +22,7 @@ import 'package:ouds_flutter_demo/ui/utilities/customizable/customizable_section
 import 'package:ouds_flutter_demo/ui/utilities/customizable/customizable_switch.dart';
 import 'package:ouds_flutter_demo/ui/utilities/detail_screen_header.dart';
 import 'package:ouds_flutter_demo/ui/utilities/sheets_bottom/ouds_sheets_bottom.dart';
+import 'package:ouds_flutter_demo/ui/utilities/theme_colored_box.dart';
 import 'package:provider/provider.dart';
 
 /// This screen displays a checkbox demo and allows customization of checkbox properties
@@ -82,7 +82,7 @@ class _Body extends StatefulWidget {
 class _BodyState extends State<_Body> {
   @override
   Widget build(BuildContext context) {
-    ThemeController? themeController = Provider.of<ThemeController>(context, listen: false);
+    ThemeController? themeController = Provider.of<ThemeController>(context, listen: true);
     return DetailScreenDescription(
       widget: Column(
         children: [
@@ -110,47 +110,91 @@ class _CheckboxDemo extends StatefulWidget {
 }
 
 class _CheckboxDemoState extends State<_CheckboxDemo> {
-  ThemeController? themeController;
   bool? isCheckedFirst = false;
   bool? isCheckedSecond = false;
 
   CheckboxCustomizationState? customizationState;
+  ThemeController? themeController;
 
   @override
   Widget build(BuildContext context) {
     customizationState = CheckboxCustomization.of(context);
+    themeController = Provider.of<ThemeController>(context, listen: false);
 
-    return OudsColoredBox(
-      color: OudsColoredBoxColor.statusNeutralMuted,
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          OudsCheckbox(
-            value: isCheckedFirst,
-            onChanged: customizationState?.hasEnabled == true
-                ? (bool? newValue) {
-                    setState(() {
-                      isCheckedFirst = newValue;
-                    });
-                  }
-                : null,
-            isError: customizationState!.hasError,
-            tristate: widget.indeterminate,
+    // Adding post-frame callback to update theme based on customization state
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      themeController?.setOnColoredSurface(customizationState?.hasOnColoredBox);
+    });
+
+    return Column(
+      children: [
+        ThemeBox(
+          themeContract: themeController!.currentTheme,
+          themeMode: themeController!.isInverseDarkTheme ? ThemeMode.light : ThemeMode.dark,
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              OudsCheckbox(
+                value: isCheckedFirst,
+                onChanged: customizationState?.hasEnabled == true
+                    ? (bool? newValue) {
+                        setState(() {
+                          isCheckedFirst = newValue;
+                        });
+                      }
+                    : null,
+                isError: customizationState!.hasError,
+                tristate: widget.indeterminate,
+              ),
+              OudsCheckbox(
+                value: isCheckedSecond,
+                onChanged: customizationState?.hasEnabled == true
+                    ? (bool? newValue) {
+                        setState(() {
+                          isCheckedSecond = newValue;
+                        });
+                      }
+                    : null,
+                isError: customizationState!.hasError ? true : false,
+                tristate: widget.indeterminate,
+              ),
+            ],
           ),
-          OudsCheckbox(
-            value: isCheckedSecond,
-            onChanged: customizationState?.hasEnabled == true
-                ? (bool? newValue) {
-                    setState(() {
-                      isCheckedSecond = newValue;
-                    });
-                  }
-                : null,
-            isError: customizationState!.hasError ? true : false,
-            tristate: widget.indeterminate,
+        ),
+        ThemeBox(
+          themeContract: themeController!.currentTheme,
+          themeMode: themeController!.isInverseDarkTheme ? ThemeMode.dark : ThemeMode.light,
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              OudsCheckbox(
+                value: isCheckedFirst,
+                onChanged: customizationState?.hasEnabled == true
+                    ? (bool? newValue) {
+                        setState(() {
+                          isCheckedFirst = newValue;
+                        });
+                      }
+                    : null,
+                isError: customizationState!.hasError,
+                tristate: widget.indeterminate,
+              ),
+              OudsCheckbox(
+                value: isCheckedSecond,
+                onChanged: customizationState?.hasEnabled == true
+                    ? (bool? newValue) {
+                        setState(() {
+                          isCheckedSecond = newValue;
+                        });
+                      }
+                    : null,
+                isError: customizationState!.hasError ? true : false,
+                tristate: widget.indeterminate,
+              ),
+            ],
           ),
-        ],
-      ),
+        ),
+      ],
     );
   }
 }

app/lib/ui/components/checkbox/checkbox_item_demo_screen.dart

@@ -12,7 +12,6 @@
 
 import 'package:flutter/material.dart';
 import 'package:ouds_core/components/checkbox/ouds_checkbox_item.dart';
-import 'package:ouds_core/components/ouds_colored_box.dart';
 import 'package:ouds_flutter_demo/l10n/app_localizations.dart';
 import 'package:ouds_flutter_demo/main_app_bar.dart';
 import 'package:ouds_flutter_demo/ui/components/control_item/control_item_code_generator.dart';
@@ -27,6 +26,7 @@ import 'package:ouds_flutter_demo/ui/utilities/customizable/customizable_switch.
 import 'package:ouds_flutter_demo/ui/utilities/customizable/customizable_textfield.dart';
 import 'package:ouds_flutter_demo/ui/utilities/detail_screen_header.dart';
 import 'package:ouds_flutter_demo/ui/utilities/sheets_bottom/ouds_sheets_bottom.dart';
+import 'package:ouds_flutter_demo/ui/utilities/theme_colored_box.dart';
 import 'package:provider/provider.dart';
 
 /// This screen displays a checkbox demo and allows customization of checkbox properties.
@@ -54,7 +54,8 @@ class _ControlItemDemoScreenState extends State<ControlItemDemoScreen> {
     return ControlItemCustomization(
       child: Scaffold(
         key: _scaffoldKey,
-        appBar: widget.indeterminate ? MainAppBar(title: context.l10n.app_components_checkbox_indeterminateCheckboxItem_label) : MainAppBar(title: context.l10n.app_components_checkbox_checkboxItem_label),
+        appBar:
+            widget.indeterminate ? MainAppBar(title: context.l10n.app_components_checkbox_indeterminateCheckboxItem_label) : MainAppBar(title: context.l10n.app_components_checkbox_checkboxItem_label),
         body: SafeArea(
           child: ExcludeSemantics(
             excluding: !_isBottomSheetExpanded,
@@ -84,7 +85,7 @@ class _Body extends StatefulWidget {
 class _BodyState extends State<_Body> {
   @override
   Widget build(BuildContext context) {
-    final themeController = Provider.of<ThemeController>(context, listen: false);
+    final themeController = Provider.of<ThemeController>(context, listen: true);
     return DetailScreenDescription(
       widget: Column(
         children: [
@@ -114,16 +115,25 @@ class _CheckboxItemDemoState extends State<_CheckboxItemDemo> {
   bool? isCheckedSecond = false;
 
   ControlItemCustomizationState? customizationState;
+  ThemeController? themeController;
 
   @override
   Widget build(BuildContext context) {
     customizationState = ControlItemCustomization.of(context);
-    return OudsColoredBox(
-      color: OudsColoredBoxColor.statusNeutralMuted,
-      child: Column(
-        children: [
-          Center(
-            child: OudsCheckboxItem(
+    themeController = Provider.of<ThemeController>(context, listen: false);
+
+    // Adding post-frame callback to update theme based on customization state
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      themeController?.setOnColoredSurface(customizationState?.hasOnColoredBox);
+    });
+
+    return Column(children: [
+      ThemeBox(
+        themeContract: themeController!.currentTheme,
+        themeMode: themeController!.isInverseDarkTheme ? ThemeMode.light : ThemeMode.dark,
+        child: Column(
+          children: [
+            OudsCheckboxItem(
               value: isCheckedFirst,
               onChanged: customizationState!.hasEnabled
                   ? (bool? newValue) {
@@ -141,28 +151,72 @@ class _CheckboxItemDemoState extends State<_CheckboxItemDemo> {
               divider: customizationState!.hasDivider ? true : false,
               tristate: widget.indeterminate,
             ),
-          ),
-          OudsCheckboxItem(
-            value: isCheckedSecond,
-            onChanged: customizationState!.hasEnabled
-                ? (bool? newValue) {
-                    setState(() {
-                      isCheckedSecond = newValue;
-                    });
-                  }
-                : null,
-            title: ControlItemCustomizationUtils.getLabelText(customizationState!),
-            helperTitle: ControlItemCustomizationUtils.getHelperLabelText(customizationState!),
-            reversed: customizationState!.hasReversed ? true : false,
-            readOnly: customizationState!.hasReadOnly ? true : false,
-            icon: customizationState!.hasIcon ? AppAssets.icons.icHeart : null,
-            isError: customizationState!.hasError ? true : false,
-            divider: customizationState!.hasDivider ? true : false,
-            tristate: widget.indeterminate,
-          ),
-        ],
+            OudsCheckboxItem(
+              value: isCheckedSecond,
+              onChanged: customizationState!.hasEnabled
+                  ? (bool? newValue) {
+                      setState(() {
+                        isCheckedSecond = newValue;
+                      });
+                    }
+                  : null,
+              title: ControlItemCustomizationUtils.getLabelText(customizationState!),
+              helperTitle: ControlItemCustomizationUtils.getHelperLabelText(customizationState!),
+              reversed: customizationState!.hasReversed ? true : false,
+              readOnly: customizationState!.hasReadOnly ? true : false,
+              icon: customizationState!.hasIcon ? AppAssets.icons.icHeart : null,
+              isError: customizationState!.hasError ? true : false,
+              divider: customizationState!.hasDivider ? true : false,
+              tristate: widget.indeterminate,
+            ),
+          ],
+        ),
       ),
-    );
+      ThemeBox(
+        themeContract: themeController!.currentTheme,
+        themeMode: themeController!.isInverseDarkTheme ? ThemeMode.dark : ThemeMode.light,
+        child: Column(
+          children: [
+            OudsCheckboxItem(
+              value: isCheckedFirst,
+              onChanged: customizationState!.hasEnabled
+                  ? (bool? newValue) {
+                      setState(() {
+                        isCheckedFirst = newValue;
+                      });
+                    }
+                  : null,
+              title: ControlItemCustomizationUtils.getLabelText(customizationState!),
+              helperTitle: ControlItemCustomizationUtils.getHelperLabelText(customizationState!),
+              reversed: customizationState!.hasReversed ? true : false,
+              readOnly: customizationState!.hasReadOnly ? true : false,
+              icon: customizationState!.hasIcon ? AppAssets.icons.icHeart : null,
+              isError: customizationState!.hasError ? true : false,
+              divider: customizationState!.hasDivider ? true : false,
+              tristate: widget.indeterminate,
+            ),
+            OudsCheckboxItem(
+              value: isCheckedSecond,
+              onChanged: customizationState!.hasEnabled
+                  ? (bool? newValue) {
+                      setState(() {
+                        isCheckedSecond = newValue;
+                      });
+                    }
+                  : null,
+              title: ControlItemCustomizationUtils.getLabelText(customizationState!),
+              helperTitle: ControlItemCustomizationUtils.getHelperLabelText(customizationState!),
+              reversed: customizationState!.hasReversed ? true : false,
+              readOnly: customizationState!.hasReadOnly ? true : false,
+              icon: customizationState!.hasIcon ? AppAssets.icons.icHeart : null,
+              isError: customizationState!.hasError ? true : false,
+              divider: customizationState!.hasDivider ? true : false,
+              tristate: widget.indeterminate,
+            ),
+          ],
+        ),
+      )
+    ]);
   }
 }