In Flutter, How to make SliverAppBar respect the top safe area on Floating State when it is not primary

Question

I have a SliverAppBar looks like this is normal state which is what I want:

but when scrolling down the app bar doesn't respect the top safe area on its floating state:

here is my build method code

      return Scaffold(
      body: CustomScrollView(
        controller: _scrollController,
        slivers: <Widget>[
          SliverSafeArea(
            bottom: false,
            sliver: SliverPadding(
              padding: const EdgeInsets.symmetric(horizontal: 5),
              sliver: SliverAppBar(
                primary: false,
                centerTitle: true,
                actions: actions,
                floating: true,
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
                title: const Text('title'),
              ),
            ),
          ),
          SliverGrid(
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4,
            ),
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  margin: const EdgeInsets.all(20),
                  color: Colors.amber,
                );
              },
              childCount: 130,
            ),
          ),
        ],
      ),
    );

Answer 1

I think you need a custom app bar for your purpose.

something like this

class FloatingAppBar extends StatelessWidget {
  const FloatingAppBar(
    this.title, {
    this.actions = const <Widget>[],
    Key? key,
    this.leading = const BackButton(),
    this.height = 48,
  }) : super(key: key);

  final String? title;
  final List<Widget> actions;
  final Widget leading;
  final double height;

  @override
  Widget build(BuildContext context) {
    //final Color bgColor = isDark(context) ? Colors.grey.shade800 : Colors.white;
    return Center(
      child: Container(
        height: height,
        width: MediaQuery.of(context).size.width - 20,
        constraints: const BoxConstraints(maxWidth: 600),
        decoration: BoxDecoration(
          color: isDark(context) ? Colors.grey.shade800 : Colors.white,
          borderRadius: BorderRadius.circular(8),
          boxShadow: <BoxShadow>[
            BoxShadow(
              color: isDark(context) ? Colors.black54 : Colors.grey.shade500,
              blurRadius: 1,
              spreadRadius: 0.1,
              offset: const Offset(0, 0.7),
            ),
          ],
        ),
        padding: const EdgeInsets.all(0),
        margin: const EdgeInsets.only(top: 5),
        child: Row(
          children: <Widget>[
            leading,
            Expanded(
              child: Center(
                child: Text(
                  title ?? '',
                  textDirection: getTextDirection(title ?? ''),
                  style: const TextStyle(
                    fontWeight: FontWeight.bold,
                    //color: Colors.black87,
                  ),
                ),
              ),
            ),
            if (actions.isEmpty)
              const IconButton(
                padding: EdgeInsets.all(0),
                iconSize: 20,
                icon: Icon(iconArrowLeft, color: Colors.transparent),
                onPressed: null,
              ),
            //
            ...actions
          ],
        ),
      ),
    );
  }
}