Home > other >  How can I stop the scroll in SliverAppBar Flutter?
How can I stop the scroll in SliverAppBar Flutter?

Time:10-07

My app's Sliver App bar is already wrapped with a CustomScrollView widget. And there are other Slivers on it. I just needed to stop the scrolling on the Sliver app bar. When I touch on Sliver It scroll the whole page. After Adding NeverScrollableScrollPhysics() the whole page cannot scroll. But I need to stop only the SliverAppBar.

 body: CustomScrollView(
              controller: _scrollController,
              slivers: <Widget>[
                SliverAppBar(
                  systemOverlayStyle: SystemUiOverlayStyle.light,
                  backgroundColor: Theme.of(context).backgroundColor,
                  elevation: 1.0,
                  expandedHeight:
                      kIsWeb ? 0 : widthHeight * kProductDetail.height,
                  pinned: true,
                  floating: false,
                  leading: Padding(
                    padding: const EdgeInsets.all(8),
                    child: CircleAvatar(
                      backgroundColor: Theme.of(context)
                          .primaryColorLight
                          .withOpacity(0.7),
                      child: IconButton(
                        icon: Icon(
                          Icons.close,
                          color: Theme.of(context).primaryColor,
                        ),
                        onPressed: () {
                          context
                              .read<ProductModel>()
                              .clearProductVariations();
                          Navigator.pop(context);
                        },
                      ),
                    ),
                  ),
                  actions: <Widget>[
                    if (widget.isLoading != true)
                      HeartButton(
                        product: product,
                        size: 20.0,
                        color: Theme.of(context).primaryColor,
                      ),
                    Padding(
                      padding: const EdgeInsets.all(12),
                      child: CircleAvatar(
                        backgroundColor: Theme.of(context)
                            .primaryColorLight
                            .withOpacity(0.7),
                        child: IconButton(
                          icon: const Icon(Icons.more_vert, size: 19),
                          color: Theme.of(context).primaryColor,
                          onPressed: () => ProductDetailScreen.showMenu(
                            context,
                            widget.product,
                            isLoading: widget.isLoading,
                          ),
                        ),
                      ),
                    ),
                  ],
                  flexibleSpace: kIsWeb
                      ? const SizedBox()
                      : ProductImageSlider(
                          product: product,
                          onChange: (index) => setState(() {
                            _selectIndex = index;
                          }),
                        ),
                ),
                SliverList(
                  delegate: SliverChildListDelegate(
                    <Widget>[
                      const SizedBox(height: 2),
                      if (kIsWeb)
                        ProductGallery(
                          product: widget.product,
                          selectIndex: _selectIndex,
                        ),
                      Padding(
                        padding: const EdgeInsets.only(
                          top: 8.0,
                          bottom: 4.0,
                          left: 15,
                          right: 15,
                        ),
                        child: product.type == 'grouped'
                            ? const SizedBox()
                            : ProductTitle(product),
                      ),
                    ],
                  ),
                ),
                if (Services().widget.enableShoppingCart(
                    product.copyWith(isRestricted: false)))
                  renderProductInfo(),
                if (!Services().widget.enableShoppingCart(
                        product.copyWith(isRestricted: false)) &&
                    product.shortDescription != null &&
                    product.shortDescription!.isNotEmpty)
                  SliverToBoxAdapter(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 15.0),
                      child: ProductShortDescription(product),
                    ),
                  ),
                SliverToBoxAdapter(
                  child: Padding(
                    padding: const EdgeInsets.symmetric(
                      // horizontal: 15.0,
                      vertical: 8.0,
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Padding(
                          padding: const EdgeInsets.symmetric(
                            horizontal: 15.0,
                          ),
                          child: Column(
                            children: [
                              Services().widget.renderVendorInfo(product),
                              ProductDescription(product),
                              if (kProductDetail.showProductCategories)
                                ProductDetailCategories(product),
                              if (kProductDetail.showProductTags)
                                ProductTag(product),
                              Services()
                                  .widget
                                  .productReviewWidget(product.id!),
                            ],
                          ),
                        ),
                        if (kProductDetail
                                .showRelatedProductFromSameStore &&
                            product.store?.id != null)
                          RelatedProductFromSameStore(product),
                        if (kProductDetail.showRelatedProduct)
                          RelatedProduct(product),
                        const SizedBox(height: 50),
                      ],
                    ),
                  ),
                ),
              ],
            ),

I just wanted to stop the whole scroll when I touch on SliverAppBar.

enter image description here

CodePudding user response:

you can add NeverScrollableScrollPhysics to achieve this.

...
CustomScrollView(
              controller: _scrollController,
              physics: NeverScrollableScrollPhysics(),
..

more information at flutter docs

CodePudding user response:

use nested scrollview and set pinned true so appbar wont scroll but body will be scroll and also there are 3 parameter in nested scrollview which help to set scrolling differently.

or check this video on YouTube it helps you https://youtu.be/xzPXqQ-Pe2g

  • Related