How to get the status bar height when SystemUiMode is defined to hide the status bar?

Question

I'm overlaying my SystemUiMode, the code is below:

SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);

I need this SystemUiMode. Well i have widgets within a SingleChildScrollView (a form let's say). When the keyboard shows up and my content inside the ScrollView is big enough to fill all the available space it hits the top margin of the screen. I wanted a design where my SingleChildScroview had a top padding of the same size of the status bar.

I tried:

1. To use SafeArea: but it doesn't work, in a first moment my widget fill the entire available space ignoring the status bar height, then it flickers between the expected layout and then goes to filled again. Below is the code:

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

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;

    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);

    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.green,
        body: Center(
          child: SingleChildScrollView(
            child: Center(
              child: Container(
                width: size.width * .8,
                height: size.height * .9,
                color: Colors.red,
                child: Center(child: TextField()),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

2. I tried to listen to the changes of the MediaQuery and store the value of the height, but when the keyboard shows up for the first time (sometimes in a second too) it fills the entire space available.

  static double topPadding = 0;

  setTopPadding(double newPad) {
    if (newPad > topPadding) topPadding = newPad;
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;

    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);

    setTopPadding(MediaQuery.of(context).viewPadding.top);

    return Scaffold(
      backgroundColor: Colors.green,
      body: Center(
        child: Padding(
          padding: EdgeInsets.only(top: topPadding),
          child: SingleChildScrollView(

            child: Center(
              child: Container(
                  width: size.width * .8,
                  height: size.height * .9,
                  color: Colors.red,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Text("A"),
                      TextField(),
                      Text("B"),
                      TextField(),
                    ],
                  )),
            ),
          ),
        ),
      ),
    );
  }

What's the way to get the static height of the status bar?

Answer 1

you can the give Colors.transparent to statusBarColor of the systemOverlayStyle

that makes the statusBar disappear

better to use CustomScrollView Widget instead of SingleChildScrollView...

    CustomScrollView(
                physics: const BouncingScrollPhysics(), slivers: [
              SliverAppBar(
                systemOverlayStyle:
                const SystemUiOverlayStyle(statusBarColor: Colors.transparent ),
                flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: 'hello',
                background: NetworkImage(imageUrl: networkImage),
),
),
                SliverList(
                delegate: SliverChildListDelegate(
                  [
                    Container(
                      decoration: const BoxDecoration(
                          borderRadius: BorderRadius.only(
                              topRight: Radius.circular(30),
                              topLeft: Radius.circular(30))),
                      padding: const EdgeInsets.symmetric(horizontal: 14.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          SizedBox(height: getScreenHeight(10)),
                          Text(
                            name,
                            maxLines: 1,
                            style: Theme.of(context).textTheme.subtitle1,
                            textAlign: TextAlign.start,
                          ),]
),)
]);

          ),
 ),
},