I'm trying to use the material banner widget but a list of actions is required. The list of actions is causing the banner to look weird even when I place an empty container inside of the list.
Should I not be using the material banner widget since it requires a list when my design doesn't need a list of actions available? I want to use the widget since I can use these methods easily.
ScaffoldMessenger.of(context).showMaterialBanner & ScaffoldMessenger.of(context).clearMaterialBanners();
If I shouldn't be using the widget, does anyone else have a good replacement for it?
Thank You.
Edit: I've added an image for reference.
https://imgur.com/a/DPSnhrw
I want to get rid of the red area on the right side of the banner. I've tried setting the material banner's padding to padding: EdgeInsets.zero
I think I found a way but it's dirty: open the MaterialBanner widget and change everything you don't like in the code.
Below are the changes I made. After that, I'm passing any List of widgets as actions to the MaterialBanner, which is simply ignored.
Changes to MaterialBanner
Related
I have a ScrollablePositionedList and want to do stuff when the next Widget in the List is scrolled to. How can I detect that? I have tried with NotificationListener and ScrollUpdateNotification but only saw the option to use the height of each widget which is flexible and it would be kinda ugly to do it like this. Is there a better way? Like see the pixel height of a widget or is there a function I could use?
You should be able to monitor what items are visible on screen with:
itemPositionsListener.itemPositions.addListener(() => ...);
Then, based on this. you can see whenever there is a change, whenever a new item is scrolled to / appears in the list. then make whatever changes you want
Here is the documentation for more info
I'm trying to find a way to check the visibility of a Flutter widget when it's either off screen or when it's obscured by another, for example Drawer, Dialog or BottomSheet.
visibility_detector helps with checking whether it's on the screen or not but does not work with the second use case (known limitation).
Is there a lower lever api that I can use to check whether a widget is actually visible to the user?
My use case: I'm adding a widget to the Overlay when something external happens (similar to Tooltip but not on long press). If the user opens for example the Drawer, the widget will appear on top. I want to detect that the child is not visible and delay or cancel the action.
Do I understand your problem?
You have a widget you want to always be on top?
You want the user to interact with that widget first before doing other things?
Use design patterns to make coding easier, your users will thank you.
You can show a Dialog on-top of other widgets with the showGeneralDialog or showDialog functions. Because Dialogs are a design-pattern used in many apps, users will already know how to use them.
Define app behavior with explicit state.
It is too hard to derive app behavior from rendered UI, not all devices are the same size and shape. This means you should try to write a variable that describes your situation and then write the code you need to make that variable's value correct. It sounds like you want a variable like bool overlayIsShowing.
So I am not looking for filters but I am looking for scroll widget. I have tried generating listview items abd getting position of listview to give items ratio but I wasn't able to get any functionality while in certain index position. Any help would be helpfull. Naming of the widget or special widgets that can make me do this etc.
You can use ListView or ListView.builder to do that, but with circle-shaped widgets as the children.
You can check out this tutorial to do the horizontal list. And you can check out this StackOverflow question, to create a circle button. Or instead of a button, you want to use the CircleAvatar (to add an image in it), you can check out this official doc.
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?
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.
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.
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
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:
How to remove scroll glow? (works for Android)
How to remove overscroll on ios? (works for iOS)
Further reading
https://api.flutter.dev/flutter/widgets/ScrollPhysics-class.html
https://medium.com/flutter-community/custom-scroll-physics-in-flutter-3224dd9e9b41
I'm trying to implement a dial widget in flutter and I need to make a circle RaisedButton to go around center of the parent widget. I can use Center to position a button at the center of the parent container, then transform it. But that makes the button unresponsible. Is it possible to do without using CustomSingleChildLayout? That looks a bit complex
I don't know if I'm understanding your requirement correctly, but a package similar to this called flutter_radial_menu is available, while the implementation can be seen in this Git repository.
The codes are available for your reference, if your goal is similar to this one.
I hope this helps.
After some digging in flutter_radial_menu, I realized the way to do it is to use CustomSingleChildLayout. I need to implement a delegate for it. In the delegates getPositionForChild method, we have both the size of the parent and size of the child. We only need to return the position of the child.
I put the code in this gist https://gist.github.com/gliheng/2cc5f97922d456052713fd0803a7efdc