Custom Sliver with Toolbar Ellipsis behind

main.dart

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: CustomSliver(),
        ),
      ),
    );
  }
}

class CustomSliver extends StatefulWidget {
  @override
  _CustomSliverState createState() => _CustomSliverState();
}

class _CustomSliverState extends State<CustomSliver> {
  final double _max = 200;
  final double _min = 96;

  ScrollController _controller;
  double _ellipsisTop;

  bool _isLoading = false;

  @override
  void initState() {
    _ellipsisTop = _max;
    super.initState();
    _controller = ScrollController();
    _controller.addListener(() {
      print(_controller.offset);
      setState(() {
        if (_controller.offset < _min) {
          _ellipsisTop = _max - _controller.offset;
        } else if (_controller.offset == 0) {
          _ellipsisTop = _max;
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
            height: _ellipsisTop,
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.vertical(
                top: Radius.zero,
                bottom: Radius.elliptical(100, 40),
              ),
            ),
          ),
          CustomScrollView(
            controller: _controller,
            physics: ClampingScrollPhysics(),
            slivers: [
              SliverAppBar(
                elevation: 0,
                pinned: true,
                centerTitle: true,
                expandedHeight: 150,
                flexibleSpace: Container(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: [Colors.yellow, Colors.red],
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                    ),
                  ),
                  child: FlexibleSpaceBar(
                    title:Text(
                        "This is the app title",
                        textAlign: TextAlign.center,
                        maxLines: 2,
                      ),
                  ),
                ),
              ),
              SliverList(
                delegate: SliverChildListDelegate(
                  List.generate(100, (int index) => Text("Item $index"),),),
              ),
            ],
          ),
          if (_isLoading)
            Center(
              child: CircularProgressIndicator(),
            ),
        ],
      ),
    );
  }

  
}