Safe Area AppBar/NestedScrollView creates an unwanted bar in Flutter-CodePudding

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),
              ),
            ),
          ),
        ),
      );
}

CodePudding user response：

Remove the SafeArea from the body, instead set the whole Scaffold as child of a SafeArea

Your code should be:

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) => SafeArea(
    child: 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: Container(
          color: Colors.blue,
          child: Text(
            'text',
            style: const TextStyle(color: Colors.black),
          ),
        ),
      ),
    ),
  );
}

this will give you the result:

and if you want to always set the status bar icons to be white,

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarIconBrightness: Brightness.light,
    ));