CODEWITHSUNDEEP
flutter
undermouse
undermouse

Reputation: 41

Fully transparent status bar in Flutter

I try to set transparent status bar in my Flutter App, but this does not make status bar fully transparent, it's like some dark color with opacity (the app has white background):
How it looks

And this is how I set status bar color in the build method of the App class:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    // Not pretty much needed in this example, I'm just setting the color
    // for my nav bar to fit the theme
    systemNavigationBarColor: theme.current.primaryColor,
));

What I have tried:

Upvotes: 1

Views: 3052

Answers (5)

Lara Kreisz
Lara Kreisz

Reputation: 41

in the main.dart I have changed the void main() in the following way...

void main() {
 WidgetsFlutterBinding.ensureInitialized();

 // makes Smartphone Statusbar transparent
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.transparent,
  statusBarIconBrightness: Brightness.light,
  statusBarBrightness: Brightness.dark));

 runApp(const MyApp());
}

worked for me : )

Upvotes: 0

undermouse
undermouse

Reputation: 41

I've resolved my issue by setting to false SystemUiOverlayStyle.systemStatusBarContrastEnforced to false. Apparently, flutter was forcing contrast and automatically set background for transparent black and icons white, while I needed black icons on transparent background (hence white because of app's background).

Big thanks for everybody who have tried to help me.

Upvotes: 3

Esmaeil Ahmadipour
Esmaeil Ahmadipour

Reputation: 1192

You can use sample code to have custom statusBar color :

      Widget build(BuildContext context) {
   return Scaffold(
/*  appBar: AppBar(), */ //  <==== solution worked when no appBar
    body: Container(
      color: Colors.red, // < ===  specific color for status bar
      child: SafeArea(
        child: Container(
            color: Colors.blue,
            child: Center(child: Text("Sample"))),
      ),
    ));}

Upvotes: 0

Rahul
Rahul

Reputation: 4341

Use AppBar's systemOverlayStyle property

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        useMaterial3: true,
        primarySwatch: Colors.blue,
      ),
      darkTheme: ThemeData(
        useMaterial3: true,
        primarySwatch: Colors.teal,
      ),
      themeMode: ThemeMode.system,
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        systemOverlayStyle: SystemUiOverlayStyle.dark
            .copyWith(statusBarColor: Colors.transparent),
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Output: Transparent statusbar

Upvotes: 0

sharib ahmed
sharib ahmed

Reputation: 194

If that's not working then you can try this:

Add this in your main method like this

void main() {
 WidgetsFlutterBinding.ensureInitialized();
 //
 SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.transparent,
  systemNavigationBarColor: theme.current.primaryColor
  statusBarIconBrightness: Brightness.dark));
 //
 runApp(const MyApp());
}

This will make all your screen's status bar transparent.

Let me know if this doesn't help you.

Upvotes: 0

Related Questions