Widget getting pushed behind Status Bar in Custom App Bar

I’m currently trying to make my appBar appear like the picture below but seem to be running into one particular issue every time I try doing so.

I have given the appBar a height of 100 and my idea was to distribute the height in a 40 60 ratio between the two Containers(amber and red). Things look fine when there’s only the amber Container but as soon as I try adding the red Container, the amber Container somehow gets pushed up behind the status bar and I have no idea what is causing this.

This is till the point things look great with the amber Container

This is when the above anomaly occurs

This is my code. (the part commented out is the design for the Red Container)

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  HomeScreenState createState() => HomeScreenState();
}

class HomeScreenState extends State<HomeScreen> {
  bool _toggleDropDown = false;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(100),
        child: AppBar(
            elevation: 0,
            // backgroundColor: Theme.of(context).scaffoldBackgroundColor,
            backgroundColor: Colors.green,
            titleSpacing: 0,
            title: Column(
              children: [
                Container(                  //Amber Container
                  width: double.infinity,
                  height: 40,
                  color: Colors.amber,
                  child: Column(
                    children: [
                      Container(
                        padding: const EdgeInsets.only(left: 5),
                        height: 15,
                        width: double.infinity,
                        // color: Colors.red,
                        child: const Text(
                          'Delivering To',
                          style: TextStyle(
                              color: Colors.grey,
                              fontWeight: FontWeight.bold,
                              fontSize: 15),
                        ),
                      ),
                      Container(
                        height: 25,
                        width: double.infinity,
                        padding: const EdgeInsets.only(left: 5),
                        // color: Colors.blue,
                        child: Row(
                          children: [
                            const Text(
                              'Current Location',
                              style: TextStyle(
                                  color: Colors.grey,
                                  fontWeight: FontWeight.bold),
                            ),
                            const SizedBox(width: 20),
                            Container(
                                height: double.infinity,
                                width: 20,
                                // color: Colors.yellow,
                                child: InkWell(
                                  onTap: () {
                                    setState(() {
                                      _toggleDropDown = !_toggleDropDown;
                                    });
                                  },
                                  child: Icon(
                                    !_toggleDropDown
                                        ? Icons.keyboard_arrow_down
                                        : Icons.keyboard_arrow_up,
                                    color: Colors.red,
                                  ),
                                ))
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                // Container(                //Red Container
                //   height: 60,
                //   width: double.infinity,
                //   color: Colors.red,
                //   padding: EdgeInsets.only(top: 8),
                //   child: Row(
                //     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                //     crossAxisAlignment: CrossAxisAlignment.start,
                //     children: [
                //       InkWell(
                //           onTap: () {},
                //           child: Icon(
                //             Icons.search,
                //             size: 25,
                //           )),
                //       Row(
                //         children: [
                //           InkWell(
                //             onTap: () {},
                //             child: const Icon(
                //               Icons.shopping_cart_outlined,
                //               color: Colors.white,
                //               size: 25,
                //             ),
                //           ),
                //           InkWell(
                //             onTap: () {},
                //             child: const Icon(
                //               Icons.notifications_none_outlined,
                //               color: Colors.white,
                //               size: 25,
                //             ),
                //           )
                //         ],
                //       )
                //     ],
                //   ),
                // )
              ],
            )),
      ),
    );
  }
}

FYI : I have also tried wrapping the Scaffold with SafeArea and the output that produces looks like this:

>Solution :

The issue is here AppBar is not getting height:100. While using PreferredSize you can just use Column or just using toolbarHeight: 100 on AppBar.

      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(100),
        child: AppBar(
            elevation: 0,
            // backgroundColor: Theme.of(context).scaffoldBackgroundColor,
            backgroundColor: Colors.green,
            titleSpacing: 0,
            toolbarHeight: 100, //<this
           

Or just do

return Scaffold(
  appBar: AppBar(
      elevation: 0,
      toolbarHeight: 100, //<this