Flutter SliverAppBar overlap with FlexibleSpaceBar content

Question

I am using the SliverAppBar title and FlexibleSpaceBar content in my widget. However, to avoid FlexibleSpaceBar overlapping SliverAppBar I had to add some SizedBox. In different devices, this height has to be adjusted and FlexibleSpaceBar ends up having space at the bottom. How can I fix this issue?

Also is there a way to hide the FlexibleSpaceBar on the first scroll attempt?

 return SliverAppBar(
  pinned: true,
  expandedHeight: 260,
  actions: const [CoinCount()],
  title: Text(_getVsText()),
  centerTitle: true,
  backgroundColor: CustomColors.appBarColor,
  flexibleSpace: FlexibleSpaceBar(
    background: Column(children: [
      const SizedBox(
        height: 80,
      ),
      PlayerBanner(

Answer 1

You can do it by:

1. Adding standard AppBar in the scaffold.
2. Create a SliverAppBar in the body.
3. Wrapped with SliverMainAxisGroup to make SliverAppBar scrolled up above the body content.

The content will not overlapping with SliverAppBar anymore.

Sample code below:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Title'), centerTitle: true),
        body: CustomScrollView(
          slivers: <Widget>[
            const SliverMainAxisGroup(
              slivers: [
                SliverAppBar(
                  title: Text('Sub'),
                  centerTitle: true,
                  expandedHeight: 200.0,
                  pinned: true,
                ),
              ],
            ),
            SliverToBoxAdapter(
              child: Container(
                height: 1000,
                decoration: const BoxDecoration(color: Colors.greenAccent),
                child: const Center(child: Text('Hello World!')),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

And this is the result:

Hopefully it can solve your problem, Thanks