[SOLVED] A widget in my SliverAppBar is causing a bottom overflow, how do i correct this in flutter?

A widget in my SliverAppBar is causing a bottom overflow, how do i correct this in flutter?

I use a SliverAppBar and use flexibleSpace title instead of the default sliver title, on portrait mode, it is perfectly fine as shown :

But when i get to landscape mode it causes a bottom overflow by 13px, VScode tells me the renderflex is caused by a column.

This is how it looks like in landscape :

It is so messy that when i discovered this bug i couldn't continue coding until i fix this and this is what i've been trying to do :(

I will give my SliverAppBar code and also the widget used in the sliverapp flexibleSpace title as snippet below

I have tried using Expanded instead of Flexible, but it causes even more errors.

I also tried using some screen utility packages in pub.dev but seem like i don't use it properly.

Main view with sliverapp :

class HomeView extends GetView<HomeController> {
  @override
  Widget build(BuildContext context) {
    controller.initScrollController();
    return WillPopScope(
      onWillPop: Helper().onWillPop,
      child: Scaffold(
        body: RefreshIndicator(
            onRefresh: () async {
              Get.find<LaravelApiClient>().forceRefresh();
              controller.refreshHome(showMessage: true);
              Get.find<LaravelApiClient>().unForceRefresh();
            },
            child: CustomScrollView(
              physics: const AlwaysScrollableScrollPhysics(),
              controller: controller.scrollController,
              shrinkWrap: false,
              slivers: <Widget>[
                SliverAppBar(
                  backgroundColor: Color(0xffFFFFFF),
                  expandedHeight: MediaQuery.of(context).size.height * 0.18,
                  elevation: 0.5,
                  floating: false,
                  iconTheme: IconThemeData(color: Get.theme.primaryColor),
                 
                  actions: [NotificationsButtonWidget()],
                  
                  
                  flexibleSpace: FlexibleSpaceBar(
                    collapseMode: CollapseMode.parallax,
                    title: MainProfileDetails(),//i suspect this is the widget causing the bug
                  ),
                ),
                SliverToBoxAdapter(
                  child: Wrap(
                    children: [
                      JobSummaryView(),
                      //BookingsListWidget(),
                    ],
                  ),
                ),
              ],
            )),
      ),
    );
  }
}

MainProfileDetails() code:

class MainProfileDetails extends StatelessWidget {
  const MainProfileDetails({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Obx(() {
      return Padding(
        padding: const EdgeInsets.only(left: 5.0),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.end,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Stack(
              children: [
                GestureDetector(
                  onTap: () {
                    Get.toNamed(Routes.PROFILE);
                  },
                  child: Container(
                    child: Stack(
                      children: [
                        SizedBox(
                          width: 60,
                          height: 60,
                          child: ClipRRect(
                            borderRadius: BorderRadius.all(Radius.circular(80)),
                            child: CachedNetworkImage(
                              height: 100,
                              width: double.infinity,
                              fit: BoxFit.cover,
                              imageUrl: Get.find<AuthService>()
                                  .user
                                  .value
                                  .avatar
                                  .thumb,
                              placeholder: (context, url) => Image.asset(
                                'assets/img/loading.gif',
                                fit: BoxFit.cover,
                                width: double.infinity,
                                height: 80,
                              ),
                              errorWidget: (context, url, error) =>
                                  Icon(Icons.error_outline),
                            ),
                          ),
                        ),
                        Positioned(
                          top: 35,
                          left: 30,
                          right: 0,
                          child: Get.find<AuthService>()
                                      .user
                                      .value
                                      .verifiedPhone ??
                                  false
                              ? Icon(Icons.check_circle,
                                  color: Color(0xffB0BEC1), size: 24)
                              : Icon(Icons.error_outline),
                        )
                      ],
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(
              width: 10,
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Flexible(
                  flex: 2,
                  child: Padding(
                    padding: const EdgeInsets.only(left: 1.0),
                    child: Text(
                      'Hello, ${Get.find<AuthService>().user.value.name}',
                      style: GoogleFonts.poppins(
                          color: Color(0xff34495E), fontSize: 9),
                    ),
                  ),
                ),
                Flexible(
                  flex: 2,
                  child: Padding(
                    padding: const EdgeInsets.only(top: 1.0, bottom: 1.0),
                    child: Text(
                      'Good Stitching',
                      style: GoogleFonts.poppins(
                          fontSize: MediaQuery.of(context).size.width * 0.04,
                          color: Color(0xff000000),
                          fontWeight: FontWeight.w600),
                    ),
                  ),
                ),
                Flexible(
                    child: Container(
                  decoration: BoxDecoration(
                    color: Color(0xffeeeeee),
                    borderRadius: BorderRadius.circular(15),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.only(
                        top: 3.0, bottom: 3.0, left: 10.0, right: 10.0),
                    child: Get.find<AuthService>().user.value.verifiedPhone ??
                            false
                        ? Text(
                            'Verified',
                            style: GoogleFonts.poppins(
                                fontSize:
                                    MediaQuery.of(context).size.width * 0.025,
                                fontStyle: FontStyle.italic),
                          )
                        : Text(
                            'Unverified',
                            style: GoogleFonts.poppins(
                                fontSize:
                                    MediaQuery.of(context).size.width * 0.025,
                                fontStyle: FontStyle.italic),
                          ),
                  ),
                )),
              ],
            ),
            //NotificationsButtonWidget(),
          ],
        ),
      );

      
    });
  }
}

Please i need your time and assistance on this one. Thank you!

Solution

After many hours of asking for help here, i decided to go with simple AppBar in flutter as SliverAppBar flexibleSpace title is only customisable to a limit.

And that was goodbye to orientation issues.

Thanks everyone for your support.