Как предотвратить AppBar от покрытия фона?

Question

Я пытаюсь реализовать пользовательский AppBar с использованием виджетов PreferredSize и Card. Вот результат:

Однако, когда я немного прокручиваю вниз, компоновка AppBar покрывает фон (который является body частью скаффолда) следующим образом:

Смотрите второй скриншот: Пользовательский AppBar покрывает все, что идет под ним. Есть ли способ предотвратить это?

Кстати, эти образцы изображений были получены из виджета StreamBuilder, прикрепленного к body из Scaffold.

Вот код:

appBar: PreferredSize(
        preferredSize: Size.fromHeight(50.0),
        child: SizedBox(
          height: 100.0,
          child: Card(
            elevation: 10.0,
            color: Colors.white.withOpacity(0.8),
            clipBehavior: Clip.antiAlias,
            margin: EdgeInsets.only(top: 30.0, left: 10.0, right: 10.0),
            child: Stack(
              children: <Widget>[
                GestureDetector(
                  onTap: () {
                    _key.currentState.openDrawer();
                  },
                  child: Padding(
                    padding: const EdgeInsets.only(top: 9.0, left: 10.0),
                    child: Icon(FontAwesomeIcons.bars, color: Colors.grey[800]),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 13.0, left: 50.0),
                  child: TextField(
                    decoration: InputDecoration.collapsed(
                      hintText: 'Search... ',
                      hintStyle: TextStyle(fontFamily: 'Monospace')
                    ),
                  ),
                ),
                GestureDetector(
                  onTap: () {
                    _key.currentState.openEndDrawer();
                  },
                  child: Padding(
                    padding: const EdgeInsets.only(top: 9.0, left: 305.0),
                    child: Icon(FontAwesomeIcons.slidersH, color: Colors.grey[800]),
                  ),
                )
              ],
            ),
          ),
        )
      ),

Спасибо за ваши ответы!

Answer 1

Вместо того, чтобы устанавливать панель приложения PreferredSize непосредственно на appBar свойство Scaffold, скорее Stack оно внутри body.Этот код должен работать для вашего желаемого результата.

Scaffold(
  body: Stack(
    children: [
      Container(), // this is where your main body goes
      Positioned(
        top: 30,
        left: 10,
        right: 10,
        child: PreferredSize(
          preferredSize: Size.fromHeight(25.0),
          child: Container(
            color: Colors.white.withOpacity(0.0),
            height: 50.0,
            child: Card(
              elevation: 10.0,
              color: Colors.white.withOpacity(1),
              clipBehavior: Clip.antiAlias,
              child: Stack(
                children: <Widget>[
                  GestureDetector(
                    onTap: () {
                      _key.currentState.openDrawer();
                    },
                    child: Padding(
                      padding: const EdgeInsets.only(top: 9.0, left: 10.0),
                      child: Icon(Icons.menu, color: Colors.grey[800]),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 13.0, left: 50.0),
                    child: TextField(
                      decoration: InputDecoration.collapsed(
                        hintText: 'Search... ',
                        hintStyle: TextStyle(fontFamily: 'Monospace')
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: () {                            
                      _key.currentState.openEndDrawer();
                    },
                    child: Padding(
                      padding: const EdgeInsets.only(top: 9.0, left: 305.0),
                      child: Icon(Icons.star, color: Colors.grey[800]),
                    ),
                  )
                ],
              ),
            ),
          )
        ),
      ),
    ]
  ),
);

Образец получен: