How to make status bar Transparent in flutter? - mobile

Question

The one of the solution which I have found for it.
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(statusBarColor: Colors.transparent));

Answer 1

AFAIK, the one you've found is actually a better solution. You can check it from the Flutter documentation.
setSystemUIOverlayStyle method
void setSystemUIOverlayStyle (
SystemUiOverlayStyle style
)
Specifies the style to use for the system overlays that are visible
(if any).
I've written a basic example to check how it looks.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
));
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text(widget.title),
),
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),
),
);
}
}
Output:
Regarding the size, it seems that using the Flutter built-in solution is a better practice than using 3rd party plugins. There are also some things that you can do to reduce the size of your application. Check this blog for some tips. To summarize, these are the listed items in the said blog that you need to optimize:
Image Asset
Use Google Fonts
Icons
Dynamic App Delivery
Cache
Proguard
Use Specific Libraries
In the documentation, you can check about "Measuring your app's size". As most of the developers are concerned with the size of the app so Flutter made this documentation available.