how can I achieve something like this with flutter sliver app bar? - flutter

Question

I want to achieve the design provided below.
The design is scrollable with a tab bar. The scroll functionality has been achieved but the card between tab bar and sliver app bar is something I could not achieve.
The code I have tried
CustomScrollView(
slivers: <Widget>[
SliverAppBar(
pinned: true,
backgroundColor: Colors.deepPurple,
leading: IconButton(
onPressed: () => Navigator.of(context).pop(),
icon: const Icon(Icons.arrow_back_ios_new_sharp)),
actions: [
Container(
height: 46,
width: 46,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(width: .5, color: Colors.white),
color: Colors.transparent,
),
child: const Icon(
Icons.share_outlined,
color: Colors.white,
),
alignment: Alignment.center,
),
const SizedBox(
width: 10,
),
Container(
height: 46,
width: 46,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(width: .5, color: Colors.white),
color: Colors.transparent,
),
child: const Icon(
Icons.favorite_border,
color: Colors.white,
),
alignment: Alignment.center,
),
const SizedBox(
width: 5,
)
],
expandedHeight: MediaQuery.of(context).size.height * .35,
flexibleSpace: FlexibleSpaceBar(
title: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('Good food'),
RatingBar.builder(
unratedColor: Colors.black,
initialRating: 5,
ignoreGestures: true,
itemSize: 18,
direction: Axis.horizontal,
allowHalfRating: true,
itemCount: 5,
itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
itemBuilder: (context, _) => Icon(
Icons.star,
color: Colors.amber,
),
onRatingUpdate: (_) {},
)
],
),
centerTitle: true,
background: Image(
image: AssetImage(
'assets/images/food.jpg',
),
fit: BoxFit.cover,
),
),
),
SliverToBoxAdapter(
child: Center(
child: SizedBox(
height: 100,
width: MediaQuery.of(context).size.width * .9,
child: Card(
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
child: Image(image: AssetImage('assets/images/book1.png')),
),
)),
),
],
),