Widget getting pushed behind Status Bar in Custom App Bar - flutter

Question

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:

Answer 1

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

Answer 2

The trick lies in wrapping your Scaffold() with a SafeArea() widget.
Scaffold represents the whole screen of a device, each and every pixel of your screen.
SafeArea takes into account notches, status bars, bottom navigation bars and bottom navigation buttons.
Here's a quick how-to:
class _MyScreenState extends State<DonationDetails> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(), //your ui components goes here
));
}
}
UPDATE TO YOUR USE CASE
import 'package:flutter/material.dart';
class HomeScreenTest extends StatefulWidget {
HomeScreenTestState createState() => HomeScreenTestState();
}
class HomeScreenTestState extends State<HomeScreenTest> {
bool _toggleDropDown = false;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: const Size.fromHeight(100),
child: AppBar(
elevation: 0,
automaticallyImplyLeading: false,
leading: null,
backgroundColor: Colors.green,
titleSpacing: 0,
title: 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,
),
))
],
),
),
],
),
),
bottom: PreferredSize(
preferredSize: const Size.fromHeight(80),
child: 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: [
IconButton(
onPressed: () {},
icon: Icon(
Icons.shopping_cart_outlined,
color: Colors.white,
size: 25,
),
),
Row(
children: [
IconButton(
onPressed: () {},
icon: Icon(
Icons.shopping_cart_outlined,
color: Colors.white,
size: 25,
),
),
IconButton(
onPressed: () {},
icon: Icon(
Icons.notifications_none_outlined,
color: Colors.white,
size: 25,
),
),
],
)
],
),
),
),
),
),
);
}
}

Answer 3

You can use bottom in 'AppBar'.
Move the red Container to bottom with PreferredSize widget as parent. like this.
return Scaffold(
appBar: PreferredSize(
preferredSize: const Size.fromHeight(100),
child: AppBar(
elevation: 0,
// backgroundColor: Theme.of(context).scaffoldBackgroundColor,
backgroundColor: Colors.green,
titleSpacing: 0,
title: 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,
),
))
],
),
),
],
),
),
bottom: PreferredSize(
preferredSize: const Size.fromHeight(80),
child: 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,
),
)
],
)
],
),
),
),
),
),
);