How to remove the space between appBar and body in flutter?
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?
Solution 1:
I think it is because the banner image is not filling the container
Try adding fit: BoxFit.cover
to the image