Menu
I can save my flutter web app on home screen as an bookmark icon. When I open it, the status bar color is black which looks very odd and does not appear to be an 'app like'.
How can I give the same color as my scaffold to the status bar?
My existing code is as follows:
...
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider<CP>(
create: (BuildContext content) => CP(),
child: MaterialApp(
title: 'App title',
debugShowCheckedModeBanner: false,
theme: ThemeData(
canvasColor: Colors.transparent,
primarySwatch: white,
//primaryColor: Colors.white
),
routes: {
...
},
home: MainBody()),
);
}
}
class MainBody extends StatefulWidget {
@override
_MainBodyState createState() => _MainBodyState();
}
class _MainBodyState extends State<MainBody> {
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
stops: [0.1, 1],
end: Alignment.bottomCenter,
begin: Alignment.topCenter,
colors: [
Provider.of<CP>(context).primary,
Provider.of<CP>(context).secondary,
],
), //Provider.of<CP>(context).fMainPageGradient
),
child: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
....
690
Just add this line in index.html to the <head> tag and replace "#000000" with the color you like.
<meta name="theme-color" content="#000000">
answered Oct 19 '25 03:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With