银色应用栏折叠时如何以编程方式更改状态栏图标亮度？

Question

I am using a simple flutter widget sliver app bar.

and I want to switch the status bar icon brightness when the sliver app bar is collapsed. here I am listening to the scrollbar and calling function when the app bar is collapsed. and setting state with the appropriate brightness.

code:-

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> with RouteAware {
  ScrollController _scrollController;
  SystemUiOverlayStyle _brightness = SystemUiOverlayStyle.light;
  @override
  void initState() {
    this._scrollController = ScrollController()
      ..addListener(() => _isAppBarExpanded
          ? setState(
              () {
                _brightness = SystemUiOverlayStyle.light;
                print('setState is called 1 ');
              },
            )
          : setState(() {
              print('setState is called 2 ');
              _brightness = SystemUiOverlayStyle.dark;
            }));
  }
  bool get _isAppBarExpanded {
    return _scrollController.hasClients &&
        _scrollController.offset > (200 - kToolbarHeight);
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnnotatedRegion<SystemUiOverlayStyle>(
        value: _brightness,
        child: Stack(
          children: <Widget>[
            CustomScrollView(
              controller: this._scrollController,
              slivers: <Widget>[
                SliverAppBar(
                  backgroundColor: Colors.grey[50],
                  expandedHeight: 200,
                  elevation: 0,
                  flexibleSpace: Container()
                ),
                ExerciseList(
                  data: widget.data,
                ),
              ],
            ),
            Container(),
          ],
        ),
      ),
    );
  }
}

nothing is working, what is the problem here?

Answer 1

Your SliverAppBar uses AppBar internally. Have a look at this code, which is from AppBar:

   final Brightness brightness = widget.brightness
      ?? appBarTheme.brightness
      ?? theme.primaryColorBrightness;
    final SystemUiOverlayStyle overlayStyle = brightness == Brightness.dark
      ? SystemUiOverlayStyle.light
      : SystemUiOverlayStyle.dark;

So basically your SliverAppBar overrides the SystemUIOverlayStyle, so I suggest to add brightness: _isAppBarExpanded? Brightness.light: Brightness.dark, brightness: _isAppBarExpanded? Brightness.light: Brightness.dark, to your SliverAppBar .

Answer 2

Plase checkout my code and if it solve your problem then let me know:)

I fixed your code as below:

import 'package:flutter/material.dart';

main() => runApp(MaterialApp(
      home: MyWidget(),
    ));

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> with RouteAware {
  ScrollController _scrollController;
  bool _isAppBarCollapsed = false;

  @override
  void initState() {
    super.initState();
    this._scrollController = ScrollController()
      ..addListener(() {
        if (isCollapsed() && !_isAppBarCollapsed) {
          setState(() {
            _isAppBarCollapsed = true;
          });
        } else if (!isCollapsed() && _isAppBarCollapsed) {
          setState(() {
            _isAppBarCollapsed = false;
          });
        }
      });
  }

  bool isCollapsed() {
    return _scrollController.hasClients &&
        _scrollController.offset > (280 - kToolbarHeight);
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      top: _isAppBarCollapsed,
      bottom: false,
      right: false,
      left: false,
      child: Scaffold(
        body: Stack(
          children: <Widget>[
            CustomScrollView(
              controller: this._scrollController,
              slivers: <Widget>[
                SliverAppBar(
                    backgroundColor: Colors.green /*Colors.grey[50]*/,
                    expandedHeight: 200,
                    elevation: 0,
                    flexibleSpace: Container()),
                SliverList(
                    delegate: SliverChildListDelegate([
                  Container(
                    height: 2000,
                    child: Text('item 9'),
                    color: Colors.blue,
                  ),
                ]))
              ],
            ),
            Container(),
          ],
        ),
      ),
    );
  }
}

Answer 3

I believe there are some issues with Appbar and SliverApppbar brightness property, specially in ios. ( some quick googling brought this https://github.com/flutter/flutter/issues/41067 )

What i have successfully done in the past, was to wrap my Scaffold in a Theme and override the appBarTheme like below:

Theme(
    data: Theme.of(context).copyWith(
      appBarTheme: AppBarTheme(
        brightness: _isAppBarCollapsed ? Brightness.light : Brightness.dark,
      ),
    ),
    child: Scaffold(...),
);

I hope this solves your issue.