build Custom SliverAppbar in flutter

Question

I'm trying to create SliverAppBar() like this :

And the result of my trying looks like this :

Here is my code :

Scaffold(
      backgroundColor: AppColor.backgroundColor,
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            primary: true,
            pinned: true,
            backgroundColor: AppColor.backgroundColor,
            leading: _leadingButton(context),
            actions: [_actionButton()],
            expandedHeight: 550.h,
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: Text("Title",style: AppStyle.cardTitle),
              background: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Container(
                      width: 200.w,
                      height: 200.h,
                      decoration: BoxDecoration(
                        color: AppColor.textFieldFillColor,
                        borderRadius: BorderRadius.circular(15.r),
                      ),
                    ),
                    SizedBox(height: 15.h),
                    Text(
                      "This is description text that allow user to read a little bit of book",
                      style: AppStyle.cardTitle.copyWith(fontSize: 20.sp),
                      textAlign: TextAlign.center,
                    ),
                    SizedBox(height: 20.h),
                    _playButton()
                  ]),
            ),
          ),
          SliverToBoxAdapter(
            child: ListView.builder(
              primary: false,
                shrinkWrap: true,
                scrollDirection: Axis.vertical,
                itemCount: AppString.personalLeadersName.length,
                itemBuilder: (context, index) => Padding(
                  padding:
                  EdgeInsets.symmetric(vertical: 32.h, horizontal: 8.w),
                  child: Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(15.r),
                        color: Colors.grey),
                    child: Text(AppString.personalLeadersName[index]),
                  ),
                )),
          ),
        ],
      ),
    );

Now , How can I set the title of FlexibleSpaceBar() between My Widgets on background property just like the first gif I uploaded ? I tired to solve this problem with creating CustomSliverAppbar with CustomScrollView() and NestedScrollView() but I failed . if this solution can solve with any of these ways .. please Help me to build it .Guide me with some code