SystemChrome.setEnabledSystemUIMode adds "Viewing full screen" dialog? - flutter

I'd like to remove the status bar at the top of android screens. When I add the code below to my first screen
void initState() {
super.initState();
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);
}
it removes the bar but adds the dialog below? How do I just remove the status bar?

Related

flutter : hide status bar (bottom)

I have a design in adobe xd. I want to apply it to flutter. The application should not have a status bar bottom in all layout screens. I added this code in the main:
main code :
void main() {
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
overlays: [SystemUiOverlay.top]);
runApp(const MyApp());
}
status bar bottom has actually disappeared but when I press a button to enter another screen it appears first on the first click and when I press again it moves to the other screen and remains visible and does not disappear even though I put the status bar bottom code in the main
These attached pictures illustrate my explanation above in full:
:
import 'package:flutter/services.dart';
Hide Statusbar
SystemChrome.setEnabledSystemUIMode([SystemUiOverlay.bottom])
For Single Screen
#override
void initState() {
// put hide code here to hide statusbar
super.initState();
}

Whitespace in bottom of my Flutter App when I run on emulator

When I launch my app with the smartphone emulator I get a white space at the bottom :
I tried to add this line in my Scaffold but doesn't seems to work :
resizeToAvoidBottomInset: false
It looks like the white space is coming from your device navigation bar.
Try to set SystemChrome.setEnabledSystemUIMode() to manually set the ui overlays you want.
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setEnabledSystemUIMode(
SystemUiMode.manual,
overlays: [SystemUiOverlay.top],
);
runApp(AppWidget());
}
Or set overlays: [], for fullscreen
Documentation: https://api.flutter.dev/flutter/services/SystemChrome/setEnabledSystemUIMode.html

How do I animate to another tab from a button?

My Flutter app structure is making it hard for me to make tab transitions.
Screenshot
main.dart controls the tabs on the top, and there is a separate homeTab.dart file that controls the page below the tab: Annotated
I want to make it so that when the "Discover More" button at the bottom (which is made from homeTab.dart) is tapped, it animates to the second tab "Browse".
I added this to main.dart:
TabController tabController;
#override
void initState() {
tabController = new TabController(length: 5, vsync: this, initialIndex: 0);
getEmail();
}
changeTabToBrowse(){
tabController.animateTo(1);
}
The changeTabToBrowse() function works, but I can only call it from main.dart. I tried passing the function to homeTab.dart as a parameter, but it doesn't do anything.

Flutter: CupertinoTabScaffold tab content does not refresh after closing PageRoute

Problem: CupertinoTabScaffold tab content does not refresh after closing new screen from CupertinoPageRoute
App:
There is a list of data in a Listview.
I open one data set and remove the favourite status (checked=false).
I close the data set and the listview should refresh (FutureBuilder to an SQL database).
Details:
I've got a Flutter App with two layouts (Material and Cupertino).
In each layout i have four tabs and the content widgets are the same.
On the Cupertino App every tab consists of a CupertinoPageScaffold.
When i press on an element it navigates to a new screen with CupertinoPageRoute.
After closing the CupertinoPageRoute the tab content is not refreshing.
The tab content is refreshing when i switch between the four tabs.
If one CupertinoPageRoute is open and i open a new one from here and close it again
then the content of the opened CupertinoPageScaffold is refreshing.
The data is refreshing without a callback etc., just by calling the future (i think).
Means there should be a problem with the CupertinoTabScaffold.
There is no problem on the Material App.
The tab contents of the Material App are refreshing when closing a MaterialPageRoute.
Question:
Is there a problem at this position?
Do you have the same issue or maybe a solution or workaround?
Code:
My code is not really representative so i will create a new clean project for you.
please confirm if code is necessary.
What i tried:
I tried a lot of solutions from the internet like callbacks, setState, .then, .whencomplete for the route.
nothing seems to work.
Thank you in advance.
EDIT 03.10.2021: the tabcontroller with SingleTickerProviderStateMixin reloads the open tab when i open or close an new screen. if i just use DefaultTabController Widget than it doesn't. So i have to edit the CupertinoTabController.
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
late TabController _tabController;
final CupertinoTabController _cuptabController = CupertinoTabController();
Future<void> _refreshdata() async {
downloadJSON1();
setState(() {
});
}
callback() {
_refreshdata();
}
#override
void initState() {
_refreshdata();
super.initState();
_tabController = TabController(vsync: this, length: 2, initialIndex: 0);
_cuptabController.index = widget.starttab;
}
#override
void dispose() {
_tabController.dispose();
super.dispose();
}
...
}
I can suggest a few options:
Option 1:
change your FutureBuilder into a StreamBuilder.
FutureBuilder does not refresh automatically when you save the data which StreamBuilder does very well.
Option 2:
Use a setState but not on the context of the route you are closing, but rather on the context of the original page you want to refreh
setState(() { });
for the moment i solved it with a .then-callback from PageRoute. i just passed the callback to the deepest Widget/PageRoute. But if you have a solution/idea for the tabcontroller would be great.
Souce:
how to refresh state on Navigator.Pop or Push in flutter
Navigator.push(context,
CupertinoPageRoute(
builder: (BuildContext context) => MyWidget(
'myparameters'),),).then((value) => setState(() {callback();}));

How to enable disable edit mode on tabs view in Flutter

I want to enable "edit" mode for some elements in selected tab, the problem is
if im using edit btn in appBar menu i enable edit mode for all the tabs not just selected.
When user select tab and click edit from appBar i want to switch view to edit mode for that tab only ,and on save to switch back. If user quit in the middle of editing by clicking other tab or swipe, i want to show non editing tabs again.
Im calling this fro edit btn.
void _editModeCall(String u) {
setState(() {
_editMode = true;
});
}
Than i got five tabs like this:
firstTab(){
if(_editMode){
return _editmodeView();
}else{
return _defoultView();
}
}
And on save btn aim switching bool _editMode,, that is working but this way i enable "editMode" on all tabs not just selected.
How to get index or someother way to know on witch tab are user and enable edit view just for that tab?
You can use the TabController class for this. You can create a new TabBar Widget and append a TabController to it:
_tabController = new TabController(length: 3, vsync: this);
TabBar(controller: _tabController);
Then to get the current index, call _tabController.index. Then use a setState() call and change the State of only the visible TabBarView page.
Reference: https://api.flutter.dev/flutter/material/TabController-class.html