Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Background for PageViewModel #105

Closed
ArtemNVK opened this issue Feb 14, 2022 · 3 comments · May be fixed by #214
Closed

Background for PageViewModel #105

ArtemNVK opened this issue Feb 14, 2022 · 3 comments · May be fixed by #214
Labels
enhancement New feature or request

Comments

@ArtemNVK
Copy link

ArtemNVK commented Feb 14, 2022

Hi there! I was just wondering if it was possible to implement a background widget or something similar for PageViewModel.

Let's consider the following use case. We are trying to build the introduction screen and we want each of its pages to have an image as a background (does not matter if it is going to be different images or the same one). By background, we mean an image covering all over the screen just like in the picture below:

Screen Shot 2022-02-15 at 1 38 01 AM - image 1

For the sake of this example, let's assume that the red space is the background image.

But as of now, we're only able to pull it off using the IntroductionScreen's rawPages parameter that allows us to pass down the custom widgets which makes it easy for us to have it look like we want.

If we get to use the PageViewModel in our case (regardless whether we use its image parameter, bodyWidget/titleWidget or fullscreen: true), we end up with the following result (assuming that the green space is the background image):

Screen Shot 2022-02-14 at 2 02 25 AM - image 2

As we can see, the image is constrained within the borders of the PageViewModel. I was experimenting with the bodyWidget/titleWidget and it looks like these borders are simply clipping the overflow content or something. I mean, we can play around with an image using the translate method for example - the image simply goes beyond the constraining borders and we cannot see it any further.

That being said, is there any opportunity to enhance the PageViewModel so that it allows us to use the background images that cover all available screen space like in the image 1?

@ghenry
Copy link
Collaborator

ghenry commented Nov 23, 2022

Hi all,

If someone would like to work on this, then awesome, however I'm closing this for now. Please do a PR if you're an angel!

Thanks,
Gavin.

@ArtemNVK
Copy link
Author

Hi! I finally got to make it after 2 years.

I tried not to mess up the previous flow so that this change doesn't affect the way it used to work before. It basically hides the fullscreen image logic shown in the Example app and makes it accessible out of the box by simply passing an asset path to the backgroundImage.

Also, I documented everything and added an assert to the PageViewModel so that it checks the provided path validity.

@ghenry
Copy link
Collaborator

ghenry commented Apr 20, 2024 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants