Elevation of status bar

Question

using safeArea like this

 Widget build(BuildContext context) {
return Container(
  color: Colors.white,
  child: SafeArea(
    child: Scaffold(
  appBar: AppBar(
    title: Text("Payment Method"),
    centerTitle: true,
    leading: IconButton(
      icon: Icon(
        Icons.navigate_before,
        size: 40,
      ),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
  ),
        body: RefreshIndicator(
          -----)

i am using this for status bar

     void main() {
    SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarIconBrightness: Brightness.dark,
    systemNavigationBarColor: Colors.white,
    systemNavigationBarIconBrightness: Brightness.dark,
    systemNavigationBarDividerColor: Colors.transparent,
  ));runApp(MyApp());}

but now what happens is appbar and statusbar seems seperated due to elevation of app bar so what can be best fix so that app bar and statusbar seems merged

Answer 1

Implementing your code on Counter App.

  void main() {
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark,
        systemNavigationBarColor: Colors.white,
        systemNavigationBarIconBrightness: Brightness.dark,
        systemNavigationBarDividerColor: Colors.transparent,
      ));
      runApp(MyApp());
    }

    @override
      Widget build(BuildContext context) {
        return SafeArea(
          child: Scaffold(
            appBar: AppBar(
              title: Text(widget.title),
              elevation: 10,
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'You have pushed the button this many times:',
                  ),
                  Text(
                    '$_counter',
                    style: Theme.of(context).textTheme.headline4,
                  ),
                ],
              ),
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: _incrementCounter,
              tooltip: 'Increment',
              child: Icon(Icons.add),
            ),
          ),
        );
      }
    }

This is what I get implementing your the code in Counter App.

Indeed the status bar and AppBar looks separated when you're using SafeArea.

A very simple fix to this is :

Change your statusBarColor like this :

statusBarColor: Colors.blue,

Also remove Debug Banner in MaterialApp adding this:

debugShowCheckedModeBanner: false,

Now the Counter App looks like this :

After these small changes the StatusBar and AppBar doesn't looks separated.