fix: Layout issue with product title card

[g123k]

Fixed UI:

My PR not only consists of fixing the layout issue mentioned in #2488, but also:

• Splits the three items of the title Card into three different Widgets (a bad behavior that we should fix in the app)
• Adds some missing attributes to the SelectableText Widget

[codecov-commenter]

Codecov Report

Merging #2525 (c96aa71) into develop (2ea0da3) will decrease coverage by 1.19%. The diff coverage is n/a.

@@            Coverage Diff             @@
##           develop   #2525      +/-   ##
==========================================
- Coverage     8.86%   7.66%   -1.20%     
==========================================
  Files          161     207      +46     
  Lines         6623   10015    +3392     
==========================================
+ Hits           587     768     +181     
- Misses        6036    9247    +3211     

Impacted Files	Coverage Δ
...kages/smooth_app/lib/widgets/attribute_button.dart	0.00% <0.00%> (-92.00%)	:arrow_down:
...s/smooth_app/lib/data_models/user_preferences.dart	8.73% <0.00%> (-23.57%)	:arrow_down:
packages/smooth_app/lib/themes/smooth_theme.dart	60.00% <0.00%> (-22.98%)	:arrow_down:
...p/lib/generic_lib/dialogs/smooth_alert_dialog.dart	15.29% <0.00%> (-18.92%)	:arrow_down:
...mooth_app/lib/data_models/product_preferences.dart	24.65% <0.00%> (-6.78%)	:arrow_down:
packages/smooth_app/lib/main.dart	14.16% <0.00%> (-3.73%)	:arrow_down:
.../smooth_app/lib/pages/onboarding/welcome_page.dart	0.00% <0.00%> (-3.13%)	:arrow_down:
.../smooth_app/lib/pages/onboarding/scan_example.dart	0.00% <0.00%> (-2.28%)	:arrow_down:
...p/lib/pages/onboarding/consent_analytics_page.dart	0.00% <0.00%> (-1.57%)	:arrow_down:
...smooth_app/lib/pages/product/new_product_page.dart	0.00% <0.00%> (-0.88%)	:arrow_down:
... and 216 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 2d0469a...c96aa71. Read the comment docs.

[teolemon]

How about concatenating name, brand and weight with hyphens, in the same font, and potentially multiline ?

[monsieurtanuki]

How about concatenating name, brand and weight with hyphens, in the same font, and potentially multiline ?

+1, possibly with RichText:

var text = RichText(
  text: TextSpan(
    // Note: Styles for TextSpans must be explicitly defined.
    // Child text spans will inherit styles from parent
    style: const TextStyle(
      fontSize: 14.0,
      color: Colors.black,
    ),
    children: <TextSpan>[
      TextSpan(text: 'Hello'),
      TextSpan(text: 'World', style: const TextStyle(fontWeight: FontWeight.bold)),
    ],
  ),
);

[g123k]

But the weight needs to be on the right, which a textSpan won’t allow

[teolemon]

Looking at the Web:

[M123-dev]

I'm not a fan of splitting with hyphens UI wise. I prefer the the current left and right aligned design

[g123k]

So what should we do? 😆

[monsieurtanuki]

We can vote!

1. simple "web" hyphen version: +1 (@monsieurtanuki)
2. Rich Text version: +1 (@monsieurtanuki)
3. current version that causes the layout issue: 0
4. this PR's 3 widget version: +1 (@M123-dev )

[g123k]

@teolemon @M123-dev I need your advice on this!

[monsieurtanuki]

@teolemon @M123-dev ping

[teolemon]

• Just out of fun, I wonder what it looks like in scan mode with the close cross @g123k
• We're not implementing the designed mockup which concatenated 1st brand and weight
• We should consider taking only the first brand if that's not the case
• For the quantity that's problematic, because it's a text field with high variability. Others have decided to hide it alltogether
• Multi-line concatenation looks like the most resilient thing

[teolemon]

Could we aim at smg like

[g123k]

That's an extra case, but could be implemented with a total custom layout (like I did for the scanner).

I just want to be sure it's ok for everyone before coding anything

[monsieurtanuki]

If you ask me, the simpler the better. A ListTile with title (name), subtitle (brands and quantity) and trailing (cross) would do the trick. Will take 5 minutes to code, 2 minutes to review, and will match the mock at 90%, which is good enough - for my standards.

[teolemon]

merge conflict

[g123k]

Finally, what's the decision on this? 🤪

[teolemon]

is the one thumbed up by @monsieurtanuki (and my last one) doable ?

[monsieurtanuki]

Guys, it's been a month since the PR was created. https://en.wikipedia.org/wiki/Law_of_triviality

[monsieurtanuki]

ping

[g123k]

Hi everyone,

Here's a quick fix about this issue: if the length of the product's size is more than 5 or 6 characters, show it underneath the product's name or brand to have the full width.

[monsieurtanuki]

@g123k A long time ago @teolemon and I seemed to agree on that:

With a potential quick implementation with ListTile that I suggested here.

If I understand well that's what you're suggesting, except that we wouldn't care about the 5-6 characters and always display the product card the same way.

[g123k]

Basically I hate so much the ListTile Widget 😅 I’m not sure the screenshot is doable with this Widget, as Padding are not enough large for the close button.

the current behavior (when there is enough space) is for me better. We just made an exception… and not an exception the general rule.

[g123k]

The PR is mergeable again :)

[teolemon]

2 merge conflicts

[g123k]

2 merge conflicts

This is the xxxxth time I have to rebase this PR. Will it really be merged? or should I close it?

[teolemon]

I'm sorry for this. You can merge as soon as you solve the conflict

[teolemon]

ok, 5th time the charm @g123k merging