I have a design which contains multiple columns with multiple widgets inside.
When the user clicks inside one column the rest of the screen should grey out - except the widget inside the column which is active.
For this "grey out" effect I use modal ModalBarrier class.
How can I tell a widget to appear ABOVE the modal barrier?
(my problem is, that everything appers behind the modal barrier...)
How about this?
Stack(
children: [
new Opacity(
opacity: 0.3,
child: const ModalBarrier(dismissible: false, color: Colors.grey),
),
Center(
child: Container(
Text('Hello'),
),
),
],
)
Related
I developed a flutter web application that has google map widget as a part of Scaffold body. I use flutter_speed_dial as a floating action button. When I click on SpeedDial, it shows an overlay on whole screen, but the map is still clickable.
I know it is happened because google map use HtmlElementView in web and we have a pointer_interceptor package to prevent triggering map when click on above buttons. But how about the overlays? there is no place to wrap SpeedDial overlay with pointer_interceptor.
Here is my sample code:
Scaffold(
...
body: Column(
children: [
...
SizedBox(
height: 230,
child: GoogleMap(...)),
...
]
),
floatingActionButton: PointerInterceptor(
child: SpeedDial(
...
childPadding: const EdgeInsets.all(5),
spaceBetweenChildren: 1,
isOpenOnStart: false,
children: [
SpeedDialChild(
onTap: () {
...
},
labelWidget: PointerInterceptor(
child: Card(
...
),
),
),
],
),
),
)
I believe you can Solve your problem by using IgnorePointer.
Wrap a widget with IgnorePointer and set it to true.
IgnorePointer(
ignoring: true,
child: Widget _test(),
),
you can take a look at docs here:
https://api.flutter.dev/flutter/widgets/IgnorePointer-class.html
I have this design, The first section in the red box is fixed height size, and The second section is the dynamic height (ListviewBuilder) which changed the content based on the tabBar.
My question is How can I use the TabBar view inside the scrollable widget (custom scroll view/listview etc..)
the solution That I currently found is to use a customScrollView and use SliverFillRemaining like that
SliverFillRemaining(
child: TabBarView(
children: [],
),
),
but that adds extra white space at the bottom of the list and I can't remove it by
making hasScrollBody property false
You could probably achieve what you want with this kind of template :
Scaffold(
body: Column(
children: [
Container(
height: MediaQuery.of(context).size.height * .33,
child: Container(/* Content of the first section */),
),
Expanded(
child: DefaultTabController(
length: 2,
child: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Container(
height: 50,
child: TabBar(
tabs: [Text("Guest"), Text("Service")],
),
),
),
SliverFillRemaining(
child: TabBarView(
children: [
// Your ListView Builder here
],
),
),
],
),
),
),
],
),
);
Seeing the bit of code you posted, it is probably close to what you already have but after test it doesn't adds extra white space at the bottom.
If it continue to display the same behavior, adding a little more context could help us provide a more accurate answer.
In the screen below, I have the following text "By creating an account ...." that I would like to always keep at the bottom of the screen and should never scroll up with the keyboard.
Currently the text is placed in bottom sheet but unfortunately, the bottom sheet does scroll up with the keyboard.
Using resizeToAvoidBottomInset: false in the Scaffold will not help since it will make all screen ignore the keyboard.
Is there any way to keep the text at the bottom of the screen and have it ignore the keyboard?
I was able to find a basic solution to this.
I placed the terms and conditions text in the bottomNavigationBar property of the Scaffold like this.
Scaffold(
bottomNavigationBar: const TermsAndConditionsText(),
....
....
)
The trick is to use the MediaQuery.of(context).viewInsets.bottom
The value of .bottom will be updated whenever the Keyboard shows up.
To achieve what you want
1- Define the resizeToAvoidBottomInset: false in the Scaffold.
2- Wrap your "form" in a Stack widget.
3- Add your Widgets which should stick at the bottom of the screen at the same level of your "form" in an Align or Positioned
Stack(
children: [
child: Column(
... //Form
),
const Align(
alignment: Alignment.bottomCenter,
child: Text("Terms And Conditions"),
)
],
),
4- And now the magic trick : wrap your "form" in a Padding with the viewInsets.bottom value
Stack(
children: [
Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom,
),
child: Column(
...// Form
),
),
const Align(
alignment: Alignment.bottomCenter,
child: Text("Terms and Conditions"),
)
],
),
My solution looks more like a "hack" than a proper solution, but I never found any official documentation solving this kind of "problem".
What is the best way to build a "nested bottom sheet" which behaves like this:
https://dribbble.com/shots/14139422-Mobile-banking-app-interactions?
Do I have to use NestedScrollView or CustomScrollView, or a completely different approach?
Update :
This is my result using SlidingUpPanel, but I still have two problems:
When sliding up the panel, the green and red containers stay behind the panel and do not scroll out of view at the top.
In landscape mode the containers are higher than the device, so this approach does not work. I need the panel to be attached to the bottom of the containers, so it is only visible when scrolling down.
Code:
SafeArea(
child: Scaffold(
body: SlidingUpPanel(
minHeight: MediaQuery.of(context).size.height - 479,
maxHeight: MediaQuery.of(context).size.height - 79,
panel: SingleChildScrollView(
child: Column(
children: [Text('Sliding Panel')],
),
),
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
height: 100,
color: Colors.green,
),
Container(
height: 300,
color: Colors.red,
)
],
),
),
),
),
);
Result:
I believe there is a Widget for what you want to do, since there is a widget for everything in Flutter. here is the link of the package
NOTE : you can also set minimum height of the widget when collapsed in order to control how much of the widget you can show when it is collapsed.
And here is the demo :
I am creating a new page route PopupRoute and using a Stack as the root of the new popup page. It works fine until I add Text to its children. Text will have two yellow lines underneath. I tried Material(child:Stack()) and Scaffold(child:Stack()). It can fix the yellow line issue, but it covers the entire screen and make the barrierDismissible not work.
Are there any other widgets can solve the Text yellow issues in my case?
You just need to wrap your Text widget inside a DefaultTextStyle widget. A DefaultTextStyle widget gets added implicitly by the Scaffold or Material widget.
DefaultTextStyle(
style: TextStyle(),
child: Text("This is a test"),
),
There might be a cleaner solution, but the first thing I thought of is wrapping Material inside of Align widget.
e.g.
showDialog(context: context, barrierDismissible: true, builder: (context) {
return Stack(alignment: Alignment.center, fit: StackFit.loose, children: <Widget>[
Container(width: 100, height: 100, color: Colors.blue),
Align(
child: Material(
type: MaterialType.transparency,
child: Text("TEXT"),
)
),
]);
});