Why is there a white line between 2 containers flutter - flutter

Question

I am making a drawer for my app and it has 2 containers in the column widget, there seems to be a line in between these containers that ruins the appearance, i have tried this for the upper container
margin: EdgeInsets.only(bottom: 0),
padding: EdgeInsets.only(bottom: 0),
and this for the lower container
margin: EdgeInsets.only(top: 0),
padding: EdgeInsets.only(top: 0),
still the line remains. How to remove that line, any help would be appreciated. Here is the code for the drawer:
Drawer(
child: Column(
children: <Widget>[
Container(
height: globals.heightofdevice * 0.30,
width: double.infinity,
margin: EdgeInsets.only(bottom: 0),
padding: EdgeInsets.only(bottom: 0),
child: Stack(
children: <Widget>[
Image.asset(
'./images/drawerbackground.jpg',
fit: BoxFit.fitWidth,
),
Positioned(
left: globals.widthofdevice * 0.07,
bottom: 20,
child: Text(
globals.username,
style: GoogleFonts.quicksand(
textStyle: TextStyle(
// fontWeight: FontWeight.w700,
fontSize: 32,
color: Colors.white,
),
),
),
)
],
),
),
Container(
height: globals.heightofdevice * 0.70,
margin: EdgeInsets.only(top: 0),
padding: EdgeInsets.only(top: 0),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.redAccent, Colors.white],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
),
child: Stack(children: <Widget>[
Image.asset(
'./images/uni.jpg',
fit: BoxFit.cover,
width: double.infinity,
),
Column(
children: <Widget>[
listTileBuilder(Icons.history, 'History'),
listTileBuilder(Icons.info_outline, 'About the app'),
listTileBuilder(Icons.account_circle, 'Logout'),
listTileBuilder(Icons.exit_to_app, 'Exit'),
],
),
]),
)
],
),
)
You can clearly see the problem in this picture

Answer 1

it must be something with the image or the stack
another example lets try
return Scaffold(
appBar: new AppBar(
title: new Text("Drawer"),
),
drawer: Drawer(
child: Column(
children: <Widget>[
Container(
color: Colors.yellow,
height: MediaQuery.of(context).size.height * 0.30,
width: double.infinity,
child: new Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("./images/drawerbackground.jpg"), fit: BoxFit.fill)),
child: new Align(
alignment: Alignment.bottomLeft,
child: new Padding (
padding: EdgeInsets.only(left: 20.0, bottom: 10.0),
child: Text(
"globals.username",
style: TextStyle(color: Colors.white),
),
),
),
),
),
Container(
height: MediaQuery.of(context).size.height * 0.70,
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("./images/uni.jpg"), fit: BoxFit.fill),
gradient: LinearGradient(
colors: [Colors.redAccent, Colors.white],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
),
child: Column(
children: <Widget>[
listTileBuilder(Icons.history, 'History'),
listTileBuilder(Icons.info_outline, 'About the app'),
listTileBuilder(Icons.account_circle, 'Logout'),
listTileBuilder(Icons.exit_to_app, 'Exit'),
],
),
)
],
),
),
body: Container(
child: Text('Add Moka'),
),
);

Answer 2

The problem is most likely the fact that your top widget's image is set to fit: BoxFit.fitWidth,. Since it is trying to fill the horizontal plain fully it will stop once it has done so and not scale vertically to cover the remaining white space.
To fill the space of the container not taken by your image with a color so it isn't a white line you can try this (changes background to black):
Container(
height: globals.heightofdevice * 0.30,
width: double.infinity,
margin: EdgeInsets.only(bottom: 0),
padding: EdgeInsets.only(bottom: 0),
colors: Colors.black, // Added color
child: Stack(
...
),
),
Or to try and make the image take up all the available space of the container, regardless of the image's size and aspect ratio you can change the BoxFit to fill:
Image.asset(
'./images/drawerbackground.jpg',
fit: BoxFit.fill, // BoxFit fill
),