SliverAppBar без затухания в AppBar

Question

Мне очень нравится использовать Slivers, но у меня действительно проблема с SliverAppBar: обычно я использую виджет SliverAppBar для создания AppBar, который имеет фоновое изображение с эффектом Parallax. Поэтому все, что я использую, - это гибкое пространство, которое, к сожалению, блокируется частью AppBar при прокрутке вниз. Я попытался сделать часть AppBar прозрачной, установив значение цвета прозрачным, но все, что он делает, - это делает все, включая гибкое пространство, прозрачным.

Есть ли способ использовать только гибкое пространство SliverAppBar без затухания части AppBar при прокрутке вниз?

вот код, который я использую:

SliverAppBar(
          expandedHeight: 220,
          pinned: false,
          forceElevated: true,
          backgroundColor: Colors.transparent,
          stretch: true,
          leading: Container(),
          flexibleSpace: FlexibleSpaceBar(
            collapseMode: CollapseMode.pin,
            background:Stack(
              children: <Widget>[
                Image(
                  fit: BoxFit.cover,
                  width: MediaQuery.of(context).size.width,
                  image: AssetImage('assets/images/image2.png'),
                ),
                Positioned(
                  bottom: 0,
                  child: Container(
                    height: 110,
                    width: MediaQuery.of(context).size.width,
                    color: Colors.grey,
                  ),
                ),
                Positioned(
                  bottom: 10,
                  left: 10,
                  child: CircleAvatar(
                    radius: 45,
                    backgroundImage: AssetImage('assets/images/image.png'),
                  ),
                ),
                Positioned(
                  bottom: 77,
                  left: 110,
                  child: Container(
                    width: MediaQuery.of(context).size.width -110 -60,

                    child: Text(
                      'Name...',
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                      style: TextStyle(
                          fontSize: 20,
                          color: Colors.white
                      ),
                    ),
                  ),
                ),
                Positioned(
                  bottom: 63,
                  left: 110,
                  child: Container(
                    width: MediaQuery.of(context).size.width -110 -60,

                    child: Text(
                      'description...',
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                      style: TextStyle(
                          fontSize: 14,
                          color: Colors.white70
                      ),
                    ),
                  ),
                ),

                Positioned(
                  bottom: 5,
                  left: 110,
                  child: Container(
                    width: MediaQuery.of(context).size.width-110,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,

                      children: <Widget>[

                      ],
                    ),
                  ),
                ),

              ],
            ),
          ),

        ),

Надеюсь, эти изображения помогут объяснить мою проблему: гибкое пространство выглядит следующим образом: Изображение 1, но после прокрутки вниз гибкое пространство исчезает, как показано на этом рисунке: Изображение 2 Я не хочу, чтобы гибкое пространство исчезало.

Answer 1

Возможно, вы уже нашли ответ, но я подумал, что если кто-то вроде меня столкнется с вашим вопросом, это может быть ответ, который вы ищете.

FlexibleSpaceBar включает анимацию затухания, и единственный способ исключить ее — написать собственный LayoutBuilder, который будет обрабатывать коллапс.

Вот пример кода, как вы можете создать собственный виджет flexibleSpace с помощью LayoutBuilder.

      NestedScrollView(
      headerSliverBuilder: (context, innerBoxIsScrolled) {
        return [
          SliverAppBar(
            titleSpacing: 0,
            pinned: false,
            backgroundColor: Colors.transparent,
            automaticallyImplyLeading: false,
            elevation: 0.0,
            actions: [
              IconButton(
                splashRadius: 20,
                icon: Icon(
                  FontAwesomeIcons.cog,
                  color: Colors.grey[200],
                ),
                onPressed: () {
                 
                },
              ),
            ],
            toolbarHeight: kToolbarHeight,
            expandedHeight: maxExtent,
            flexibleSpace: LayoutBuilder(
              builder: (context, constraints) {
                double currentExtent = constraints.maxHeight;
                final double deltaExtent = maxExtent - minExtent;
                // 0.0 -> Expanded
                // 1.0 -> Collapsed to toolbar
                final double t =
                    (1.0 - (currentExtent - minExtent) / deltaExtent)
                        .clamp(0.0, 1.0) as double;

                return Stack(
                  fit: StackFit.loose,
                  overflow: Overflow.clip,
                  children: [
                    Positioned(
                      top: _getCollapsePadding(t),
                      left: 0.0,
                      right: 0.0,
                      height: maxExtent,
                      child: Wrap(
                        crossAxisAlignment: WrapCrossAlignment.start,
                        children: [
                          //Insert Widgets add to your flexible space
                        ],
                      ),
                    ),
                  ],
                );
              },
            ),
          ),
        ];
      },
      body: Container() 
    ),

  double get maxExtent => 300;
  double get minExtent => kToolbarHeight;

  double _getCollapsePadding(double t) {
    final double deltaExtent = maxExtent - minExtent;
    return -Tween<double>(begin: 0.0, end: deltaExtent / 4).transform(t);
  }