title: Status bar and navigation bar color is not switching when using Sliver App Bar in Flutter App
body: <p>This is the code I used to switch between dark mode and light mode. Everything works fine but the color of navigation bar and status bar doesn't change automatically when my widget subtree contains "Sliver App Bar."</p>
  
  <p><a href="https://twitter.com/i/status/1235488232638271488" rel="nofollow noreferrer">Here's the preview</a></p>
  
  <p><strong>PS: As soon as I remove the Sliver App Bar, everything works fine</strong></p>
  
  <p>.</p>
  
  <p>Code I used to switch between theme.</p>
  
  <pre><code>if (MediaQuery.of(context).platformBrightness == Brightness.light) {
    setState(() {
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
        statusBarColor: Color(0xDCDCDCDC).withOpacity(1),
        statusBarIconBrightness: Brightness.dark,
        systemNavigationBarColor: Color(0xFAFAFAFA),
        systemNavigationBarIconBrightness: Brightness.dark,
      ));
    });
  } 
  else {
    setState(() {
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
        statusBarColor: Color(0x000).withOpacity(1),
        statusBarIconBrightness: Brightness.light,
        systemNavigationBarColor: Colors.black.withAlpha(234),
        systemNavigationBarIconBrightness: Brightness.light,
      ));
    });
  }
  </code></pre>
  
  <p>.</p>
  
  <p><em>Code I used for Sliver App Bar</em></p>
  
  <pre><code>class _HomeScreen extends State&lt;HomeScreen&gt;{
    @override
    Widget build(BuildContext context) {
  
      return CustomScrollView(
          physics: BouncingScrollPhysics(),
          slivers: &lt;Widget&gt;[
            SliverAppBar(
              title: Text(
                "Home",
                style: Theme.of(context).textTheme.title.copyWith(fontWeight: FontWeight.w600),
              ),
              floating: true,
              backgroundColor: Theme.of(context).primaryColorDark,
              elevation: 3,
              forceElevated: true,
              leading: Padding(
                padding: EdgeInsets.only(
                  left: 16,
                  top: 10,
                  bottom: 10
                ),
                child: ClipOval(
                  clipper: ProfileClipper(),
                  child: Image.network(
                    'https://images.unsplash.com/photo-1511447333015-45b65e60f6d5?ixlib=rb-1.2.1&amp;w=1000&amp;q=80',
                    fit: BoxFit.cover,
                    loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) {
                      if (loadingProgress == null)
                        return child;
                      return Center(
                        child: CircularProgressIndicator(
                          value: loadingProgress.expectedTotalBytes != null
                              ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes
                              : null,
                        ),
                      );
                    },
                  ),
                ),
              ),
              actions: &lt;Widget&gt;[
                Padding(
                  padding: EdgeInsets.only(
                    right: 8
                  ),
                  child: IconButton(
                    icon: Icon(
                      Icons.more_vert
                    ),
                    onPressed: () {},
                  ),
                )
              ],
            ),
  
          ],
        );
    }
  }
  </code></pre>