Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SliverVisibiltyDetector should consider SliverConstraints overlap #507

Open
LaysDragon opened this issue Dec 15, 2023 · 1 comment
Open

Comments

@LaysDragon
Copy link

Problem description

visibility_detector
version: 0.4.0+2
SliverVisibiltyDetector should consider SliverConstraints overlap data to made its more reliable within sliver scroll view.

Steps to reproduce

https://zapp.run/edit/flutter-zj80065pj810

Code
import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/src/rendering/sliver.dart';
import 'package:visibility_detector/visibility_detector.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter App!!',
      home: const MyHomePage(title: 'Flutter Example App'),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  VisibilityInfo? info;
  SliverConstraints? constraints;

  @override
  Widget build(BuildContext context) {
    return Material(
      child: CustomScrollView(
        // shrinkWrap: true,
        physics: BouncingScrollPhysics(),
        slivers: [
          SliverPersistentHeader(
            delegate: DemoHeaderDelegate(info: info, constraints: constraints),
            pinned: true,
          ),
          SliverLayoutBuilder(
            builder: (BuildContext, constraints) {
              scheduleMicrotask(() {
                setState(() {
                  this.constraints = constraints;
                });
              });

              return SliverVisibilityDetector(
                key: ValueKey('content'),
                onVisibilityChanged: (VisibilityInfo info) {
                  setState(() {
                    this.info = info;
                  });
                },
                sliver: SliverToBoxAdapter(
                  child: Container(
                    height: 200,
                    color: Colors.grey,
                    child: Text('content'),
                  ),
                ),
              );
            },
          ),
          SliverToBoxAdapter(
            child: SizedBox(
              height: 2000,
              child: Text('other things blablabla'),
            ),
          )
        ],
      ),
    );
  }
}

class DemoHeaderDelegate extends SliverPersistentHeaderDelegate {
  VisibilityInfo? info;
  SliverConstraints? constraints;
  DemoHeaderDelegate({this.info, this.constraints});

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      child: Center(
        child: Column(
          children: [
            Text('[header]'),
            Text(
                'visibleFraction:${info?.visibleFraction.toStringAsFixed(2)} visibleBounds.height:${info?.visibleBounds.height.round()}'),
            Text('SliverConstraints.overlap:${constraints?.overlap.round()}'),
          ],
        ),
      ),
      color: Colors.yellow.withOpacity(0.5),
    );
  }

  @override
  double get maxExtent => 100;

  @override
  double get minExtent => 50;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}

Expected behavior

It should able to detected the overlap from other sliver with SliverConstraints.

Actual behavior

Its only detected if a sliver visible within sliver scroll view

Environment

Windows 10
flutter 3.2.0

@LaysDragon
Copy link
Author

LaysDragon commented Dec 15, 2023

I currently fix its manually by creating a OverlayRenderVisibilityDetectorBase with patched code in _determineVisibility method of RenderVisibilityDetectorBase

mixin OverlayRenderVisibilityDetectorBase on RenderSliver{
//...skipping some code
//...
  VisibilityInfo _determineVisibility(ContainerLayer? layer, Rect bounds) {
  //...skipping some code
  //...
    var info = VisibilityInfo.fromRects(
      key: key,
      widgetBounds: MatrixUtils.transformRect(transform, bounds),
      clipRect: clip,
    );

    switch (applyGrowthDirectionToAxisDirection(
      constraints.axisDirection,
      constraints.growthDirection,
    )) {
      case AxisDirection.down:
        info = VisibilityInfo(
          key: info.key,
          size: info.size,
          visibleBounds: Rect.fromLTRB(info.visibleBounds.left, info.visibleBounds.top + constraints.overlap,
              info.visibleBounds.right, info.visibleBounds.bottom),
        );
        if (info.visibleBounds.height <= 0) {
          return VisibilityInfo(
            key: key,
            size: info.size,
          );
        }
        break;
      case AxisDirection.up:
        info = VisibilityInfo(
          key: info.key,
          size: info.size,
          visibleBounds: Rect.fromLTRB(info.visibleBounds.left, info.visibleBounds.top, info.visibleBounds.right,
              info.visibleBounds.bottom - constraints.overlap),
        );
        if (info.visibleBounds.height <= 0) {
          return VisibilityInfo(
            key: key,
            size: info.size,
          );
        }
        break;
      case AxisDirection.right:
        info = VisibilityInfo(
          key: info.key,
          size: info.size,
          visibleBounds: Rect.fromLTRB(info.visibleBounds.left + constraints.overlap, info.visibleBounds.top,
              info.visibleBounds.right, info.visibleBounds.bottom),
        );
        if (info.visibleBounds.width <= 0) {
          return VisibilityInfo(
            key: key,
            size: info.size,
          );
        }
        break;
      case AxisDirection.left:
        info = VisibilityInfo(
          key: info.key,
          size: info.size,
          visibleBounds: Rect.fromLTRB(info.visibleBounds.left, info.visibleBounds.top,
              info.visibleBounds.right - constraints.overlap, info.visibleBounds.bottom),
        );
        if (info.visibleBounds.width <= 0) {
          return VisibilityInfo(
            key: key,
            size: info.size,
          );
        }
        break;
    }

    return info;
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant