widgets_visibility_provider 1.0.3

  • Readme
  • Changelog
  • Example
  • Installing
  • new65

widgets_visibility_provider #

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

A library that listens to children inside scrollview

一个监听 scrollview 内部 child 的库

Screenshot

Getting Started #

widgets_visibility_provider: ^1.0.3

More info #

Flutter 如何在 scrollview 监听子 widget

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 condition 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 in WidgetsVisibilityProvider childtree If you use bloc, you can also use WidgetsVisibilityProviderBloc

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

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

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

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
}

[1.0.3] #

  • update bloc

[1.0.2] #

  • change README.md

[1.0.1] #

  • change description

[1.0.0] #

  • init.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:widgets_visibility_provider/widgets_visibility_provider.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: WidgetsVisibilityProvider(
          // range condition default or return null condition is:
          // 范围判断默认或者返回 null 情况下执行的是:
          // positionData.endPosition >= 0 && positionData.startPosition <= positionData.viewportSize
          condition: (PositionData positionData) => null,
          child: Column(
            children: [
//              WidgetVisibilityListener(
//                listener: (context, event) {
//                  print('[WidgetVisibilityListener] event: $event');
//                },
//                condition: (previous, current) => true,
//                child: someWidget,
//              ),
              WidgetsVisibilityBuilder(
                  // if you don't need startPosition end endPosition change, you can use it
                  // 如果你不需要 startPosition 和 endPosition 变化,你可以增加此条件减少 build 次数
//                   condition: (previous, current) => !listEquals(
//                       previous.positionDataList.map((e) => e.data).toList(),
//                       current.positionDataList.map((e) => e.data).toList()),
                  builder: (context, event) => Container(
                        padding: const EdgeInsets.symmetric(vertical: 8),
                        child: Column(
                          children: [
                            Text(
                                '[notification] pixels: ${event.notification?.metrics?.pixels}, minScrollExtent: ${event.notification?.metrics?.minScrollExtent}, maxScrollExtent: ${event.notification?.metrics?.maxScrollExtent}, viewportDimension: ${event.notification?.metrics?.viewportDimension}'),
                            Wrap(
                              children: [
                                Text('display: '),
                                ...event.positionDataList.map(
                                  (e) => Container(
                                    padding: const EdgeInsets.symmetric(
                                        horizontal: 2),
                                    child: Text('${e.data}'),
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      )),
              Expanded(
                child: ListView.builder(
                  itemBuilder: (context, index) => VisibleNotifierWidget(
                    // data type is dynamic, you can set everything
                    // data 的类型是 dynamic, 你可以设置任何数据
                    data: index,
                    // positionData and notification is nullable
                    // positionData 和 notification 有可能为空
                    builder: (context, notification, positionData) => Container(
                      height: 128,
                      color: index.isEven
                          ? const Color(0xff000000).withOpacity(0.3)
                          : const Color(0xff000000).withOpacity(0.1),
                      padding: EdgeInsets.all(8),
                      child: Center(
                        child: Text(
                            '$index, start: ${positionData?.startPosition}, end: ${positionData?.endPosition}'),
                      ),
                    ),
                    // or use listener and child
//                    listener: (context, notification, positionData) {
//                      print(
//                          '[listener] notification: $notification, positionData: $positionData');
//                    },
//                    child: someWidget,
                  ),
                  itemCount: 64,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  widgets_visibility_provider: ^1.0.3

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:widgets_visibility_provider/widgets_visibility_provider.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
30
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
65
Learn more about scoring.

We analyzed this package on Jul 8, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • widgets_visibility_provider that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
bloc ^5.0.1 5.0.1
equatable ^1.2.0 1.2.0
flutter 0.0.0
flutter_bloc ^5.0.1 5.0.1
Transitive dependencies
collection 1.14.12 1.14.13
cubit 0.1.2 0.2.0-dev.1
flutter_cubit 0.1.1 0.2.0-dev.1
meta 1.1.8 1.2.1
nested 0.0.4
provider 4.3.0
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test