Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to make status bar seeable when appbar is transparent?

I am trying to have an transparent appbar but when I set the background color to transparent, the brightness of the status gets messed up and blends in with the white theme of the background. I am not sure how to work around this. Here is the full code of the page.

import 'package:demo2/pages/create_post_page.dart';
import 'package:demo2/pages/following_post_page.dart';
import 'package:demo2/pages/home_page.dart';
import 'package:demo2/pages/message_page.dart';
import 'package:demo2/pages/notification_page.dart';
import 'package:demo2/pages/saved_page.dart';
import 'package:demo2/pages/search_page.dart';
import 'package:demo2/popup/profile_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_feather_icons/flutter_feather_icons.dart';

class ScreenWrapper extends StatefulWidget {
  ScreenWrapper({super.key});
  

  @override
  State<ScreenWrapper> createState() => _ScreenWrapperState();
}

class _ScreenWrapperState extends State<ScreenWrapper> {

  void setStatusColor (bool theme) {
     if (theme) {
          print(Text('Dark'));


        // Changing "status bar" and "navigation bar" color
        SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
          statusBarColor: Colors.black,
          statusBarIconBrightness: Brightness.dark,
          systemNavigationBarColor: Colors.black,
          systemNavigationBarIconBrightness: Brightness.dark,
        ));
        print(SystemUiOverlayStyle.dark.statusBarColor.toString());

        }
        else {
          print(Text('Light'));

        // Changing "status bar" and "navigation bar" color
        SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
          statusBarColor: Colors.white,
          statusBarIconBrightness: Brightness.light,
          systemNavigationBarColor: Colors.white,
          systemNavigationBarIconBrightness: Brightness.light,

        ));
       

        }
  }
  
  int _currentIndex = 0;

  final _bottomNavigationBarItems = [
    const BottomNavigationBarItem(
      icon: Icon(
        FeatherIcons.home,
      ),
      activeIcon: Icon(
        FeatherIcons.home,
        color: Colors.pink,
      ),
      label: '',
      backgroundColor: null,
    ),
    const BottomNavigationBarItem(
      icon: Icon(
        FeatherIcons.users,
      ),
      activeIcon: Icon(
        FeatherIcons.users,
        color: Colors.blue,
      ),
      label: '',
    ),
    const BottomNavigationBarItem(
      icon: Icon(
        FeatherIcons.plusCircle,
      ),
      activeIcon: Icon(
        FeatherIcons.plusCircle,
        color: Colors.orange,
      ),
      label: '',
    ),
    const BottomNavigationBarItem(
      icon: Icon(
        FeatherIcons.heart,
      ),
      activeIcon: Icon(
        FeatherIcons.heart,
        color: Colors.purple,
      ),
      label: '',
    ),
    const BottomNavigationBarItem(
      icon: Icon(
        FeatherIcons.bookmark,
      ),
      label: '',
      activeIcon: Icon(
        FeatherIcons.bookmark,
        color: Colors.yellow,
      ),
    ),
  ];

  //display profile sheet
  Future _displayProfileSheet(BuildContext context) {

    
    return showModalBottomSheet(
      isScrollControlled: true,
      context: context,
      builder: (context) => ProfilePage(),
    );
  }

  final PageController _pageController = PageController(initialPage: 0);

  @override
  Widget build(BuildContext context) {

// Getting current theme brightness
        //bool isDark =
          //  MediaQuery.of(context).platformBrightness == Brightness.dark;

        

    return Scaffold(
      extendBodyBehindAppBar: true,
      body: Stack(

        alignment: Alignment.topCenter,
        children: [
         
          PageView(
            controller: _pageController,
            onPageChanged: (newIndex) {
              setState(() {
                _currentIndex = newIndex;
              });
            },
            children:  const [
              HomePage(),
              FollowingPostPage(),
              CameraExampleHome(),
              NotificationPage(),
              SavedPage(),
            ],
          ),
           Positioned(
            top:0,
            left: 0,
            right: 0,
            child: AppBar(
              /*systemOverlayStyle: SystemUiOverlayStyle(
                statusBarColor: Colors.transparent,
                statusBarBrightness: Brightness.light,
              ),*/
              backgroundColor: Color.fromARGB(0, 0, 0, 0),
              leadingWidth: 60,
              leading: Padding(
                padding: EdgeInsets.only(left: MediaQuery.of(context).size.width * 0.05),

                //to add profile picture
                child: GestureDetector(
                  onTap: () {
                    _displayProfileSheet(context);
                  },
                  child: CircleAvatar(backgroundColor: Colors.blue,)),
              ), 
              elevation: 0,
              actions: [
                  //to add feedback funtion
                Stack(
                  alignment: Alignment.center,
                  children: [
                    Icon(
                      Icons.circle,
                      color: Colors.red.withOpacity(0.5),
                      size: 50,
                      ),
                    IconButton(
                      onPressed: () {}, 
                      icon: Icon(
                        Icons.flag_outlined,
                        size: 30,
                        color: Colors.white,
                        )),
                  ],
                ),

                  //to add search function
                Padding(
                  padding: EdgeInsets.only(right: MediaQuery.of(context).size.width * 0.03),
                  child: Stack(
                    children: [
                      Icon(
                        Icons.circle,
                        color: Colors.grey.shade100.withOpacity(0.1),
                        size: 50,
                        ),
                      IconButton(
                        onPressed: () {}, 
                        icon: Icon(
                          Icons.search,
                          size: 30,)),
                    ],
                  ),
                ),

                
              ],
            ),
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        iconSize: 30,
        backgroundColor: Theme.of(context).colorScheme.background,
        fixedColor: null,
        currentIndex: _currentIndex,
        items: _bottomNavigationBarItems,
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          setState(() {
            _pageController.animateToPage(
              index,
              duration: const Duration(milliseconds: 10),
              curve: Curves.ease,
            );
          });
        },
      ),
    );
  }
}

Current page

I tried using if functions, while it did work (print ‘Light’ or ‘Dark) the status bar isn’t changing.

Tags:

2

Answers


  1. 0

    This solution might not be very good but this will work for you. Add Empty AppBar in your scaffold:

    appBar: AppBar(
   toolbarHeight: 20,
 ),
    Login or Signup to reply.
  2. 0

    Try to add below code inside your main.dart file inside main method. setSystemUIOverlayStyle

    Import package:

    import 'package:flutter/services.dart';

    Code:

    void main(){
  // device top appbar color
  SystemChrome.setSystemUIOverlayStyle(
    const SystemUiOverlayStyle(statusBarColor: Colors.transparent),// change color on your need
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search