57-create-component---divider

app/CHANGELOG.md

@@ -7,16 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased](https://github.com/Orange-OpenSource/ouds-flutter/compare/0.2.0...develop)
 
 ### Added
-- [Library] `Switch` component (tokens library v0.11.0) ([##182](https://github.com/Orange-OpenSource/ouds-flutter/issues/#182)
-- [Tool] Added Dependabot configuration for automatic dependency updates ([#154](https://github.com/Orange-OpenSource/ouds-flutter/issues/154))
-- [Library] `Divider` component (tokens library v0.11.0) ([#151](https://github.com/Orange-OpenSource/ouds-flutter/issues/151))
+- [DemoApp][Library] Create component - `Divider` ([#57](https://github.com/Orange-OpenSource/ouds-flutter/issues/57))
 
 ### Changed
 - [DemoApp][Library] Refactor : create class global for icons names ([#152](https://github.com/Orange-OpenSource/ouds-flutter/issues/152))
 
-### Fixed
-
-- [DemoApp][Library] Clean project ouds_core ([#185](https://github.com/Orange-OpenSource/ouds-flutter/issues/185))
+### Added
+- [Library] `Switch` component (tokens library v0.11.0) ([##182](https://github.com/Orange-OpenSource/ouds-flutter/issues/#182)
+- [Tool] Added Dependabot configuration for automatic dependency updates ([#154](https://github.com/Orange-OpenSource/ouds-flutter/issues/154))
+- [Library] `Divider` component (tokens library v0.11.0) ([#151](https://github.com/Orange-OpenSource/ouds-flutter/issues/151))
 
 ## [0.2.0](https://github.com/Orange-OpenSource/ouds-flutter/compare/0.1.0...0.2.0) - 2025-05-13
 

app/lib/l10n/gen/ouds_flutter_app_localizations.dart

@@ -371,6 +371,12 @@ abstract class AppLocalizations {
   /// **'On colored background'**
   String get app_components_common_onColoredBackground_label;
 
+  /// No description provided for @app_components_common_color_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Color'**
+  String get app_components_common_color_label;
+
   /// No description provided for @app_components_button_label.
   ///
   /// In en, this message translates to:
@@ -508,6 +514,30 @@ abstract class AppLocalizations {
   /// In en, this message translates to:
   /// **'Open the app settings'**
   String get app_about_appSettings_label;
+
+  /// No description provided for @app_components_divider_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Divider'**
+  String get app_components_divider_label;
+
+  /// No description provided for @app_components_divider_description_text.
+  ///
+  /// In en, this message translates to:
+  /// **'A divider visually structures an interface by clearly separating content sections. It helps to improve readability and content organization without introducing a strong hierarchy like a heading or a container would.'**
+  String get app_components_divider_description_text;
+
+  /// No description provided for @app_components_divider_horizontalDivider_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Horizontal divider'**
+  String get app_components_divider_horizontalDivider_label;
+
+  /// No description provided for @app_components_divider_verticalDivider_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Vertical divider'**
+  String get app_components_divider_verticalDivider_label;
 }
 
 class _AppLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {

app/lib/l10n/gen/ouds_flutter_app_localizations_ar.dart

@@ -144,6 +144,9 @@ class AppLocalizationsAr extends AppLocalizations {
   @override
   String get app_components_common_onColoredBackground_label => 'على خلفية ملوّنة';
 
+  @override
+  String get app_components_common_color_label => 'اللون';
+
   @override
   String get app_components_button_label => 'زر';
 
@@ -212,4 +215,16 @@ class AppLocalizationsAr extends AppLocalizations {
 
   @override
   String get app_about_appSettings_label => 'افتح إعدادات التطبيق';
+
+  @override
+  String get app_components_divider_label => 'فاصل';
+
+  @override
+  String get app_components_divider_description_text => 'الفاصل ينظم واجهة المستخدم بصريًا عن طريق فصل أقسام المحتوى بوضوح. يساعد على تحسين قابلية القراءة وتنظيم المحتوى دون إضافة تسلسل هرمي قوي كما في العناوين أو الحاويات.';
+
+  @override
+  String get app_components_divider_horizontalDivider_label => 'فاصل أفقي';
+
+  @override
+  String get app_components_divider_verticalDivider_label => 'فاصل عمودي';
 }

app/lib/l10n/gen/ouds_flutter_app_localizations_en.dart

@@ -144,6 +144,9 @@ class AppLocalizationsEn extends AppLocalizations {
   @override
   String get app_components_common_onColoredBackground_label => 'On colored background';
 
+  @override
+  String get app_components_common_color_label => 'Color';
+
   @override
   String get app_components_button_label => 'Button';
 
@@ -212,4 +215,16 @@ class AppLocalizationsEn extends AppLocalizations {
 
   @override
   String get app_about_appSettings_label => 'Open the app settings';
+
+  @override
+  String get app_components_divider_label => 'Divider';
+
+  @override
+  String get app_components_divider_description_text => 'A divider visually structures an interface by clearly separating content sections. It helps to improve readability and content organization without introducing a strong hierarchy like a heading or a container would.';
+
+  @override
+  String get app_components_divider_horizontalDivider_label => 'Horizontal divider';
+
+  @override
+  String get app_components_divider_verticalDivider_label => 'Vertical divider';
 }

app/lib/l10n/ouds_flutter_ar.arb

@@ -61,6 +61,7 @@
   "app_components_common_style_label": "النمط",
   "app_components_common_text_label": "نص",
   "app_components_common_onColoredBackground_label": "على خلفية ملوّنة",
+  "app_components_common_color_label": "اللون",
 
   "@_components_button": {},
   "app_components_button_label": "زر",
@@ -91,5 +92,11 @@
   "app_about_legalInformation_label": "المعلومات القانونية",
   "app_about_materialComponents_label": "مكوّنات Material 3",
   "app_about_changelog_label": "سجل التغييرات",
-  "app_about_appSettings_label": "افتح إعدادات التطبيق"
+  "app_about_appSettings_label": "افتح إعدادات التطبيق",
+
+  "@_components_divider": {},
+  "app_components_divider_label": "فاصل",
+  "app_components_divider_description_text": "الفاصل ينظم واجهة المستخدم بصريًا عن طريق فصل أقسام المحتوى بوضوح. يساعد على تحسين قابلية القراءة وتنظيم المحتوى دون إضافة تسلسل هرمي قوي كما في العناوين أو الحاويات.",
+  "app_components_divider_horizontalDivider_label": "فاصل أفقي",
+  "app_components_divider_verticalDivider_label": "فاصل عمودي"
 }

app/lib/l10n/ouds_flutter_en.arb

@@ -61,6 +61,7 @@
   "app_components_common_style_label": "Style",
   "app_components_common_text_label": "Text",
   "app_components_common_onColoredBackground_label": "On colored background",
+  "app_components_common_color_label": "Color",
 
   "@_components_button": {},
   "app_components_button_label": "Button",
@@ -91,5 +92,12 @@
   "app_about_legalInformation_label": "Legal information",
   "app_about_materialComponents_label": "Material 3 components",
   "app_about_changelog_label": "Changelog",
-  "app_about_appSettings_label": "Open the app settings"
+  "app_about_appSettings_label": "Open the app settings",
+
+  "@_components_divider": {},
+  "app_components_divider_label": "Divider",
+  "app_components_divider_description_text": "A divider visually structures an interface by clearly separating content sections. It helps to improve readability and content organization without introducing a strong hierarchy like a heading or a container would.",
+  "app_components_divider_horizontalDivider_label": "Horizontal divider",
+  "app_components_divider_verticalDivider_label": "Vertical divider"
+
 }

app/lib/ui/about/about_screen.dart

@@ -162,7 +162,12 @@ class _AboutScreenState extends State<AboutScreen> {
               ),
               ListTile(
                   title: Text(context.l10n.app_about_appSettings_label,
-                      style: TextStyle(fontSize: currentTheme.fontTokens.sizeBodyLargeMobile, fontWeight: currentTheme.fontTokens.weightDefault, color: currentTheme.colorsScheme.contentBrandPrimary)),
+                      style: TextStyle(
+                          fontSize: currentTheme.fontTokens.sizeBodyLargeMobile,
+                          fontWeight: currentTheme.fontTokens.weightDefault,
+                          color: currentTheme.colorsScheme.contentBrandPrimary
+                      )
+                  ),
                   onTap: () {
                     SettingsHelper.openAppropriateSettings();
                   }),

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

@@ -12,7 +12,9 @@
 
 import 'package:flutter/material.dart';
 import 'package:ouds_core/components/button/ouds_button.dart';
+import 'package:ouds_core/components/lists/ouds_list_switch.dart';
 import 'package:ouds_core/components/ouds_colored_box.dart';
+import 'package:ouds_core/components/sheets_bottom/ouds_sheets_bottom.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/button/button_code_generator.dart';
@@ -24,9 +26,7 @@ import 'package:ouds_flutter_demo/ui/utilities/code.dart';
 import 'package:ouds_flutter_demo/ui/utilities/component_screen_header.dart';
 import 'package:ouds_flutter_demo/ui/utilities/customizable/customizable_chips.dart';
 import 'package:ouds_flutter_demo/ui/utilities/customizable/customizable_section.dart';
-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:provider/provider.dart';
 
 /// This screen displays a button demo and allows customization of button properties
@@ -146,7 +146,7 @@ class _CustomizationContentState extends State<_CustomizationContent> {
 
     return CustomizableSection(
       children: [
-        CustomizableSwitch(
+        OudsListSwitch(
           title: context.l10n.app_common_enabled_label,
           value: customizationState!.hasEnabled,
           onChanged:
@@ -158,7 +158,7 @@ class _CustomizationContentState extends State<_CustomizationContent> {
                       customizationState.hasEnabled = value;
                     },
         ),
-        CustomizableSwitch(
+        OudsListSwitch(
           title: context.l10n.app_components_common_onColoredBackground_label,
           value: customizationState.hasOnColoredBox,
           onChanged:

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

@@ -12,17 +12,17 @@
 
 import 'package:flutter/material.dart';
 import 'package:ouds_core/components/checkbox/ouds_checkbox.dart';
+import 'package:ouds_core/components/lists/ouds_list_switch.dart';
 import 'package:ouds_core/components/ouds_colored_box.dart';
+import 'package:ouds_core/components/sheets_bottom/ouds_sheets_bottom.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';
 import 'package:ouds_flutter_demo/ui/components/checkbox/checkbox_customization.dart';
 import 'package:ouds_flutter_demo/ui/theme/theme_controller.dart';
 import 'package:ouds_flutter_demo/ui/utilities/code.dart';
 import 'package:ouds_flutter_demo/ui/utilities/customizable/customizable_section.dart';
-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:provider/provider.dart';
 
 /// This screen displays a checkbox demo and allows customization of checkbox properties
@@ -173,7 +173,7 @@ class _CustomizationContentState extends State<_CustomizationContent> {
 
     return CustomizableSection(
       children: [
-        CustomizableSwitch(
+        OudsListSwitch(
           title: context.l10n.app_common_enabled_label,
           value: customizationState!.hasEnabled,
           onChanged:
@@ -185,7 +185,7 @@ class _CustomizationContentState extends State<_CustomizationContent> {
                       customizationState.hasEnabled = value;
                     },
         ),
-        CustomizableSwitch(
+        OudsListSwitch(
           title: context.l10n.app_components_common_error_label,
           value: customizationState.hasError,
           onChanged:

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

@@ -12,7 +12,9 @@
 
 import 'package:flutter/material.dart';
 import 'package:ouds_core/components/checkbox/ouds_checkbox_item.dart';
+import 'package:ouds_core/components/lists/ouds_list_switch.dart';
 import 'package:ouds_core/components/ouds_colored_box.dart';
+import 'package:ouds_core/components/sheets_bottom/ouds_sheets_bottom.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';
@@ -22,10 +24,8 @@ import 'package:ouds_flutter_demo/ui/components/control_item/control_item_enum.d
 import 'package:ouds_flutter_demo/ui/theme/theme_controller.dart';
 import 'package:ouds_flutter_demo/ui/utilities/code.dart';
 import 'package:ouds_flutter_demo/ui/utilities/customizable/customizable_section.dart';
-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/detail_screen_header.dart';
-import 'package:ouds_flutter_demo/ui/utilities/sheets_bottom/ouds_sheets_bottom.dart';
 import 'package:provider/provider.dart';
 
 /// This screen displays a checkbox demo and allows customization of checkbox properties.
@@ -184,7 +184,7 @@ class _CustomizationContentState extends State<_CustomizationContent> {
 
     return CustomizableSection(
       children: [
-        CustomizableSwitch(
+        OudsListSwitch(
           title: context.l10n.app_components_controlItem_icon_label,
           value: customizationState!.hasIcon,
           onChanged: (value) {
@@ -193,7 +193,7 @@ class _CustomizationContentState extends State<_CustomizationContent> {
             });
           },
         ),
-        CustomizableSwitch(
+        OudsListSwitch(
           title: context.l10n.app_components_controlItem_divider_label,
           value: customizationState.hasDivider,
           onChanged: (value) {
@@ -202,7 +202,7 @@ class _CustomizationContentState extends State<_CustomizationContent> {
             });
           },
         ),
-        CustomizableSwitch(
+        OudsListSwitch(
           title: context.l10n.app_components_controlItem_reversed_label,
           value: customizationState.hasReversed,
           onChanged: (value) {
@@ -211,7 +211,7 @@ class _CustomizationContentState extends State<_CustomizationContent> {
             });
           },
         ),
-        CustomizableSwitch(
+        OudsListSwitch(
           title: context.l10n.app_common_enabled_label,
           value: customizationState.hasEnabled,
           onChanged: customizationState.isEnabledWhenError || customizationState.isEnabledWhenReadOnly
@@ -222,7 +222,7 @@ class _CustomizationContentState extends State<_CustomizationContent> {
                   });
                 },
         ),
-        CustomizableSwitch(
+        OudsListSwitch(
           title: context.l10n.app_components_controlItem_readOnly_label,
           value: customizationState.hasReadOnly,
           onChanged: customizationState.isReadOnlyWhenError || customizationState.isReadOnlyWhenEnabled
@@ -233,7 +233,7 @@ class _CustomizationContentState extends State<_CustomizationContent> {
                   });
                 },
         ),
-        CustomizableSwitch(
+        OudsListSwitch(
           title: context.l10n.app_components_common_error_label,
           value: customizationState.hasError,
           onChanged: customizationState.isErrorWhenEnabled || customizationState.isErrorWhenReadOnly

app/lib/ui/components/components.dart

@@ -16,6 +16,7 @@ import 'package:ouds_flutter_demo/ui/components/button/button_demo_screen.dart';
 import 'package:ouds_flutter_demo/ui/components/checkbox/checkbox_demo_screen.dart';
 import 'package:ouds_flutter_demo/ui/components/checkbox/checkbox_item_demo_screen.dart';
 import 'package:ouds_flutter_demo/ui/components/component_entities.dart';
+import 'package:ouds_flutter_demo/ui/components/divider/divider_demo_screen.dart';
 import 'package:ouds_flutter_demo/ui/utilities/adaptive_image_helper.dart';
 import 'package:ouds_flutter_demo/ui/utilities/app_assets.dart';
 
@@ -50,5 +51,16 @@ List<Component> components(BuildContext context) {
         ),
       ],
     ),
+    Component.withVariant(
+        context.l10n.app_components_divider_label, AdaptiveImageHelper.getImage(context, AppAssets.images.ilComponentsDivider), context.l10n.app_components_divider_description_text, [
+      VariantComponent(
+        context.l10n.app_components_divider_horizontalDivider_label,
+        DividerDemoScreen(vertical: false),
+      ),
+      VariantComponent(
+        context.l10n.app_components_divider_verticalDivider_label,
+        DividerDemoScreen(vertical: true),
+      ),
+    ])
   ];
 }

app/lib/ui/components/components_screen.dart

@@ -12,13 +12,15 @@
 
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
+import 'package:ouds_core/components/cards/ouds_cards_common.dart';
+import 'package:ouds_core/components/cards/ouds_vertical_image_first_card.dart';
 import 'package:ouds_flutter_demo/ui/components/component_entities.dart';
 import 'package:ouds_flutter_demo/ui/components/component_variants_screen.dart';
 import 'package:ouds_flutter_demo/ui/theme/theme_controller.dart';
-import 'package:ouds_flutter_demo/ui/utilities/cards/ouds_cards_common.dart';
-import 'package:ouds_flutter_demo/ui/utilities/cards/ouds_vertical_image_first_card.dart';
 import 'package:provider/provider.dart';
 
+import 'package:ouds_flutter_demo/ui/components/component_variants_screen.dart';
+
 class ComponentsScreen extends StatelessWidget {
   final List<Component> oudsComponents;