title: Safe Area + AppBar/NestedScrollView creates an unwanted bar in Flutter
body: <p>When I work with NestedScrollView/SliverAppbar + want to keep the body in the Safe Area, it automatically creates an empty horizontal bar between the AppBar and the body (I made the color of this bar orange to visually help the issue). Is there a way I can get rid of this bar and also keep the body section inside the safe area at the same time? Thank you!</p>
  <p>Code Below:</p>
  <pre><code>import 'package:flutter/material.dart';
  
  void main() {
    runApp(MyApp());
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Demo',
        home: MyHomePage(),
      );
    }
  }
  
  class MyHomePage extends StatefulWidget {
    MyHomePage({
      Key? key,
    }) : super(key: key);
  
    @override
    _MyHomePageState createState() =&gt; _MyHomePageState();
  }
  
  class _MyHomePageState extends State&lt;MyHomePage&gt; {
    @override
    Widget build(BuildContext context) =&gt; Scaffold(
          backgroundColor: Colors.orange,
          body: NestedScrollView(
            floatHeaderSlivers: true,
            headerSliverBuilder: (context, innerBoxIsScrolled) =&gt; [
              SliverAppBar(
                title:
                    Text('AppBar', style: const TextStyle(color: Colors.black)),
                backgroundColor: Color.fromARGB(255, 244, 243, 243),
              ),
            ],
            body: SafeArea(
              child: Container(
                color: Colors.blue,
                child: Text(
                  'text',
                  style: const TextStyle(color: Colors.black),
                ),
              ),
            ),
          ),
        );
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/24NaK.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/24NaK.jpg" alt="screenshot below" /></a></p>