Elevation of status bar
175
Implementing your code on Counter App.
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarIconBrightness: Brightness.dark,
systemNavigationBarColor: Colors.white,
systemNavigationBarIconBrightness: Brightness.dark,
systemNavigationBarDividerColor: Colors.transparent,
));
runApp(MyApp());
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text(widget.title),
elevation: 10,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
),
);
}
}
This is what I get implementing your the code in Counter App.
Indeed the status bar and AppBar looks separated when you're using SafeArea
.
A very simple fix to this is :
Change your statusBarColor
like this :
statusBarColor: Colors.blue,
Also remove Debug Banner in MaterialApp
adding this:
debugShowCheckedModeBanner: false,
Now the Counter App looks like this :
After these small changes the StatusBar and AppBar doesn't looks separated.
Author by
Tarun Jain
Updated on December 27, 2022Comments
-
Tarun Jain over 1 year
using safeArea like this
Widget build(BuildContext context) { return Container( color: Colors.white, child: SafeArea( child: Scaffold( appBar: AppBar( title: Text("Payment Method"), centerTitle: true, leading: IconButton( icon: Icon( Icons.navigate_before, size: 40, ), onPressed: () { Navigator.of(context).pop(); }, ), ), body: RefreshIndicator( -----)
i am using this for status bar
void main() { SystemChrome.setSystemUIOverlayStyle( SystemUiOverlayStyle( statusBarColor: Colors.transparent, statusBarIconBrightness: Brightness.dark, systemNavigationBarColor: Colors.white, systemNavigationBarIconBrightness: Brightness.dark, systemNavigationBarDividerColor: Colors.transparent, ));runApp(MyApp());}
but now what happens is appbar and statusbar seems seperated due to elevation of app bar so what can be best fix so that app bar and statusbar seems merged
-
Dominik Šimoník over 3 yearsDid you tried add
elevation: 0
to AppBar ? -
Tarun Jain over 3 yearsactually i need elevation in appbar
-
Shubhamhackz over 3 years@TarunJain Can you share the screenshot ?
-