Прокручиваемый контейнер внутри колонны

Question

Я пробовал несколько разных подходов, но я не могу заставить это работать.Макет, который я хочу достичь, очень прост, и его легко реализовать на родном Android:

• Фиксированный контейнер сверху (синий)
• Прокручиваемый контейнер внизу (красный).ListView не будет работать в моем случае.

Я пытался использовать SingleChildScrollView, но, похоже, он не работает внутри Column.Возможно, я делаю что-то не так или неправильно использую виджеты ...

Мой результат:

Scaffold(
  body: Column(
    children: <Widget>[
      Container(
        height: 100.0,
        color: Colors.blue,
      ),
      SingleChildScrollView(
        child: Container(
          color: Colors.red,
          padding: EdgeInsets.all(20.0),
          child: Column(
            children: <Widget>[
              Text('Red container should be scrollable'),
              Container(
                width: double.infinity,
                height: 700.0,
                padding: EdgeInsets.all(10.0),
                color: Colors.white.withOpacity(0.7),
                child: Text('I will have a column here'),
              )
            ],
          ),
        ),
      ),
    ],
  ),
)

Answer 1

Проблема в том, что Column виджет не поддерживает прокрутку.Чтобы заставить его работать, вы можете переключиться на ListView, но в текущей реализации отсутствует какой-то заголовок для разделов.Чтобы получить их, вы можете использовать пакет sticky_headers , например:

Widget build(BuildContext context) => Scaffold(
      body: new ListView.builder(
          itemCount: 1,
          padding: EdgeInsets.zero,
          itemBuilder: (context, index) {
            return new StickyHeader(
                header: Container(
                  height: 100.0,
                  color: Colors.blue,
                ),
                content: Container(
                  color: Colors.red,
                  padding: EdgeInsets.all(20.0),
                  child: Column(
                    children: <Widget>[
                      Text('Red container should be scrollable'),
                      Container(
                        width: double.infinity,
                        height: 700.0,
                        padding: EdgeInsets.all(10.0),
                        color: Colors.white.withOpacity(0.7),
                        child: Text('I will have a column here'),
                      )
                    ],
                  ),
                ));
          }));

Answer 2

Мне удалось реализовать рабочий макет, используя Stack, единственным недостатком было то, что если у меня есть TextField и я прокручиваю вниз, над моим верхним контейнером появляется курсор "пузырь" ... которыйвроде некрасиво.Порядок моих виджетов в Stack не влияет на это.

Смотрите скриншот

  Widget build(BuildContext context) =>
  Scaffold(
    body: Stack(
      children: <Widget>[
        Container(
          height: 100.0,
          color: Colors.blue,
        ),
        Container(
          margin: EdgeInsets.only(top: 100.0),
          child: SingleChildScrollView(
            child: Container(
              color: Colors.red,
              padding: EdgeInsets.all(20.0),
              child: Column(
                children: <Widget>[
                  Container(
                    width: double.infinity,
                    height: 700.0,
                    padding: EdgeInsets.all(10.0),
                    color: Colors.white.withOpacity(0.7),
                    child: TextField(),
                  )
                ],
              ),
            ),
          ),
        ),
      ],
    ),
  );

Answer 3

Добавьте это внутри SingleChildScrollView ..

scrollDirection: Axis.vertical