Add masonry type interface to gallery

[rolandgeider]

Having a masonry type of interface in the gallery would probably be an improvement, at the moment the pictures are shown as squares and details at the top and bottom are cut out. We could try adding a staggered grid view and see if it really is an improvement

[Aaliya-Ali]

Hello,
I'd like to give this issue a try, let me know if it has been taken already. Also wanted to know if this issue is a part of hacktoberfest. I am new to open source, please guide me on how to get started.

[rolandgeider]

Hi @Aaliya-Ali !

yeah, this repo is participating in hacktoberfest so all issues/PRs count. You can use the test server as a backend then you don't need to setup anything (the DB is reset every day) and there should enough images to see if the masonry is an improvement:

https://wger-master.rge.uber.space/ (click on "custom server" in the login page)
Username: user
Password: flutteruser

Have you worked with git and forks and so on before?

[rolandgeider]

BTW, we expose the image's height and width over the API but currently don't read it or do anything with it, in case you need the information to decide how to display the images

[Aaliya-Ali]

Hey @rolandgeider,
Thanks for all the information! I'll try running the app locally and will let you know in case of any problems. And yes, I have some experience working with git.

[Aaliya-Ali]

Hello,
As suggested, I used the flutter_staggered_grid_view package and managed to replace the GridView with a MasonryGridView. Are there any other changes you'd like me to make? Attaching a screenshot for your reference.

[rolandgeider]

That looks great!

[Aaliya-Ali]

Hello,
It seems like a few tests on my PR failed, is there anything I need to do? Actually, I've never worked with tests before.

[rolandgeider]

you are right, I'll take a look later today, we're probably checking for the old card widgets which can't be found anymore or something similar

[rolandgeider]

I don't really know why the tests only find 2 widgets, instead of the four that should be there, it's a bit strange, I'll keep looking

[Aaliya-Ali]

Same here, I tried finding out but could not understand either. Can you tell me a bit more about the 4 widgets the test is looking for?

[rolandgeider]

So if you look into gallery_screen_test.dart you see that in setup() we mock the gallery provider. This means that we fake tcertain responses so that we can run the tests without the need for any backend, database or any external services. In this case we simply return getTestImages() which is a list with four images.

Then we render the gallery with that provider and basically check that there are four widgets of the type GestureDetector (so basically that we rendered what we thought would render). Now that I think about it, there might be a better way to make the images clickable, but that doesn't answer our question

[Aaliya-Ali]

Got it, thanks for the information! I'll try to find a fix.