CODEWITHSUNDEEP
mobiledartflutter
Sachin Mishra
Sachin Mishra

Reputation: 1183

How to make status bar Transparent in flutter?

The one of the solution which I have found for it.

SystemChrome.setSystemUIOverlayStyle(
        SystemUiOverlayStyle(statusBarColor: Colors.transparent));

Upvotes: 2

Views: 3714

Answers (1)

MαπμQμαπkγVπ.0
MαπμQμαπkγVπ.0

Reputation: 6729

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:

enter image description here

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:

  1. Image Asset
  2. Use Google Fonts
  3. Icons
  4. Dynamic App Delivery
  5. Cache
  6. Proguard
  7. 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.

Upvotes: 2

Related Questions