Flutter - 在没有 AppBar 的情况下更改状态栏颜色

Question

How to change status bar color whithout AppBar?

my snippet code:

 @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle.light,
        child: BodyWidget(),
      ),//
    );
  }

Answer 1

import 'package:flutter/services.dart';

AppBar(
        systemOverlayStyle: const SystemUiOverlayStyle(
          statusBarColor: Colors.red,
        ),
      ),

Answer 2

Another effective way this can be done:

class MyWidget extends StatelessWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.red,
        systemNavigationBarColor: Colors.red,
        statusBarIconBrightness: Brightness.dark,
        systemNavigationBarIconBrightness: Brightness.dark,
      ),
      child: Scaffold(),
    );
  }
}

Answer 3

this work for me



@override 
Widget build(BuildContext context) {
return Scaffold(
  body: AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle.light,
    child: BodyWidget(),
  ),//
);
}

Answer 4

I use one general SafeArea in MaterialApp for all pages.

        MaterialApp(
                          builder: (context, child) {
                            return Container(
                              color: Theme.of(context).colorScheme.primary,
                              child: SafeArea(
                                child: child!,
                              ),
                            );
                              },// other material-app parameters...
   
                    ),