Skip to content

Commit bc89971

Browse files
AhmedAmineZrAhmedAmineZr
committed
chore: update list item component
1 parent 77e238b commit bc89971

13 files changed

Lines changed: 765 additions & 675 deletions

‎app/lib/ui/components/list_item/list_item_customization_utils.dart‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import 'package:flutter/material.dart';
1515
import 'package:ouds_core/components/avatar/ouds_avatar.dart';
1616
import 'package:ouds_core/components/badge/ouds_badge.dart';
1717
import 'package:ouds_core/components/common/ouds_icon_status.dart';
18+
import 'package:ouds_core/components/list_item/internal/ouds_list_item_types.dart';
1819
import 'package:ouds_core/components/list_item/leading/ouds_list_item_leading.dart';
1920
import 'package:ouds_core/components/list_item/ouds_list_item.dart';
2021
import 'package:ouds_core/components/list_item/ouds_small_list_item.dart';
@@ -75,11 +76,6 @@ class ListItemCustomizationUtils {
7576
ListItemContentAlignmentEnum.center => OudsListItemContentAlignment.center,
7677
};
7778

78-
static OudsListItemDecoration getDecoration(bool background, bool divider) {
79-
if (background) return OudsListItemDecorationBackground(divider: divider);
80-
return OudsListItemDecorationNone(divider: divider);
81-
}
82-
8379
static OudsListItemLeading? getLeading(
8480
ListItemLeadingEnum leading,
8581
OudsIconStatus iconStatus,
@@ -167,11 +163,12 @@ class ListItemCustomizationUtils {
167163
description: emptyToNull(state.description),
168164
leading: getLeading(state.leading, iconStatus),
169165
trailing: getTrailing(state.trailing, iconStatus),
170-
decoration: getDecoration(state.background, state.divider),
166+
divider: state.divider,
167+
background: state.background,
171168
helperText: emptyToNull(state.helperText),
172169
boldLabel: state.boldLabel,
173170
enable: state.enable,
174-
onTap: state.enable ? () {} : null,
171+
onTap: () {},
175172
indicator: getIndicator(state.indicator),
176173
);
177174
}
@@ -187,11 +184,12 @@ class ListItemCustomizationUtils {
187184
description: emptyToNull(state.description),
188185
leading: getSmallLeading(state.leading, iconStatus),
189186
trailing: getSmallTrailing(state.trailing, iconStatus),
190-
decoration: getDecoration(state.background, state.divider),
187+
divider: state.divider,
188+
background: state.background,
191189
helperText: emptyToNull(state.helperText),
192190
boldLabel: state.boldLabel,
193191
enable: state.enable,
194-
onTap: state.enable ? () {} : null,
192+
onTap: () {},
195193
indicator: getIndicator(state.indicator),
196194
);
197195
}
@@ -210,7 +208,8 @@ class ListItemCustomizationUtils {
210208
description: emptyToNull(state.description),
211209
leading: getLeading(state.leading, iconStatus),
212210
trailing: getTrailing(state.trailing, iconStatus),
213-
decoration: getDecoration(state.background, state.divider),
211+
divider: state.divider,
212+
background: state.background,
214213
helperText: emptyToNull(state.helperText),
215214
boldLabel: state.boldLabel,
216215
enable: state.enable,
@@ -228,7 +227,8 @@ class ListItemCustomizationUtils {
228227
description: emptyToNull(state.description),
229228
leading: getSmallLeading(state.leading, iconStatus),
230229
trailing: getSmallTrailing(state.trailing, iconStatus),
231-
decoration: getDecoration(state.background, state.divider),
230+
divider: state.divider,
231+
background: state.background,
232232
helperText: emptyToNull(state.helperText),
233233
boldLabel: state.boldLabel,
234234
enable: state.enable,

‎ouds_core/lib/components/list_item/internal/ouds_list_item_asset_builder.dart‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
// Software Name: OUDS Flutter
2+
// SPDX-FileCopyrightText: Copyright (c) Orange SA
3+
// SPDX-License-Identifier: MIT
4+
//
5+
// This software is distributed under the MIT license,
6+
// the text of which is available at https://opensource.org/license/MIT/
7+
// or see the "LICENSE" file for more details.
8+
//
9+
// Software description: Flutter library of reusable graphical components
10+
11+
import 'package:flutter/material.dart';
12+
import 'package:flutter_svg/flutter_svg.dart';
13+
import 'package:ouds_core/components/common/ouds_icon_status.dart';
14+
import 'package:ouds_core/components/list_item/internal/ouds_list_item_foreground_modifier.dart';
15+
import 'package:ouds_core/components/list_item/internal/ouds_list_item_icon_modifier.dart';
16+
import 'package:ouds_core/components/list_item/internal/ouds_list_item_indicator_modifier.dart';
17+
import 'package:ouds_core/components/list_item/internal/ouds_list_item_state.dart';
18+
import 'package:ouds_core/components/list_item/internal/ouds_list_item_types.dart';
19+
import 'package:ouds_theme_contract/ouds_theme.dart';
20+
21+
/// Shared widget builders for [OudsListItem] visual assets.
22+
///
23+
/// This utility avoids duplicating the same image/flag/video/icon rendering
24+
/// logic across standard and small list item implementations.
25+
class OudsListItemAssetBuilder {
26+
OudsListItemAssetBuilder._();
27+
28+
/// Builds an image using list-item token sizes and [format] ratio.
29+
static Widget buildImage(
30+
BuildContext context,
31+
ImageProvider asset,
32+
OudsListItemAssetSize size,
33+
OudsListItemImageFormat format,
34+
) {
35+
final height = size.value(context);
36+
final width = height * format.ratio;
37+
return Image(image: asset, width: width, height: height, fit: BoxFit.cover);
38+
}
39+
40+
/// Builds a medium flag image with fixed radius and token-defined dimensions.
41+
static Widget buildFlag(BuildContext context, ImageProvider asset) {
42+
final tokens = OudsTheme.of(context).componentsTokens(context).listItem;
43+
return ClipRRect(
44+
borderRadius: BorderRadius.circular(2),
45+
child: Image(
46+
image: asset,
47+
width: tokens.sizeAssetMedium,
48+
height: tokens.sizeFlagHeight,
49+
fit: BoxFit.cover,
50+
),
51+
);
52+
}
53+
54+
/// Builds a video placeholder icon using token-defined size.
55+
///
56+
/// - [size] — defaults to [OudsListItemAssetSize.medium].
57+
/// - [enable] — when `false`, the icon is rendered in its disabled appearance.
58+
static Widget buildVideoPlaceholder(
59+
BuildContext context, {
60+
OudsListItemAssetSize size = OudsListItemAssetSize.medium,
61+
bool enable = true,
62+
}) {
63+
final resolvedSize = size.value(context);
64+
return SizedBox(
65+
width: resolvedSize,
66+
height: resolvedSize,
67+
child: Icon(
68+
Icons.play_circle_outline,
69+
color: OudsListItemForegroundModifier(context).contentColor(enable),
70+
),
71+
);
72+
}
73+
74+
/// Builds a tinted SVG icon asset used as a navigation indicator (chevron/external link).
75+
///
76+
/// - [listItemState] — full interaction state, used for hover/pressed/focused colors.
77+
/// - [enable] — when `false`, the icon is tinted with `contentDisabled` so it
78+
/// remains visible against the background (consistent with [buildIcon]).
79+
static Widget buildIndicatorIcon(
80+
BuildContext context,
81+
String assetName,
82+
OudsListItemAssetSize size,
83+
OudsListItemControlState listItemState,
84+
String? packageName, {
85+
bool enable = true,
86+
}) {
87+
final color = enable
88+
? OudsListItemIndicatorModifier(context).indicatorColor(listItemState)
89+
: OudsTheme.of(context).colorScheme(context).contentDisabled;
90+
91+
return SvgPicture.asset(
92+
assetName,
93+
width: size.value(context),
94+
height: size.value(context),
95+
colorFilter: ColorFilter.mode(color, BlendMode.srcIn),
96+
package: packageName,
97+
excludeFromSemantics: true,
98+
);
99+
}
100+
101+
/// Builds a status icon widget for a list-item leading or trailing slot.
102+
///
103+
/// This is the list-item equivalent of [OudsTextInput.buildIcon].
104+
///
105+
/// - [iconStatus] — the [OudsIconStatus] that determines the icon asset and color.
106+
/// - [enable] — when `false`, the icon is rendered in its disabled appearance.
107+
/// - [size] — controls rendered dimensions using token values.
108+
/// Defaults to [OudsListItemAssetSize.medium].
109+
/// - [tinted] — when `false`, no color filter is applied (useful for
110+
/// multicolor icons). Defaults to `true`.
111+
///
112+
/// Example:
113+
/// ```dart
114+
/// OudsListItemAssetBuilder.buildIcon(
115+
/// context,
116+
/// Neutral(icon: 'assets/icons/star.svg'),
117+
/// enable: true,
118+
/// size: OudsListItemAssetSize.medium,
119+
/// tinted: true,
120+
/// )
121+
/// ```
122+
static Widget buildIcon(
123+
BuildContext context,
124+
OudsIconStatus iconStatus, {
125+
bool enable = true,
126+
OudsListItemAssetSize size = OudsListItemAssetSize.medium,
127+
bool tinted = true,
128+
}) {
129+
return OudsListItemIconModifier(
130+
context,
131+
).buildIcon(iconStatus, enable: enable, size: size, tinted: tinted);
132+
}
133+
}

‎ouds_core/lib/components/list_item/internal/ouds_list_item_background_modifier.dart‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
1-
/*
2-
* // Software Name: OUDS Flutter
3-
* // SPDX-FileCopyrightText: Copyright (c) Orange SA
4-
* // SPDX-License-Identifier: MIT
5-
* //
6-
* // This software is distributed under the MIT license,
7-
* // the text of which is available at https://opensource.org/license/MIT/
8-
* // or see the "LICENSE" file for more details.
9-
* //
10-
* // Software description: Flutter library of reusable graphical components
11-
* //
12-
*/
1+
// Software Name: OUDS Flutter
2+
// SPDX-FileCopyrightText: Copyright (c) Orange SA
3+
// SPDX-License-Identifier: MIT
4+
//
5+
// This software is distributed under the MIT license,
6+
// the text of which is available at https://opensource.org/license/MIT/
7+
// or see the "LICENSE" file for more details.
8+
//
9+
// Software description: Flutter library of reusable graphical components
1310

1411
import 'package:flutter/material.dart';
1512
import 'package:ouds_core/components/list_item/internal/ouds_list_item_state.dart';

‎ouds_core/lib/components/list_item/internal/ouds_list_item_foreground_modifier.dart‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
1-
/*
2-
* // Software Name: OUDS Flutter
3-
* // SPDX-FileCopyrightText: Copyright (c) Orange SA
4-
* // SPDX-License-Identifier: MIT
5-
* //
6-
* // This software is distributed under the MIT license,
7-
* // the text of which is available at https://opensource.org/license/MIT/
8-
* // or see the "LICENSE" file for more details.
9-
* //
10-
* // Software description: Flutter library of reusable graphical components
11-
* //
12-
*/
1+
// Software Name: OUDS Flutter
2+
// SPDX-FileCopyrightText: Copyright (c) Orange SA
3+
// SPDX-License-Identifier: MIT
4+
//
5+
// This software is distributed under the MIT license,
6+
// the text of which is available at https://opensource.org/license/MIT/
7+
// or see the "LICENSE" file for more details.
8+
//
9+
// Software description: Flutter library of reusable graphical components
1310

1411
import 'package:flutter/material.dart';
1512
import 'package:ouds_theme_contract/ouds_theme.dart';

‎ouds_core/lib/components/list_item/internal/ouds_list_item_icon_modifier.dart‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
1-
/*
2-
* // Software Name: OUDS Flutter
3-
* // SPDX-FileCopyrightText: Copyright (c) Orange SA
4-
* // SPDX-License-Identifier: MIT
5-
* //
6-
* // This software is distributed under the MIT license,
7-
* // the text of which is available at https://opensource.org/license/MIT/
8-
* // or see the "LICENSE" file for more details.
9-
* //
10-
* // Software description: Flutter library of reusable graphical components
11-
* //
12-
*/
1+
// Software Name: OUDS Flutter
2+
// SPDX-FileCopyrightText: Copyright (c) Orange SA
3+
// SPDX-License-Identifier: MIT
4+
//
5+
// This software is distributed under the MIT license,
6+
// the text of which is available at https://opensource.org/license/MIT/
7+
// or see the "LICENSE" file for more details.
8+
//
9+
// Software description: Flutter library of reusable graphical components
1310

1411
import 'package:flutter/material.dart';
1512
import 'package:flutter_svg/flutter_svg.dart';
@@ -87,7 +84,6 @@ class OudsListItemIconModifier {
8784
final nonFunctionalIcon = getAssetsName(status);
8885
final functionalIcon = getStatusIcon(status);
8986
final theme = OudsTheme.of(context);
90-
final listItemTokens = theme.componentsTokens(context).listItem;
9187
final iconTokens = theme.componentsTokens(context).icon;
9288
final packageName = theme.packageName;
9389
final colorScheme = theme.colorScheme(context);
@@ -98,7 +94,7 @@ class OudsListItemIconModifier {
9894

9995
final double scaledSize = MediaQuery.textScalerOf(
10096
context,
101-
).scale(size.value(listItemTokens));
97+
).scale(size.value(context));
10298

10399
if (status is Warning && enable) {
104100
return Stack(

‎ouds_core/lib/components/list_item/internal/ouds_list_item_indicator_modifier.dart‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
// Software Name: OUDS Flutter
2+
// SPDX-FileCopyrightText: Copyright (c) Orange SA
3+
// SPDX-License-Identifier: MIT
4+
//
5+
// This software is distributed under the MIT license,
6+
// the text of which is available at https://opensource.org/license/MIT/
7+
// or see the "LICENSE" file for more details.
8+
//
9+
// Software description: Flutter library of reusable graphical components
10+
11+
import 'package:flutter/material.dart';
12+
import 'package:ouds_core/components/list_item/internal/ouds_list_item_state.dart';
13+
import 'package:ouds_theme_contract/ouds_theme.dart';
14+
15+
/// Modifier class that resolves the color of an [OudsListItem] navigation
16+
/// indicator (chevron next, chevron previous, external link icon) based on
17+
/// the item's current [OudsListItemControlState].
18+
///
19+
/// When [OudsListItemControlState.disabled] the indicator color is set to
20+
/// `actionDisabled` so it appears uniformly dimmed, consistent with the
21+
/// leading and trailing slot behaviour.
22+
///
23+
/// Example usage:
24+
/// ```dart
25+
/// final color = OudsListItemIndicatorModifier(context)
26+
/// .indicatorColor(listItemState);
27+
/// ```
28+
class OudsListItemIndicatorModifier {
29+
OudsListItemIndicatorModifier(this.context);
30+
31+
final BuildContext context;
32+
33+
/// Resolves the indicator color for the given [state].
34+
///
35+
/// - [OudsListItemControlState.enabled] → `colorChevronEnabled` from link tokens
36+
/// - [OudsListItemControlState.hovered] → `actionHover` from color scheme
37+
/// - [OudsListItemControlState.pressed] → `actionPressed` from color scheme
38+
/// - [OudsListItemControlState.focused] → `actionFocus` from color scheme
39+
/// - [OudsListItemControlState.disabled] → `actionDisabled` from color scheme
40+
Color indicatorColor(OudsListItemControlState state) {
41+
final colorScheme = OudsTheme.of(context).colorScheme(context);
42+
final linkTokens = OudsTheme.of(context).componentsTokens(context).link;
43+
return switch (state) {
44+
OudsListItemControlState.enabled => linkTokens.colorChevronEnabled,
45+
OudsListItemControlState.hovered => colorScheme.actionHover,
46+
OudsListItemControlState.pressed => colorScheme.actionPressed,
47+
OudsListItemControlState.focused => colorScheme.actionFocus,
48+
OudsListItemControlState.disabled => colorScheme.actionDisabled,
49+
};
50+
}
51+
}

0 commit comments

Comments
 (0)