Why is there a white line between 2 containers flutter

user_11675308 0
Viewed 2144

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

enter image description here

flutter-layout flutter
2 Answers

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'),
        ),
    );
user_130552610

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
),
user_67320690
Related