Фиксированный заголовок с элементами прокрутки

Question

Я новичок, чтобы трепетать, и я пытаюсь сделать простой один экран с ИСПРАВЛЕННЫМ НАЗВАНИЕМ и под ним прокручиваемым «дочерним элементом или столбцом» с несколькими элементами, как на скриншоте.Первоначально будет два элемента, и я хочу, чтобы они были в центре экрана, но когда добавлен третий элемент, тогда скролл-просмотр должен появиться для небольших экранов, поэтому заголовок остается фиксированным, но элементы прокручиваемыми.Вот текущий код, который прокручивает все, включая заголовок.Заранее спасибо:

  @override
  Widget build(BuildContext context) {
    return Container(

      color: Color.fromRGBO(246, 246, 246, 1.0),
      child: SafeArea(
          child: Material(


            child: Center(
              child: SingleChildScrollView(
                child: Column(

                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    Center(
                      child: Padding(
                        padding: EdgeInsets.only(top: 20.0,bottom: 20.0),

                        child: Text(
                          'Lorem Ipsum',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                              color: Color.fromRGBO(78, 53, 43, 1.0),
                              fontSize: 40.0,                            
                              fontWeight: FontWeight.w300),
                        ),
                      ),
                    ),

                    _item(context, 'ITEM_1', 'Title1', 'ico_01.png'),
                    _item(context, 'ITEM_2', 'Title2', 'ico_02.png'),
                    _thirdItem
                        ? _item(
                        context, 'ITEM_3', 'Title3', 'ico_03.png')
                        : Container(),

                  ],
                ),
              ),
            ),
          )),

    );
  }

Answer 1

Этот пример должен продемонстрировать, как иметь фиксированный заголовок.Обратите внимание, что для столбца mainAxisSize задано значение MainAxisSize.max, а SingleChildScrollView обернут в объект Flexible, в результате чего SingleChildScrollView занимает оставшееся пространство и включает прокрутку.

class FixedTitleScrollView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        Align(
          alignment: Alignment.center,
          child: Text(
            'Fixed Title',
            style: TextStyle(
                color: Color.fromRGBO(78, 53, 43, 1.0),
                fontSize: 40.0,
                fontWeight: FontWeight.w300),
          ),
        ),
        Flexible(
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                _item(),
                _item(),
                _item(),
                _item(),
                _item(),
                _item(),
                _item(),
                _item(),
                _item(),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _item() {
    Color color = Color(Random().nextInt(0xffffffff));
    return Container(
      color: color,
      height: 300,
      width: 300,
      child: Align(
        alignment: Alignment.center,
        child: Text(color.toString()),
      ),
    );
  }
}

Попробуйте изменить это в соответствии с вашими потребностями.Надеюсь, это поможет: -)