How to remove the space between appBar and body in flutter? - flutter

Question

In my application, the flutter app is adding space between appbar and the body of the screen.
Following is the image of the screen:
Following is the code:
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
title: Container(
height: MediaQuery.of(context).size.width * 0.13,
child: Text('Dashboard')),
centerTitle: true,
backgroundColor: kBluePrimaryColor,
elevation: 0,
),
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: MediaQuery.of(context).size.height * 0.33,
child: Stack(children: [
Container(
//color: kBluePrimaryColor,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.23,
child: bannerimage == '' || bannerimage == null
? Image.asset('images/user.jpg')
: Image.network(
bannerimage),
),
Positioned(
top: MediaQuery.of(context).size.height * 0.16,
left: MediaQuery.of(context).size.width * 0.03,
child: Row(
children: [
Container(
width: MediaQuery.of(context).size.height * 0.14,
height: MediaQuery.of(context).size.height * 0.14,
decoration: ShapeDecoration(
shape: CircleBorder(), color: Colors.white),
child: Padding(
padding: EdgeInsets.all(8.0),
child: DecoratedBox(
decoration: ShapeDecoration(
shape: CircleBorder(),
image: DecorationImage(
fit: BoxFit.cover,
image: imageurl == '' || imageurl == null
? AssetImage('images/user.jpg')
: NetworkImage(imageurl),
)),
),
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.05,
),
],
),
),
Positioned(
top: MediaQuery.of(context).size.height * 0.24,
left: MediaQuery.of(context).size.height * 0.165,
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
color: kOrangePrimaryColor,
onPressed: () {
print('Contacts');
},
child: RichText(
text: TextSpan(
text: 'Total: ',
style:
TextStyle(color: Colors.white, fontSize: 12),
children: <TextSpan>[
TextSpan(
text: '30',
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.bold,
fontFamily: 'Calibri')),
],
),
)),
SizedBox(
width: 13,
),
RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
color: kBluePrimaryColor,
onPressed: () {
print('Address');
},
child: RichText(
text: TextSpan(
text: 'ADDRESS',
style: TextStyle(
color: Colors.white,
fontSize: 10,
fontWeight: FontWeight.bold,
fontFamily: 'Calibri')),
))
],
)),
),
]),
),
],
),
),
);
}
I tried the various answers given but it wasn't working.
I want to remove the white space between the blue appbar and the image. Can someone help me with this please?

Answer 1

I think it is because the banner image is not filling the container
Try adding fit: BoxFit.cover to the image

Answer 2

You just need to wrap the Column(Which is inside SingleChildScrollView) with Container and give its height and width.
body: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Column(
...
)
)
)

Answer 3

Add a toolbar height to appbar and scrollview to body:
Scaffold(
appBar: AppBar(
toolbarHeight: 40,
.....
),
body:
SingleChildScrollView(...

Answer 4

I know I'm late but in case somebody needs this in the future here's the solution.
In the Scaffold widget set the property "extendBodyBehindAppBar" to "true"...