[Flutter] Custom Appbar is bottom overflowed - Flutter

i have designed an appbar and invoked it in my home screen as follows:

return Scaffold(
body: Container(
color: const Color(0xFF191919),
child: Column(
children: [
CustomAppBar(userEmail: userEmail),
],
),
),
);


it always throw bottom overflow, here is the Appbar design:

return AppBar(
backgroundColor: Colors.black,
elevation: 0,
leading: Padding(
padding: const EdgeInsets.all(8.0),
child: Image.asset('assets/logo.png'), // Your logo here
),
title: Container(
height: 40,
decoration: BoxDecoration(
color: Colors.grey[850],
borderRadius: BorderRadius.circular(30),
),
child: TextField(
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
hintText: 'Search News, Teams, Players ...',
hintStyle: const TextStyle(color: Colors.grey),
prefixIcon: const Icon(Icons.search, color: Colors.grey),
filled: true,
fillColor: Colors.grey[850],
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide.none,
),
),
),
),
actions: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircleAvatar(
radius: 20,
backgroundColor: Colors.grey[600],
child: Icon(
Icons.person,
color: Colors.white,
size: 24,
),
),
const SizedBox(height: 4),
Text(
userName, // Display the fetched user name
style: const TextStyle(color: Colors.white, fontSize: 12),
),
],
),
),
],
);


The overflow happens at the actions section exactly. i tried to add PrefferedSize() for both places my home screen and the file i designed the appbar in but nothing solved the problem. Thank you

Continue reading...