Coder Social home page Coder Social logo

widgets_visibility_provider's Introduction

widgets_visibility_provider

Pub 996.icu License: 996.icu License: MIT

A library that listens to children inside scrollview

一个监听 scrollview 内部 child 的库

Screenshot

like Instagram show comment

Screenshot

Getting Started

widgets_visibility_provider: ^2.0.2

More info

Flutter 如何在 scrollview 监听子 widget

Flutter 实现类似 ins 的显示评论框效果

How to use

如何使用

First

Use WidgetsVisibilityProvider to wrap scrollview(CustomScrollView, ListView...)

使用 WidgetsVisibilityProvider 包裹 scrollview(CustomScrollview, ListView..)

WidgetsVisibilityProvider(
  // range condition default or return null condition is:
  // 范围判断默认或者返回 null 情况下执行的是:
  // positionData.endPosition >= 0 && positionData.startPosition <= positionData.viewportSize
  condition: (PositionData positionData)=> null,
  // No need to wrap directly
  // 不必直接包裹
  child: SomeWidget(
    child:  ListView.builder(// CustomScrollView, GridView...
      ...some code...
    ),
  ),
)

Second

Use VisibleNotifierWidget to wrap child widget

使用 VisibleNotifierWidget 包裹子 widget

on ListView:

ListView.builder(
  itemCount: itemCount,
  itemBuilder: (context, index) => VisibleNotifierWidget(
    // data type is dynamic, you can set everything or don't set or null
    // data 的类型是 dynamic, 你可以设置任何数据或者为 null 或者不设置
    data: index,
    // you can use builder or child
    // 你可以使用 builder 或者 child
    // positionData and notification is nullable
    // positionData 和 notification 有可能为空
    builder: (context, notification, positionData) => ...,
    // if you use builder, can't use listener and child
    // 如果你使用了 builder, 就不能使用 listener 和 child
    listener: (context, notification, positionData) {
      ...
    },
    child: child(),
    // default buildWhen or return null condition is:
    // 默认判断或者返回 null 情况下执行的是:
    // if (previousPositionData != currentPositionData) return true;
    // if (previousPositionData != null && currentPositionData != null)
    // return previousNotification != currentNotification;
    // return false;
    condition: (
      previousNotification,
     previousPositionData,
     currentNotification,
     currentPositionData,
     )=>...,
  ),
)

on SliverToBoxAdapter

SliverToBoxAdapter(
  child: VisibleNotifierWidget(
    // same to ListView example
    // 和上面一样
    ...
    child: child,
  ),
)

on SliverList

SliverList(
  delegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) => VisibleNotifierWidget(
      // same to ListView example
      // 和上面一样
      ...
      child: child,
    ),
  ),
)

Maybe Third

If you want to watch all widget information

如果你希望一次过获取所有范围内的 widget 信息

Use WidgetsVisibilityBuilder or WidgetsVisibilityListener or WidgetsVisibilityConsumer in WidgetsVisibilityProvider childtree If you use bloc, you can also use WidgetsVisibilityProviderBloc

WidgetsVisibilityProvider 的子 widget 使用 WidgetsVisibilityBuilder 或者 WidgetsVisibilityListener或者WidgetsVisibilityConsumer 如果你使用 bloc,也可以使用 WidgetsVisibilityProviderBloc

WidgetsVisibilityBuilder(
  builder: (context, event) => someWidget,
  // Of course, you can also increase the judgment buildWhen
  // 当然你也可以增加条件
  buildWhen: (previous, current)=>...,
)

WidgetsVisibilityListener(
  // Of course, you can also increase the judgment listenWhen
  // 当然你也可以增加条件
  listenWhen: (previous, current)=>...,
  listener: (context, event) {
    ...
  },
  child: child,
)

WidgetsVisibilityConsumer(
  builder: (context, event) => someWidget,
  buildWhen: (previous, current)=>...,
  listenWhen: (previous, current)=>...,
  listener: (context, event) {
)

About data bean

PositionData

class PositionData extends Equatable {
  final double startPosition;
  final double endPosition;
  final double viewportSize;
  final dynamic data;

  ...other code
}

WidgetsVisibilityEvent

class WidgetsVisibilityEvent extends Equatable {
  final ScrollNotification notification;
  final List<PositionData> positionDataList;

  ...other code
}

widgets_visibility_provider's People

Contributors

tw4452852 avatar yeungkc avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

widgets_visibility_provider's Issues

Not working with controller

If i set ScrollController with ListView.builder() then its not working. I need to set controller for scroll to particular position in a list. Please help.

Widgets Visibility Provider with AnimatedList

Hi! Hope you are well. Thank you for this amazing library.

It seems like the VisibleVisibilityProvider does not play nice with an AnimatedList . Once the list is updated, it does not change its state anymore and none of the listeners are called. Using the same code, but replacing the AnimatedList with a normal ListView.builder results in the expected behaviour. Is there, to your knowledge, any plans for this or possible workarounds?

All the best.

Type casting issue with latest 3.0.0-nullsafety.0

Here's exception:

══╡ EXCEPTION CAUGHT BY SCHEDULER LIBRARY ╞═════════════════════════════════════════════════════════
The following _CastError was thrown during a scheduler callback:
type 'WhereIterable<MapEntry<Key?, PositionData>?>' is not a subtype of type 'Iterable<MapEntry<Key,
PositionData>>' in type cast

When the exception was thrown, this was the stack:
#0 WidgetsVisibilityProviderBloc._schedulePositionUpdate. (package:widgets_visibility_provider/src/widgets_visibility_provider.dart:118:24)
#1 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1144:15)
#2 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1090:9)
#3 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:998:5)
#7 _invoke (dart:ui/hooks.dart:167:10)
#8 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:259:5)
#9 _drawFrame (dart:ui/hooks.dart:126:31)
(elided 3 frames from dart:async)
════════════════════════════════════════════════════════════════════════════════════════════════════

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.