'Safe Area + AppBar/NestedScrollView creates an unwanted bar in Flutter

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!

Code Below:

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() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) => Scaffold(
        backgroundColor: Colors.orange,
        body: NestedScrollView(
          floatHeaderSlivers: true,
          headerSliverBuilder: (context, innerBoxIsScrolled) => [
            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),
              ),
            ),
          ),
        ),
      );
}

screenshot below



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source