При использовании Sliver App Bar в приложении Flutter цвет строки состояния и навигационной панели не меняется

Question

Это код, который я использовал для переключения между темным и светлым режимами. Все работает нормально, но цвет панели навигации и строки состояния не меняется автоматически, когда мое поддерево виджета содержит «Панель приложения Sliver».

Вот предварительный просмотр

PS: как только я удаляю панель приложений Sliver, все работает нормально

.

Код, который я использовал для переключения между темами.

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,
    ));
  });
}

.

Код, который я использовал для панели приложений Sliver

class _HomeScreen extends State<HomeScreen>{
  @override
  Widget build(BuildContext context) {

    return CustomScrollView(
        physics: BouncingScrollPhysics(),
        slivers: <Widget>[
          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&w=1000&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: <Widget>[
              Padding(
                padding: EdgeInsets.only(
                  right: 8
                ),
                child: IconButton(
                  icon: Icon(
                    Icons.more_vert
                  ),
                  onPressed: () {},
                ),
              )
            ],
          ),

        ],
      );
  }
}

Answer 1

Вы можете попробовать добавить опору: яркость: MediaQuery.of (context) .platformBrightness в SliverAppBar?

Answer 2

Я взял ваш код и внес некоторые изменения, чтобы он работал. Я переместил метод, который изменяет яркость и цвета вашего приложения, в основной виджет, делая его состоящим из состояния. Это позволяет вам легко изменять яркость всего вашего приложения, включая строку состояния. Я также переместил изменения System Chrome за пределы setState, поскольку они не нуждаются в применении. Проверьте код ниже и проверьте его самостоятельно:

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Brightness _themeBrightness = Brightness.light;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        brightness: _themeBrightness,
        primarySwatch: Colors.blueGrey,
        appBarTheme: AppBarTheme(
          brightness: _themeBrightness
        ),
      ),
      home: Scaffold(
        body: SliverAppBarTheme60543149(
          swapThemeBrightness: swapThemeBrightness,
        )
      ),
    );
  }

  void swapThemeBrightness(){
    if (_themeBrightness == Brightness.light) {
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        statusBarColor: Colors.black,
        systemNavigationBarColor: Colors.black,
        systemNavigationBarIconBrightness: Brightness.light,
      ));
      setState(() {
        _themeBrightness = Brightness.dark;
      });
    } else {
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        statusBarColor: Colors.white,
        systemNavigationBarColor: Colors.white,
        systemNavigationBarIconBrightness: Brightness.dark,
        systemNavigationBarDividerColor: Colors.white,
      ));
      setState(() {
        _themeBrightness = Brightness.light;
      });
    }
  }
}

class SliverAppBarTheme60543149 extends StatefulWidget {
  final Function swapThemeBrightness;

  SliverAppBarTheme60543149({
    @required this.swapThemeBrightness
  });

  @override
  _SliverAppBarTheme60543149State createState() => _SliverAppBarTheme60543149State();
}

class _SliverAppBarTheme60543149State extends State<SliverAppBarTheme60543149> {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      physics: BouncingScrollPhysics(),
      slivers: <Widget>[
        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: Container(
              height: 60,
              width: 60,
              color: Colors.blue,
            ),
          ),
          actions: <Widget>[
            Padding(
              padding: EdgeInsets.only(
                right: 8
              ),
              child: IconButton(
                icon: Icon(
                  Icons.more_vert
                ),
                onPressed: () {},
              ),
            )
          ],
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, int){
              return Padding(
                padding: const EdgeInsets.all(8.0),
                child: RaisedButton(
                  onPressed: widget.swapThemeBrightness,
                  child: Text('Swap theme'),
                ),
              );
            },
            childCount: 1,
          ),
        ),
      ],
    );
  }
}