Glitch with page transitioning animation in flutter - android

I have recently made a dark mode for my app and noticed a weird glitch. Whenever a page is sliding, a white line appears at the edge of the sliding page. The line flashes during the animation and disappears when it is done. It may be happening even when I use lighter colors, but it's more noticeable with the dark theme. I think it's best illustrated with a picture:
This animation glitch happens with the drawer aswell, but only when I tap a button to open it and not when I use my finger to slide the drawer. It happens on both iOS and android.
Any ideas as to what may be going on?

I found the issue, it is the canvas color that is showing. To change that color, just change the canvasColor in the ThemeData of your material app. If you match this color with the background color of the page that is sliding, it will not be visible.
MaterialApp(
home: Main(),
theme: ThemeData(
canvasColor: backgroundColor //Change to match the background of the page
),
)

Related

Flutter Drawer gets closed automatically outside of it's click

I want to prevent my end drawer to be closed after clicking outside of it, I open my endDrawer with this line scaffoldKey.currentState.openEndDrawer so when I accidentally click outside of this drawer where you see gray drawerScrimColor it gets closed automatically as per its natural behavior, I do not want to do that what I see is only endDrawerEnableOpenDragGesture: false but this prevents my drawer not to be opened with DragGesture but my problem is different I do not want my drawer be closed automatically upon clicking outside of it please help me out your help will be appreciated thanks a lot in advance
I faced the exact same scenario in my app in which I wanted to disable the drawer closing when the outer translucent scrim is clicked.
This is the solution I used (still use):
return Scaffold(
...,
drawer: Container(
color: Colors.transparent,
child:
Row(children: const [SizedBox(width: 304, child: DrawerMenu())])),
...
);
The color of the Container has to be set to something, else it won't work. It is set to transparent as the Scaffold's default translucent scrimColor is enough.
The width is set to 304 as this is the default width of the Drawer as mentioned here.
The Row used here, is not over-engineering, it is used to prevent the child widget expanding to the screen width which is the default behavior of Scaffold's Drawer.
I use this instead of other solutions based on overriding the Gestures as it's simple and it doesn't affect Scrolling in/Dragging the Drawer.

How to remove this overlay on statusbar in emulator Flutter on Android?

This is the Android emulator I am using (in Android Studio). I don't know if this is going to be shown when released as well, but I want to remove this grey looking overlay. Is this by default shown because it's in debug mode or is there a way I can get rid of it?
This is what I have. If I make it light, only the text color becomes light, but I want the whole overlay to be white instead of gray(ish).
AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.dark,
You need to change status bar color before run the app:
void main() {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(
statusBarColor: Colors.blue,
),
);
// Here you can run your app
}

Flutter Android transparent navigation bar and buttons

I have been trying to get a transparent navigation bar for my app, but everything I have tried so far, does not give me the result I am looking for.
As a reference example, here's how the 'Play Store' navigation bar looks:
Notice that it is a dark yet transparent color.
I tried the following in my app:
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
systemNavigationBarColor: Colors.transparent,
systemNavigationBarIconBrightness: Brightness.dark,
statusBarBrightness: Brightness.light
)
);
I have set the background colors for my theme and individual scaffolds to a dark color, but my navigation bar is still white, like the following image:
As you can see in the above image, the status bar accepts it's transparent color, and respects the app background, but the nav bar does not. Changing the nav bar's brightness or giving it another sold color works fine, but transparency does not, so my suspicion is that there is another object or element behind my nav bar with a white color, but I could be wrong.
Note that the dark color above my nav bar, is my Scaffold's backgroundColor property.
The reason I am not assigning the same color to my nav bar and want the transparency, is because I will have other activities that will not have a dark background and in those cases, the nav bar would then have to reflect the light background.
I will change my systemNavigationBarIconBrightness accordingly.
I'm not sure what I'm missing or what I'm doing wrong, but simply put, I want a navigation bar like the Play Store has (It's not the only app with a transparent nav bar) and I hope this is possible with flutter?
Thanks in advance.
I found this Flutter Package and it's working

Android Toolbar home as up indicator material design click effect not shown

I'm working on an Android app with some Material Design features. Currently I'm trying to fix the toolbar, but I have one problem, namely: When I press the home as up arrow to go back to the parent activity, it brings me back to the parent activity but doesn't show a ripple effect (so you see that it is clicked..)
The only thing I do to set the home as up arrow is:
this.getSupportActionBar().setDisplayHomeAsUpEnabled(true);
inside my activity.
Found the bug, it was the color of the toolbar. I chose a very dark green color and therefore the click/riffle effect was not visible. Changing the color to something bright fixed the problem for me..

White screen and actionbar seen on app startup instead of black screen

As JadeMason said here https://android.stackexchange.com/a/1440/74487:
"Black is the default plot color for Android, so this is the placeholder until the app completes it's layout operation"
I noticed most other apps do show black screen while starting up until their layout is ready to show.
However, my app instead shows white screen with the actionbar visible (but the menu items in the action bar are not visible; it is just the black/darkgrey bar and the app icon on the left side of it that are visible).
The background color of the main activity of my app is black. And the radical color transition between the complete white and complete black is so ugly and fatigues my eyes.
I'd like to have the default black screen during my app startup. How to achieve this?
More information on my app:
My app has minSdkVersion 10 and targetSdkVersion 20.
My app theme is Theme.AppCompat.Light.DarkActionBar (is it the appcompat that is
causing this issue?)
Cyril Mottier has a really great blog post about this topic here.

Categories

Resources