how to customise DraggableScrollableSheet bottom sheet with flexibleSpace in sliverAppbar

Question

I want to create bottom sheet like Instagram post sharing page

everything work fine but I need to start flexibleSpace animation before DraggableScrollableSheet at the maxChildSize property and finished at maxChildSize

Stack(
          children: [
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () {
                Navigator.of(cotext).pop()
              },
              child: Container(
                width: context.width,
                height: context.height,
              ),
            ),
            SizedBox.fromSize(
              size: Size.fromHeight(context.height),
              child: DraggableScrollableSheet(
                minChildSize: 0.5,
                maxChildSize: 1,
                initialChildSize: 0.5,
                builder: (context, scroll) {
                  return SafeArea(
                    child: Container(
                      color: Colors.white,
                      child: CustomScrollView(
                        controller: scroll,
                        slivers: [
                          SliverAppBar(
                            pinned: true,
                            title:title,
                          ),
                          SliverList(
                              delegate:
                                  SliverChildBuilderDelegate((context, index) {
                            return Object()
                          }, childCount: 100))
                        ],
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        );