Flutter set Page View Builder height based on device display size setting

Question

I am applying a PageView.builder in a SingleScrollView in my project and it requires me to give it a fixed height where I wrapped it with a SizedBox with a given height after that. However, when I change the display size in the device settings, the widget looks a bit off from what I am expecting. For example, if I change the display size to a smaller value, there will have a large space in my widget because I fixed the SizedBox's height. So, my problem is, is there any way to set the height of the SizedBox based on the child widget's height? I have tried fixing the height using MediaQuery.of(context).size.height * heightRatio but it still cannot help me when I change to different display size in my phone. The following is my sample code:

Scaffold(
  appBar: AppBar(),
  body: CustomScrollView(
    physics: const BouncingScrollPhysics(
      parent: AlwaysScrollableScrollPhysics()),
    slivers: [
      SliverFillRemaining(
        hasScrollBody: false,
        child: Padding(
          padding: bodyPadding,
          child: Column(
            children: [
              SizedBox(
                height: MediaQuery.of(context).size.height * 0.18,
                child: Padding(
                    padding: largeWidgetPadding,
                    child: PageView.builder(
                        controller: _pageController,
                        itemCount: data.length,
                        itemBuilder: (context, index) =>
                            UpcomingEventCard(
                                isLeave: false,
                                eventDate: data[index].caldate,
                                description:
                                    data[index].description,
                                daysToGo: data[index].days,
                                pageController: _pageController))))
              ],
            ),
        ))
    ]))