Flutter SingledChildScrollView> Stack> Positioned - это сбои при прокрутке

Question

Я использую SingleChildScrollView с Stack в качестве первого элемента. Stack содержит два контейнера. Второй расположен на bottom: 0.0 с использованием Positioned.

Я сильно упростил свою точку зрения для этого сообщения, чтобы сосредоточиться только на этой проблеме. Когда я медленно прокручиваю, вы видите, что белый контейнер «глючит», и вы видите линию, которая является нижней частью первого дочернего элемента стека.

Вот вид:

Не то, что происходит, когда я прокручиваю вниз, я понятия не имею, почему это так глючит:

Просмотр:

return Container(color: Colors.white, child: SingleChildScrollView(child: Column(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    HeaderComponent(),
    Container(height: 600, width: MediaQuery.of(context).size.width)
  ]
)));

Компонент заголовка

class _HeaderComponentState extends State<HeaderComponent> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(height: 245.0, width: MediaQuery.of(context).size.width, color: Colors.red),
        Positioned(bottom: 0.0, child: Container(height: 40.0, width: 
           MediaQuery.of(context).size.width, color: Colors.white)),
      ],
    );
  }
}

Answer 1

Если это так, просто добавьте нижний отступ 0,2 у первого дочернего элемента.

class HeaderComponent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
            height: 245.0,
            padding: EdgeInsets.only(bottom: 0.2),
            width: MediaQuery.of(context).size.width,
            color: Colors.red),
        Positioned(
            bottom: 0.0,
            child: Container(
                height: 40.0,
                width: MediaQuery.of(context).size.width,
                color: Colors.white)),
      ],
    );
  }
}

Answer 2

Я предлагаю другое решение, как показано ниже.

class HeaderComponent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 245.0,
      child: Column(
        children: <Widget>[
          Expanded(
            child: Container(
                width: MediaQuery.of(context).size.width, color: Colors.red),
          ),
          Container(
              height: 40.0,
              width: MediaQuery.of(context).size.width,
              color: Colors.white)
        ],
      ),
    );
  }
}

Answer 3

Не знаю root причину. Но Positoned 'bottom: 0.0' немного повторяет цвет фона верхнего контейнера во время прокрутки. Поэтому, когда я устанавливаю «дно: -0,2», этой проблемы не возникает. Но выглядит не круто ...

class HeaderComponent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
            height: 245.0,
            width: MediaQuery.of(context).size.width,
            color: Colors.red),
        Positioned(
            bottom: -0.2,
            child: Container(
                height: 40.0,
                width: MediaQuery.of(context).size.width,
                color: Colors.white)),
      ],
    );
  }
}