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
Related
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.
I am using flutter 3.0.0
In my application I am displaying a native video using platform view.
The video is displaying but it is always displaying on upper left corner and it covers other
widgets even they are in a stack.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Stack(
children: [
Center(
child: ConstrainedBox(
constraints:
const BoxConstraints.expand(height: 200, width: 200),
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child:
const AndroidView(viewType: 'remote-video'),
),
),
Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: () {
MethodChannels.coreMethodChannel
.invokeMethod("load");
},
child: const Text('Invoke'),
),
),
],
),
],
),
);
}
This is how it looks when I run the code
As you can see it is displaying over everything.
Can you provide some advice on how to fix this?
As of 31/07/2022 this seems to be a bug in flutter >= 3.0.0. Following the solution in this question Flutter AndroidView Widget I downgraded to 2.10.5 and then it worked as expected. Hopefully the flutter team will resolve it shortly.
I am new in flutter.
I am following some YouTube videos to learn flutter. After adding a picture in card(home screen) now I want to add two buttons below that picture. how can i do it.
the picture Adding code
body: Center(
child: Card(
child: Column(
children: [Image.asset("assets/image-name")],
),
),
),
Here you have a great page, where you can find implementations of basic material widgets in Flutter.
For your example, it would look like this:
body: Center(
child: Card(
child: Column(
children: [
Image.asset("assets/image-name"),
ElevatedButton(
onPressed: () {
// Respond to button press
},
child: Text('CONTAINED BUTTON'),
)
],
),
),
),
For a second button, you can just add another one in the children array.
You can also wrap both buttons in Row widget, that will allow you to place them horizontally, next to each other.
i am created an SVG image for background, but it is loaded after some time, the issue is:
when it is not loaded yet all widgets appears randomly. i just need a loader after the image loaded it page widget appears.
the code is:
Scaffold(
appBar: const _CustomNotificationAppBar(),
body: isFinished
? SingleChildScrollView(
child: Stack(
children: [
//notification background
Opacity(
opacity: 0.42,
child: SvgPicture.asset(
'assets/images/notification_background.svg',
),
),
IconButton(
icon: const Icon(
Icons.notifications_active_outlined,
),
onPressed: () {})),
],
),
)
: const Center(
child: CircularProgressIndicator(),
),
);
well if I understands you well and as long as your SVG is loading from the device "asset",
there should not be delay in first place.
I think the problem is you emulator or physical device is too slow , And you may face this problem in debug only
try to run flutter build APK and install that generated APK in your phone and check if problem remains.
however you can achieve that also like this
SvgPicture.asset(
'assets/images/notification_background.svg',
placeholderBuilder: (context) => Text("I am Loading"),
),
You can wrap it in a Container, and it will work.
For eg:
Container(
//height :desired height,
//width : desired width
child: Opacity(
opacity: 0.42,
child: SvgPicture.asset(
'assets/images/notification_background.svg',
),
))
You can pass a placeholderBuilder to your SvgPicture.asset like this:
SvgPicture.asset(
'assets/images/notification_background.svg',
placeholderBuilder: (context) => Icon(Icons.your_desired_icon),
),
You can also wrap the Icon with a SizedBox if you need to comply with a certain size, or replace it by any other widget that you wish.
More info about the widget you're using is available in its API docs.
I am using Flutter. In the scaffold body I use
Overlay.of(context).insert(...)
to insert a login dialog.
However, when I try to select the username/password fields, no keyboard shows up.
When I use the login widget in the 'normal' tree, it works. Moving it in the overlay makes it so the keyboard does not show.
Am I missing something here? Shouldn't this just work?
You need wrap your widgets in a FocusScope like the following:
overlayEntry = OverlayEntry(builder: (context) {
FocusScope.of(context).setFirstFocus(focusScopeNode);
return Material(
child: FocusScope(
node: focusScopeNode,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
TextField(),
],
),
),
),
);
});
Overlay.of(context).insert(overlayEntry);
In fact, for a login page, I would just use the Navigator to push it in.