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
Related
After changing color and setting the state of the whole screen, everything rebuilds with the right theme except for the expansion tile (which has the same parent as the list view you see). The expansion tile is a my own widget that I created, where I copied the code of the original expansion tile and just changed the icon direction.
If I switch to a different tab and comeback it's updated and has the right theme.
I am using CupertinoTheme.of(context).barBackgroundColor and this works for all other widgets just fine on updating.
enter image description here
This picture shows how the expansion tile at the bottom still has the dark theme after rebuilding.
enter image description here
This picture shows the TodaysWorkoutListVIewBuilder() which updates just fine and the TodaysCardioListViewBuilder(), which doesn't update the Theme correctly.
enter image description here
Here you can see the usage of the ExpansionTile inside the TodaysCardioListViewBuilder() and when I print the color at the beginning of building this I get the right color(white), but the Expansion Tile collapsed background is still black.
If you have any ideas where I went wrong please tell me.
I found the solution but will leave this on here in case somebody has the same issue.
The error was that MyCupertinoExpansionTile didn't have a key, so it wasn't rebuilding. The solution was to just add the parameter key to the widget:
MyCupertinoExpansionTile(
key: UniqueKey(),
...
),
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())])
I'm new to Flutter and I found a pretty cool design of a todoapp on Dribble so I wanted to create the app.
Here's the design :
I wonder how with the my callBack Function of my CheckBox I could change the color of the text part of the tile to this blue.
My tile is currently a row containing a checkbox and a Container with the text in. So I would like to when i click on the checkbox, the background color of my container turns to blue.
I dont' have a any idea how to do that.
If you have some ideas please tell me.
Flutter apps work with app states, these states contain the information about the screens pushed by the app.
What you need to do is to update the state of your current widget, and change the values that set that background to X color.
Here you have multiple docs about state management: https://flutter.dev/docs/development/data-and-backend/state-mgmt/options, I really recommend for beginners to start with the setState method as is the easiest one.
Also, if you don't know how to manage states I will really recommend to follow the docs to understand how widget works and are build over flutter apps: https://flutter.dev/docs/development/ui/widgets-intro
Well, I just needded to put this in the color property of my container knowing that isChecked is true when my checkbox is clicked.
child: Container(
height: 50,
decoration: BoxDecoration(
borderRadius : BorderRadius.circular(15),
color: widget.isChecked ? Color(0xFF2765f9) : Color(0xFF292E3C),
I am fairly new to Flutter and I try to understand when and why it would be necessary to navigate to a new screen. Most apps keep the same AppBar, Drawer & BottomNavigationBar (if any) through all the different "screens". Wouldn't it be easier to just have one single TabBarView, or only replace the Scaffold's body ?
I have a hard time to really understand the concept of why there needs to be a new Scaffold when routing. I couldn't find anything helpful in the official Flutter doc, even the Cookbook show you a Navigation example with 2 completely new screens just to show a different Text widget inside the Scaffold's body.
Also, what about the efficiency of always rebuilding the whole Scaffold ?
When you route to new page, the previous page stored in history of navigator, so you can easily return to previos page just clicking Back button. In principle all depends on what you need. You may use new page with its own Scaffold as well as one page with single Scaffold and different body widgets. For last case you need to controll Back button manually so this way is enough expensive in development.
I'm asking how to disable Overlays to move when a Scaffold.of(context).showSnackBar is called like on my video below.
The same thing is happening when the keyboard appear. Sometime the blue floattingButton (+) don't come back to it's original position :-(
Thx in advance.
Problem animation
The FloatingActionButton going up when the Scaffold is displayed is something common to all default implementations.
Give a look to the "Bootom app bar" demo in the Gallery app. Press on the search button and you will see it coming up. Or just add a Scaffold to the app that is built with flutter create command.
This happens because of the way the FAB button is placed on the screen and the effect of displaying the Snackbar by the Scaffold.
The FAB button is displayed at the bottom of the content area of the Scaffold content. When the content area is shrinked to include the BottomAppBar, the FAB goes up with it. It has nothing to do with Overlay.
You have two options:
Either you create your own versión of the FAB which is not
controlled by the Scaffold.
Or you hack the Scaffold so the size of the SnackBar is not taken
into account.
For this second option you can try the following:
Go to the file /lib/src/material/scaffold.dart in your flutter installation and look for the line with the code snackBarSize: snackBarSize, inside the _ScaffoldLayout class.
Replace it with snackBarSize: Size(0.0, 0.0),
You will see that the FAB stays in its place.