How to change the status bar icon brightness programmatically when the sliver app bar collapsed?

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?

Solution

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, to your SliverAppBar.

Comments

[jdaz]

You have two periods in ScrollController() ..addListener(() => _isAppBarExpanded