Почему между двумя контейнерами развевается белая линия?

Question

Я делаю ящик для своего приложения, и у него есть 2 контейнера в виджете столбцов, кажется, что между этими контейнерами есть линия, которая портит внешний вид, я пробовал это для верхнего контейнера

  margin: EdgeInsets.only(bottom: 0),
  padding: EdgeInsets.only(bottom: 0),

и это для нижнего контейнера

  margin: EdgeInsets.only(top: 0),
  padding: EdgeInsets.only(top: 0),

все еще строка остается. Как удалить эту строку, любая помощь будет оценена. Вот код для ящика:

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'),
            ],
          ),
        ]),
      )
    ],
  ),
)

Вы можете ясно увидеть проблему на этой картинке

Answer 1

Скорее всего, проблема в том, что для вашего верхнего виджета установлено значение fit: BoxFit.fitWidth,. Поскольку он пытается полностью заполнить горизонтальную плоскость, он остановится, как только это будет сделано, и не будет масштабироваться вертикально, чтобы покрыть оставшееся пустое пространство.

Чтобы заполнить пространство контейнера, не занятое вашим изображением, цветом так что это не белая линия, вы можете попробовать это (меняет фон на черный):

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(
          ...
        ),
      ),

Или попытаться сделать так, чтобы изображение занимало все доступное пространство контейнера, независимо от размера изображения и соотношение сторон вы можете изменить BoxFit для заполнения:

Image.asset(
  './images/drawerbackground.jpg',
  fit: BoxFit.fill,  // BoxFit fill
),

Answer 2

это должно быть что-то с изображением или стеком

другой пример позволяет попробовать

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