When scrolling the webview, its top part goes behind the sliverappbar. How can this be fixed? sliverappbar has a pinned property that solves this problem, but SliverToNestedScrollBoxAdapter does not.

`SafeArea(
        child: Scaffold(
            body: Stack(
          children: <Widget>[
            CustomScrollView(
              controller: scrollController,
              slivers: <Widget>[
                 SliverAppBar(
                    title: Text('aaa'),
                    expandedHeight: 200,
                    collapsedHeight: 56,
                    pinned: true,
                    flexibleSpace: FlexibleSpaceBar(
                      background: Image.asset(
                        'assets/images/titleimage.png',
                        fit: BoxFit.cover,
                      ),
                    )),
                ValueListenableBuilder<double>(
                  valueListenable: scrollHeightNotifier,
                  builder: (
                    BuildContext context,
                    double scrollHeight,
                    Widget? child,
                  ) {
                    return SliverToNestedScrollBoxAdapter(
                      childExtent: scrollHeight,
                      onScrollOffsetChanged: (double scrollOffset) {
                        double y = scrollOffset;
                        if (Platform.isAndroid) {
                          y *= window.devicePixelRatio;
                        }
                        webViewController.scrollTo(0, y.ceil());
                      },
                      child: child,
                    );
                  },

                      child: WebViewWidget(controller: webViewController)),

              ],
            ),
          ],
        )),
      ),`

How can this be fixed?

When scrolling the webview, its top part goes behind the sliverappbar. How can this be fixed? sliverappbar has a pinned property that solves this problem, but SliverToNestedScrollBoxAdapter does not.

`SafeArea(
        child: Scaffold(
            body: Stack(
          children: <Widget>[
            CustomScrollView(
              controller: scrollController,
              slivers: <Widget>[
                 SliverAppBar(
                    title: Text('aaa'),
                    expandedHeight: 200,
                    collapsedHeight: 56,
                    pinned: true,
                    flexibleSpace: FlexibleSpaceBar(
                      background: Image.asset(
                        'assets/images/titleimage.png',
                        fit: BoxFit.cover,
                      ),
                    )),
                ValueListenableBuilder<double>(
                  valueListenable: scrollHeightNotifier,
                  builder: (
                    BuildContext context,
                    double scrollHeight,
                    Widget? child,
                  ) {
                    return SliverToNestedScrollBoxAdapter(
                      childExtent: scrollHeight,
                      onScrollOffsetChanged: (double scrollOffset) {
                        double y = scrollOffset;
                        if (Platform.isAndroid) {
                          y *= window.devicePixelRatio;
                        }
                        webViewController.scrollTo(0, y.ceil());
                      },
                      child: child,
                    );
                  },

                      child: WebViewWidget(controller: webViewController)),

              ],
            ),
          ],
        )),
      ),`

How can this be fixed?

• flutter
• dart
• webview
• scroll

2 Answers 2

The issue occurs because SliverToNestedScrollBoxAdapter does not respect the pinned property of SliverAppBar. This causes the WebView content to scroll behind the SliverAppBar. To fix this, you need to ensure that the WebView's scroll position is properly synchronized with the CustomScrollView, and that the SliverAppBar remains visible when scrolling.

Solution Use NestedScrollView instead of CustomScrollView. This ensures that both the SliverAppBar and the WebView scroll together without overlapping issues.

import 'dart:io';
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewScreen extends StatefulWidget {
  @override
  _WebViewScreenState createState() => _WebViewScreenState();
}

class _WebViewScreenState extends State<WebViewScreen> {
  final WebViewController webViewController = WebViewController();
  final ScrollController scrollController = ScrollController();
  final ValueNotifier<double> scrollHeightNotifier = ValueNotifier<double>(500);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: NestedScrollView(
          controller: scrollController,
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return [
              SliverAppBar(
                title: Text('aaa'),
                expandedHeight: 200,
                collapsedHeight: 56,
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                  background: Image.asset(
                    'assets/images/titleimage.png',
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ];
          },
          body: NotificationListener<ScrollUpdateNotification>(
            onNotification: (notification) {
              if (notification.metrics.pixels >= 0) {
                double y = notification.metrics.pixels;
                if (Platform.isAndroid) {
                  y *= window.devicePixelRatio;
                }
                webViewController.scrollTo(0, y.ceil());
              }
              return false;
            },
            child: WebViewWidget(controller: webViewController),
          ),
        ),
      ),
    );
  }
}

Found a solution. Need to wrap sliverappbar in SliverOverlapAbsorber.

SliverOverlapAbsorber(
  handle: SliverOverlapAbsorberHandle(),
  sliver: SliverSafeArea(
    sliver: SliverAppBar(
      backgroundColor: Colors.transparent,
      title: Text('aaa'),
      expandedHeight: 200,
      collapsedHeight: 56,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        background: Image.asset(
          'assets/images/titleimage.png',
          fit: BoxFit.cover,
        ),
      )
    ),
  ),
),