feat: #2396 - new widget SmoothProductCardTemplate

[monsieurtanuki]

New files:

• smooth_product_card_template.dart: Empty template for a product card display.
• smooth_product_image_container.dart: Container to display the main product image on a product card.

Impacted files:

• smooth_product_card_found.dart: fix as backgroundColor was not taken into account anymore
• smooth_product_image.dart: refactored with new class SmoothImageContainer

What

• This is the first step of Safer and faster product list display #2396.
• I cannot go further in Safer and faster product list display #2396 while this PR is not merged, and this PR is not very complicated, so a quick review would be appreciated ;)
• As there are many files for this issue (20+), the idea is to split in small self-relevant chunks
• Here in this PR, the main goal is to introduce a new widget: SmoothProductCardTemplate
• This widget will be used each time we're loading a product from the database, in a product list display.
• As with the issue we don't load all products first but load (and dismiss) them on demand, there are some cases when the scroll down will show products that are not loaded in memory yet.
• The database load is always almost instant, but in the meanwhile we need to display something, in that case a SmoothProductCardTemplate.
• That's a bit similar to youtube: they load a dozen of video previews, but when you scroll down they display empty templates while they're loading.

Screenshot

This is what SmoothProductCardTemplate looks like (as a test I display every other product with the template, but this is obviously not what will happen IRW):

dark	light

Part of

• Safer and faster product list display #2396

[M123-dev]

Looks good to me, thanks @monsieurtanuki just a lot of magic numbers, I guess most of them are not introduced by you but taken from the original card, but they should still be a const or dynamic in other places.

[M123-dev]

I guess you took these values from the original card. We should store them in a const

[monsieurtanuki]

Fair enough, but I don't know how to do that cleanly. You see, the 240x130 ratio comes from the svg files themselves.
The general idea is to have a template that looks similar to a real product card, not to match it in every detail, especially for a widget that is transient.

[M123-dev]

Some magic numbers, what happenes when someone changes the font size

[monsieurtanuki]

I don't care about the font size, I just want 3 lines that fit in width * .2 as in the original card.

[monsieurtanuki]

Thank you @M123-dev for your quick review!
I understand your concern about the template display and the magic numbers there; I replied to each comment.
Of course each time the original product card layout is getting modified we could modify that template too, but it does not happen too often, does it? And the template is really a transient display, an obvious "normally there should be a product there and it won't be long".
Of course if someone finds a solution to have a better (and systematic) match between the product card and the template, why not, but it's not a priority now.