feat: Product not found dialog - a fully responsive implementation

[g123k]

Hi everyone,

In Dialogs, using LayoutBuilder, AutoSizeText and in some cases Expanded, can break on some devices.
Most of the time, it's OK on real devices, but not on emulators (don't ask me why, that's what I've found on the Flutter github 🤷‍♂️).

I've rewritten the dialog to remain responsive without a LayoutBuilder.
The drawback is that it requires some manual computation.

As always, a video to show how responsive it is:
https://github.com/openfoodfacts/smooth-app/assets/246838/b918e942-42e9-4840-90f8-9057c36565c6

It will fix #4313

[codecov-commenter]

Codecov Report

Merging #4315 (5c09a05) into develop (899cea6) will increase coverage by 0.01%.
The diff coverage is 13.33%.

@@             Coverage Diff             @@
##           develop    #4315      +/-   ##
===========================================
+ Coverage    10.45%   10.47%   +0.01%     
===========================================
  Files          291      291              
  Lines        14416    14431      +15     
===========================================
+ Hits          1507     1511       +4     
- Misses       12909    12920      +11     

Impacted Files	Coverage Δ
...app/lib/generic_lib/widgets/smooth_responsive.dart	15.38% <0.00%> (-2.27%)	⬇️
...ib/pages/product/common/product_dialog_helper.dart	0.00% <0.00%> (ø)
...p/lib/generic_lib/dialogs/smooth_alert_dialog.dart	76.12% <100.00%> (+0.63%)	⬆️

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[github-actions]

You can test this PR on: https://app.waldo.com/applications/app-19d476740ba1bb36/sessions

[monsieurtanuki]

@g123k I do believe we would be better off

• with the previous code
• without the LayoutBuilder
• with the svg width computed as MediaQuery.of(context).size.width / 4, as it's the only place where we use the layout constraints

Therefore, less complexity in the code.

[g123k]

@g123k I do believe we would be better off

• with the previous code
• without the LayoutBuilder
• with the svg width computed as MediaQuery.of(context).size.width / 4, as it's the only place where we use the layout constraints

Therefore, less complexity in the code.

Actually, it's basically your code without a LayoutBuilder.
The only difference is to add some extra paddings between elements, because clearly, outside small devices, it's too dense

[monsieurtanuki]

The only difference is to add some extra paddings between elements, because clearly, outside small devices, it's too dense

That's what I don't get: I suppose that a Column with maxSize and spaceBetween would take all the available space with identical spaces between. Therefore all the available space. And spaces between items.

[g123k]

The only difference is to add some extra paddings between elements, because clearly, outside small devices, it's too dense

That's what I don't get: I suppose that a Column with maxSize and spaceBetween would take all the available space with identical spaces between. Therefore all the available space. And spaces between items.

The main difference is that our implementation works, but depends on lots of Expanded (which is OK).
However Expanded also means that the text can be vertically cropped if there is not enough space, hence the need of AutosizeText.

The idea is my change prevents the use of AutosizeText, with more or less the same rendering at the end.

[teolemon]

let's improve on that later, the modal is at least displayed now.