2

I want users to scroll between pages in PageView, but I don't want to show them an animation when they try to scroll before first and after last page. I can switch between colorful animation, black animation and no scrolling, but I could not find any possibility to disable the animation at all.

If there is no such possibility, how can I change the color of that animation or make it transparent at least?

aleskva
  • 1,644
  • 2
  • 21
  • 40
  • Do you mean the animation that is shown on the edges of the screen? – J. S. Dec 28 '19 at 01:48
  • Yes, I hope so. – aleskva Dec 28 '19 at 09:29
  • You would likely have to build your own widget with the functionality of page view to remove that animation. That animation exists for better UX, so that the user is aware that he has reached the end and beginning of items he is scrolling through. Why do you want to remove it? – J. S. Dec 28 '19 at 12:45
  • From user testing I get the response it is disturbing. Users think there should be something, that's missing to them. Also it is black and there is no chance to change it to white, which adds to the confusion. – aleskva Dec 28 '19 at 12:52
  • Could you share a screenshot? Black is an odd color for it to be displaying. – J. S. Dec 28 '19 at 12:53
  • Updated question with a screenshot. I want it to be white at least – aleskva Dec 28 '19 at 13:01
  • Ok, this is definitely not the animation I was speaking about. I've never seen that before. It's covering not just the app but the Android status bar as well? – J. S. Dec 28 '19 at 13:06
  • The app covers status bar too, that's normal isn't it? I just can't manage to make it white or not show at all. I can only switch it to the second (default) type of animation, which is orange (primaryColor/accentColor). But I'm unable to make any of them transparent/white or disable animation at all (stop at the edge) – aleskva Dec 28 '19 at 13:20
  • I get the feeling that there is more going on here. Can you share your Page View implementation and your main App Scaffold? – J. S. Dec 28 '19 at 13:32
  • You can see it here: https://pastebin.com/fnxgQHtJ – aleskva Dec 28 '19 at 15:32
  • I'm sorry, I can't figure out where that black is coming from. It doesn't seem to be from the PageView animation. Also, did you copy paste all your files into one, or are you writing all your 1700 lines of code in just one file? – J. S. Dec 28 '19 at 16:07
  • You never worked with PageView? The black animation is one of several animations called ScrollPhysics. But all of these are showing some animation. I want to get rid of any animation when trying to move before first and after last page. This must be some special param in ScrollPhysics, but I'm unable to find out, which. – aleskva Dec 28 '19 at 17:06
  • The second option would be to make the animation transparent, but this means I have to modify primaryColor or accentColor just for the PageView, which seems pretty impossible to me – aleskva Dec 28 '19 at 17:07

1 Answers1

9

Based on your screenshot, I can say that you are using BouncingScrollPhysics for your PageView. This behavior is commonly used by iOS devices. Nonetheless, I have also reviewed the entire source code you have provided here.

image-1

What went wrong

You have added PageView without accompanying it with a Scaffold or Material widget at the top level that's why the background behind the children of the PageView is color black.

image-2

https://dartpad.dev/c709e410d0a68248ac5b387b3bc6af93

From the documentation:

Scaffold implements the basic material design visual layout structure.

Without this widget, you'll notice that your app may occupy the entire screen of your device, including the notification bar, because it (PageView) does not know where is the status bar is located in the screen.

What you can do

I noticed that all of the children added inside the PageView has individual Scaffold and AppBar, it's not really necessary to nest scaffolds and you may want to use TabBarView instead of PageView, and let the parent widget handle the AppBar changes via TabController.

But if you think it'll cost you too much effort to refactor, feel free to review the following options that require minimal changes which will suit your needs:

Option 1. You can wrap your widget inside a Scaffold widget.

https://dartpad.dev/4620ff91444353f5e000d2063594bd96

image-3

Option 2. Given that nesting Scaffold widgets is not a good practice, you can just use the plain Material widget to wrap your PageView with children wrapped with Scaffold widget.

https://dartpad.dev/43f8730e5592ce1f96193fc01f08a29c

These solutions will change the background color of the PageView from black to white.

Option 3. If you really want to get rid of the animation, the easiest way to hack it is changing your scroll physics:

physics: ClampingScrollPhysics(),

However, this still has a glowing or ripple effect when you try to swipe at the end of the screen.

To further get rid of this effect, I'll share with you these SO answers:

Further reading

Joshua de Guzman
  • 2,063
  • 9
  • 24