I have created a flutter app and was checking on a physical device. I looked through the stack overflow for customizing the status bar and got few answers. But when I change the colour of the status bar, the whole status bar's colour changes (Including the battery indicator, mobile networks and other things.) due to which the contents become invisible. How can give separate colours for the contents of the status bar?
Any help will be appreciated.
Here's the code for status bar's colour change:
import 'package:flutter/services.dart';
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.white,
statusBarColor: Colors.black,
));
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
Here's what i am getting :
And this is what I want to achieve :
You can try this.
Using statusBarIconBrightness, statusBarBrightness you can customize the Status bar icon and Brightness.
Widget build(BuildContext context) {
return AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
statusBarBrightness: Brightness.light,// here what you need
statusBarIconBrightness: Brightness.light // here is what you need,
statusBarColor: Colors.black.withOpacity(0.8),
systemNavigationBarColor: Colors.black.withOpacity(0.8)),
child: Scaffold(body: _buildScreenWidget()));
};
You need to play with these properties until you get what you want.
Enjoy!!!
Related
Seeing the following error on setSystemUIOverlayStyle.
Do I have to add some package to pubspec.yaml?
errors:
You can set the StatusBar transparent by adding this in your main():
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
statusBarColor: Colors.transparent));
The problem is that you are putting it inside your runApp().
Your main() should look like this:
void main() {
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
statusBarColor: Colors.transparent));
runApp(const MyApp());
}
Try below code I think you write wrong code. for more refer this
void main() {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(
statusBarColor: Colors.red,//change color on your need
),
);
runApp(const MyApp());
}
Result screen->
You can add this Into your initState() method. this is hide the bottom navigation as well.It is use for Full Screen design.
#override
void initState() {
super.initState();
SystemChrome.setEnabledSystemUIMode(
SystemUiMode.manual,
overlays: [],
);}
I need red status bar with white foreground for my entire app.
I'm using flutter_statusbarcolor package for this.
I did the following so far:
Added the package in pubsec.yaml
Imported the package in my main.dart file
Added the following lines of codes inside the build() of MyApp class
FlutterStatusbarcolor.setStatusBarColor(Colors.red[900]);
FlutterStatusbarcolor.setStatusBarWhiteForeground(true);
Result:
The status bar's color is red(working as it should).
The foreground color is white. But on restart changes to black. On hot reload, changes back to white. But on restart, it'll change back to black.
Here is my complete code:
import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
FlutterStatusbarcolor.setStatusBarColor(Colors.red[900]);
FlutterStatusbarcolor.setStatusBarWhiteForeground(true);
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'App Title',
home: HomeScreen(),
);
}
}
I've also tried the following:
SystemChrome.setSystemUIOverlayStyle()
appBarTheme: Theme.of(context).appBarTheme.copyWith(brightness: Brightness.light)
Nothing's working. Can anyone please help me sustain the white foreground throughout the app?
You can try this from this Doc ==> setSystemUIOverlayStyle method
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.red,
);
return Placeholder(); // using As your Need
}
add this:
import 'package:flutter/services.dart'
use the code below after theme data
home: AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
Hope it work...
When removing system overlays with SystemChrome.setEnabledSystemUIOverlays([]) the app does not expand to fill the screen.
Complete main.dart file:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setEnabledSystemUIOverlays([]);
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Container(
color: Colors.red,
),
);
}
}
Without SystemChrome.setEnabledSystemUIOverlays([]):
Flutter version: 1.22.2
I'm unable to reproduce with Flutter 1.22(stable) but in https://github.com/flutter/flutter/issues/14432 people seem to have had good results with
setting Scaffold.resizeToAvoidBottomPadding to true.
You can also try to update Flutter and/or changing channels. Perhaps even trying on a physical device.
I am looking to have an app with sidebar navigation and also authenticate user on starting the app. The sidebar function ensures the side navigation on every page of the application using the navigation states and the new rootpage ensures that the users get authenticated in order to use the applications. The two require to use a home: function and one cannot have the two in the main.dart file. Any ideas i can incorporate both of them
import 'package:flutter/material.dart';
import 'services/authentication.dart'; //authentication module
import 'sidebar/sidebar_layout.dart'; sidebar navigation
import 'pages/root_page.dart'; //page that looks if user has an id
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'M-Afya',
theme: ThemeData(
scaffoldBackgroundColor: Colors.white,
primaryColor: Colors.white,
),
home: new RootPage(auth: new Auth()) //ensures one must be authenticated to use the application
home: SideBarLayout() //sidebar navigation
);
}
}
How can I do this?
Here is a video that will help you for switches between lgoin and home page + state initialization and you can add your sidebar accordingly. https://www.youtube.com/watch?v=Pl1rKBnmDkU
Where do I run initialisation code when starting a flutter app?
void main() {
return runApp(MaterialApp(
title: "My Flutter App",
theme: new ThemeData(
primaryColor: globals.AFI_COLOUR_PINK,
backgroundColor: Colors.white),
home: RouteSplash(),
));
}
If I want to run some initialisation code to, say fetch shared preferences, or (in my case) initialise a package (and I need to pass in the the BuildContext of the MaterialApp widget), what is the correct way to do this?
Should I wrap the MaterialApp in a FutureBuilder? Or is there a more 'correct' way?
------- EDIT ---------------------------------------------------
I have now placed the initialisation code in RouteSplash() widget. But since I required the BuildContext of the app root for the initialisation, I called the initialisation in the Widget build override and passed in context.ancestorInheritedElementForWidgetOfExactType(MaterialApp). As I don't need to wait for initialisation to complete before showing the splash screen, I haven't used a Future
One simple way of doing this will be calling the RouteSplash as your splash screen and inside it perform the initialization code as shown.
class RouteSplash extends StatefulWidget {
#override
_RouteSplashState createState() => _RouteSplashState();
}
class _RouteSplashState extends State<RouteSplash> {
bool shouldProceed = false;
_fetchPrefs() async {
await Future.delayed(Duration(seconds: 1));// dummy code showing the wait period while getting the preferences
setState(() {
shouldProceed = true;//got the prefs; set to some value if needed
});
}
#override
void initState() {
super.initState();
_fetchPrefs();//running initialisation code; getting prefs etc.
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: shouldProceed
? RaisedButton(
onPressed: () {
//move to next screen and pass the prefs if you want
},
child: Text("Continue"),
)
: CircularProgressIndicator(),//show splash screen here instead of progress indicator
),
);
}
}
and inside the main()
void main() {
runApp(MaterialApp(
home: RouteSplash(),
));
}
Note: It is just one way of doing it. You could use a FutureBuilder if you want.
To run code at startup, put it in your main.dart. Personally, that's the way I do it, to initialise lists etc.