New feature: create a screen to view all photos from a product

[g123k]

/Hi everyone,

As part of #4624, we plan to change the layout of the Product Page (in the read-only mode) by using tabs, instead of the long vertical list. But before switching to tabs, we can already implement some parts that have already received good feedback from user interviews.

We want a dedicated page to list all the photos for a product:

• It will be filtered by languages (by default: the language of the user)
• A dropdown on top allows you to quickly change the language
• We have a grid of 4 photos with front face / ingredients / nutrition facts / packaging info
• After that, we have a list of all other photos of the product
• By clicking on a photo, it should open the screen we already have in full-screen
• The button to add a new photo is the first element in the Other Photos section
• For a photo, if it was taken more than a year ago, an icon on the bottom right highlights this
• When there is no photo, a placeholder is shown instead (only for the grid of 4 photos)

Design:

All icons and colors are already in the app, except:

• The outdated icon (SVG):
• The placeholder icon (SVG):
  

[sainideepanshu199]

i want to work on this issue, can you please assign this issue to me

[g123k]

i want to work on this issue, can you please assign this issue to me

You're now assigned. Feel free to ask us if you need more details

[sainideepanshu199]

i want to work on this issue, can you please assign this issue to me

You're now assigned. Feel free to ask us if you need more details

I am not able to set up the project, there are lots of errors and also the SDK version problem

[g123k]

i want to work on this issue, can you please assign this issue to me

You're now assigned. Feel free to ask us if you need more details

I am not able to set up the project, there are lots of errors and also the SDK version problem

Which version of Flutter do you use?
On which OS…?

Because a "it doesn't work" doesn't help that much

[sainideepanshu199]

Flutter 3.16.0-5.0.pre.11
os : Windows 11

[g123k]

Flutter 3.16.0-5.0.pre.11 os : Windows 11

Please use the stable version of Flutter

[sainideepanshu199]

how can i get to it, flutter upgrade or something else

[g123k]

how can i get to it, flutter upgrade or something else

https://docs.flutter.dev/release/upgrade#changing-channels

[sainideepanshu199]

Thanks, i will work on the issue right away

[sainideepanshu199]

flutter version is stable ,still so many errors

[g123k]

I don't see any error here.
Please write them explicity.

[sainideepanshu199]

I don't see any error here. Please write them explicity.

[g123k]

Please write, the output of:
flutter doctor
flutter pub get packages/smooth_app (from the root of the repo)
flutter build apk -t lib/entrypoints/android/main_google_play.dart

[sainideepanshu199]

running since 30 min

[Sudhanva-Nadiger]

main_google_play.dart right click on the file and click run without debugging !

ps: btw if you have not downloaded flutter and dart extension of vscode pls do, it will be helpful for the development

[monsieurtanuki]

@sainideepanshu199 Still working on the current issue?

[sainideepanshu199]

@sainideepanshu199 Still working on the current issue?

Had some problems so couldn't complete it, please assign it to someone else

[monsieurtanuki]

Thank you @sainideepanshu199 for your quick answer.
The very first time I tried to work on this project (years ago) I also experienced configuration problems. And it was another configuration system!

[teolemon]

• Related: Add support for the new "Image Refresh" API openfoodfacts-dart#104

[monsieurtanuki]

@g123k So now we are at this stage:

fr	it

Comments/questions:

1. We already have a "no photo" svg - please provide a new svg if relevant
2. Please provide the "outdated photo warning" svg
3. What are we supposed to do when we click on an "other" photo? With main photos, we display the "edit photo" page with 4 buttons (select an existing image, capture new, unselect photo, edit), and none of those buttons make sense for "other" photos. So far, we only access "other" photos in the "select an existing image" action).

[g123k]

Comments/questions:

1. We already have a "no photo" svg - please provide a new svg if relevant

For this SVG and all others, I think I will simply create a PR with all assets from the POC.
Some are in a font and some in SVG, so it will be easier that way.

2. Please provide the "outdated photo warning" svg

For this one, I wonder if I shouldn't create variants depending on the category.
Any advice @teolemon? Or is it just not worth it?

3. What are we supposed to do when we click on an "other" photo? With main photos, we display the "edit photo" page with 4 buttons (select an existing image, capture new, unselect photo, edit), and none of those buttons make sense for "other" photos. So far, we only access "other" photos in the "select an existing image" action).

I think the image in fullscreen will be enough.
Maybe, we could add a button to reassign this photo (eg: tell that's actually the ingredients)

[monsieurtanuki]

For this SVG and all others, I think I will simply create a PR with all assets from the POC.

Assuming that your POC is 100% clean and with no useless data, which - no offense - is unlikely given that it's a POC.
That won't solve the issue either to do that in bulk, because we'll need anyway at some point to say that in this image page we have to use your specific svg file instead. And probably with additional text, which isn't the case now (just svg).

For this one, I wonder if I shouldn't create variants depending on the category.

You'd probably add confusion for the user with different "outdated" icons for different categories.

I think the image in fullscreen will be enough.

Probably a bit frustrating for the user, but that's a start.

As you seem to be determined to see the "other" photos, I have to ask additional questions:

1. In your screenshot it looks like a horizontal scrolling ListView. Or a 3 column GridView. Which one? Or something else?
2. You're aware that we don't store the "other" photos in the off-dart product, and that we need to query them again and again each time we land on that page. A solution would be to include them in off-dart product first - what do you think of that?

[monsieurtanuki]

Blocked by openfoodfacts/openfoodfacts-server#9226

[monsieurtanuki]

Done.