I'm working on a flutter app, for Android and Web.
I have a stack of GoogleMap widget and a Container like this :
Stack(children: <Widget>[
GoogleMap(),
Container()])
The container is in front of the map, and have some buttons inside.
On Android, it work pretty fine, but on web, the container is well displayed, but have a bizarre behavior.
It's like the map is in front of him, I can move the map, even if i start dragging on the container.
And that creating an annoying issue, when i'm clicking on the container's buttons, it's like i'm clicking on the map ..
And guess what, for the FAB buttons in front of it, it's doing the same thing !
So, i'm searching for an elevation property or something like this, that can detach the container from the map.
And if it's impossible, i would display my container somewhere else.
Thank you ^^
PS i'm using :
google_maps_flutter: ^2.0.6 and
google_maps_flutter_web: ^0.3.0+3
Flutter doctor is fine
PointerInterceptor Widget seems to be the best solver for this issue.
https://pub.dev/packages/pointer_interceptor
It work prety fine !
More infos on the pub page ^^
Stack(children: <Widget>[
GoogleMap(),
PointerInterceptor(
child: Container())])
Related
Im working on my first flutter app so i am still learning possible widgets and how they react in certain structures.
So far I was doing well but cant figure out one thing I want to do.
I want to get a floating button inside of my cupertinopopusurface widget like this.
My structure is similar, on the home screen I have a listview builder that builds my cards and when you press on each one it opens a cupertinopopupsurface.
Inside I also built a Single child scroll view structure for all my contant and its scrollable but I would to get a button that overlays it all and is in a fixed placed.
My structure currently is
CupertinoPopupSurface/
Container/
SingleChildScrollView/
Column/
Children/
Row/ (all rows now with content)
I cant get the button fixed somewhere in the structure but then it follows the scrolling its now fixed overlaying the contant.
You can use stack widget inside cupertinopopupsurface like this:
CupertinoPopupSurface(
child: Stack(
children:[
your SingleChildScrollView,
Positioned(left: 16, right: 16, bottom: 16,child: yourbutton),
]
)
)
I want to make a container collapse (disappear) when scroll down, and expand (appear again) when scroll up. Just like the search bar in microsoft teams mobile.
I tried to do it using SliverAppBar and it worked but the ListView became lagging and had problems. Is there any way to do it without SliverAppBar?
I think you should only replace AppBar Widget with SliverAppBar
hope I could help.
You may check this library hidable
In my book-like Flutter app, there is a requirement to swipe in horizontal direction in order to navigate to previous and next page. I looked for a package which does something like that in pub.dev and didn't find. I'd like to know if there is already something like that to not-invent a wheel. If not, I'd like to hear (not excepting you to make it for me) what approach can be taken in order to implement it by myself.
What you're looking for is the PageView widget. Just provide the pages, the swiping functionality is built-in.
PageView(
controller: _controller,
children: [
MyPage1Widget(),
MyPage2Widget(),
MyPage3Widget(),
],
)
Since you're saying it's for a book which likely has a lot of pages you might want to use PageView.builder() instead of better performance.
There's a more information about the widget here
Well this weird bug seems to have appeared when i recently updated flutter and dart sdk via my android studio IDE.
It worked like a charm before...
here what happens :
this is what is expected
this is what i can have before a rebuild sometimes there is no notch at all...
So, to put words on the problem, the first picture is what i got so far and what i expect to have...
but recently, i did upgrade flutter N dart via the command line and had to face this weird bug...
Depending on the device here what i have :
first build of the screen : incomplete notch margin or even none at all !
when i do interact with a button or whatever provoke a screen rebuild : the notch is good again !
For example, the 2 screenshots come from the exact same screen, nothing changed but an only checkbox checked forcing the screen to rebuild after dirty state...
The problem is that i can't see anything to do since the code is as simple as :
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
...
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked,
floatingActionButton: SizedBox(
height: 85.0,
width: 85.0,
child: FittedBox(
child: FloatingActionButton(
So, is it a known Flutter bug and just have to wait for a bugFix ?
Or can i do something and, if so, what ?
Thanks in advance ! :)
I have the same issue trying to change the page with the navigator and rebuilding one page that has the same bottom app bar with this notch, I think that there is some bug between the fab notch and the navigator.
The workaround in my case is to keep the same route for all the pages and manage more pages changing the widget structure with the state, so if you have 3 pages with this notch you can keep the same page route and change one big sub-widget for each page changing, for example, a state variable that keeps the page like an int that encode one page with a specific number, and when you update this variable the interface rebuild changing this page widget.
This is my workaround, hope that this bug could be solved early but meanwhile this work.
Some images of the bug:
I have this rendering behavior after the first app start and after each rebuild on the same page, note that I have the fab notch in my homepage so at the first start the rendering is good:
I have this behavior after each change of route page with all the Navigator methods, even if in the page the bottom app bar has the same configuration and should render the notch:
If could help someone I recreate the navigator with an inherited widget and a stateful widget on top of the widget tree, this approach gets around the bug, here is my app implementation:
https://github.com/simone-viozzi/progetto-programmazione-mobile/tree/main/flutter_app
Is there a way to build such an effect with Flutter by navigate from one page to another?
Do you have an idea to build an effect like that? I would post code examples, but I really have no idea how to do anything like this...
I think the navigations between those pages are the Hero Animations.
As for another transition, you can use this package.
I hope it will help you.
You can Hero Widget to achieve this.
In the first screen wrap your image with Hero widget and provide it with a tag.
In the second screen wrap your image with Hero widget and provide it with the same tag.
Hero(
tag: 'firstImage'
child: Image.asset('images/1.png'),
)
You can watch the Hero widget video in the Flutter widget of week https://www.youtube.com/watch?v=Be9UH1kXFDw&feature=emb_logo.
To read more about the hero widget, you can checkout https://flutter.dev/docs/development/ui/animations/hero-animations.