flutter_sliver_tracker 1.0.3

  • Readme
  • Changelog
  • Example
  • Installing
  • 54

flutter_sliver_tracker #

滑动曝光埋点框架,支持SliverList、SliverGrid

图片名称

1. 安装 #

dependencies:
  flutter_sliver_tracker: ^1.0.0

2. 引用 #

import 'package:xm_sliver_listener/flutter_sliver_tracker.dart';

3. 发送滑动埋点事件 #

3.1 通过ScrollViewListener捕获滚动事件,ScrollViewListener必须包裹在CustomScrollView之上。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 通过ScrollViewListener捕获滚动事件
      body: ScrollViewListener(
        child: CustomScrollView(
          slivers: <Widget>[
          ],
        ),
      ),
    );
  }
}

3.2 在SliverToBoxAdapter中监听滚动停止事件,并计算显示比例

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 通过ScrollViewListener捕获滚动事件
      body: ScrollViewListener(
        child: CustomScrollView(
          slivers: <Widget>[
            SliverToBoxAdapter(
              // 监听停止事件,如果在页面上展示比例,可以自行setState
              child: SliverEndScrollListener(
                onScrollInit: (SliverConstraints constraints, SliverGeometry geometry) {
                  // 显示高度 / sliver高度
                  Fluttertoast.showToast(msg: "展示比例:${geometry.paintExtent / geometry.scrollExtent}");
                },
                onScrollEnd: (ScrollEndNotification notification,
                    SliverConstraints constraints,
                    SliverGeometry geometry) {
                  Fluttertoast.showToast(msg: "展示比例:${geometry.paintExtent / geometry.scrollExtent}");
                },
                child: Container(
                  height: 300,
                  color: Colors.amber,
                 
                  ),
                ),
            ),
          ],
        ),
      ),
    );
  }
}

3.3 在SliverListSliverGrid中监听滚动停止事件,并计算显示比例

  • itemLength:列表项布局高度
  • displayedLength:列表项展示高度
  • 如果需要在widget中显示高度,可以自行setState
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 通过ScrollViewListener捕获滚动事件
      body: ScrollViewListener(
        child: CustomScrollView(
          slivers: <Widget>[
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  // 监听滚动停止
                  return SliverMultiBoxScrollEndListener(
                    debounce: 1000,
                    child: Container(
                      height: 300,
                      color: Colors.redAccent,
                      child: Center(
                        child: Text("SliverList Item", style: TextStyle(fontSize: 30, color: Colors.white))
                      ),
                    ),
                    onScrollInit: (double itemLength, double displayedLength) {
                      Fluttertoast.showToast(msg: "显示高度:${displayedLength}");
                    },
                    onScrollEnd: (double itemLength, double displayedLength) {
                      Fluttertoast.showToast(msg: "显示高度:${displayedLength}");
                    },
                  );
                },
                childCount: 1
              ),
            ),
          ],
        ),
      ),
    );
  }
}

3.4 在SliverListSliverGrid中监听滚动更新事件,并计算显示比例

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 通过ScrollViewListener捕获滚动事件
      body: ScrollViewListener(
        child: CustomScrollView(
          slivers: <Widget>[
            SliverList(
              delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                // 监听滚动更新事件
                return SliverMultiBoxScrollUpdateListener(
                  onScrollInit: (double percent) {
                    // percent 列表项显示比例
                  },
                  onScrollUpdate: (double percent) {
                    // percent 列表项显示比例
                  },
                  debounce: 1000,
                  // percent 列表项显示比例
                  builder: (BuildContext context, double percent) {
                    return Container(
                      height: 200,
                      color: Colors.amber.withAlpha((percent * 255).toInt()),
                      child: Center(
                          child: Text("SliverList Item Percent ${percent.toStringAsFixed(2)}", style: TextStyle(fontSize: 30, color: Colors.white))
                      ),
                    );
                  },
                );
              },
              childCount: 6
              ),
            ),
          ],
        ),
      ),
    );
  }
}

[1.0.0] - 首次提交

[1.0.1] - 更新图片地址

[1.0.2] - bug修复:移动是context为null

[1.0.3] - bug修复:移动是context为null

example/README.md

flutter_sliver_tracker #

滑动曝光埋点框架,支持SliverList、SliverGrid

1. 安装 #

dependencies:
  flutter_sliver_tracker: ^1.0.0

2. 引用 #

import 'package:xm_sliver_listener/flutter_sliver_tracker.dart';

3. 发送滑动埋点事件 #

3.1 通过ScrollViewListener捕获滚动事件,ScrollViewListener必须包裹在CustomScrollView之上。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 通过ScrollViewListener捕获滚动事件
      body: ScrollViewListener(
        child: CustomScrollView(
          slivers: <Widget>[
          ],
        ),
      ),
    );
  }
}

3.2 在SliverToBoxAdapter中监听滚动停止事件,并计算显示比例

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 通过ScrollViewListener捕获滚动事件
      body: ScrollViewListener(
        child: CustomScrollView(
          slivers: <Widget>[
            SliverToBoxAdapter(
              // 监听停止事件,如果在页面上展示比例,可以自行setState
              child: SliverEndScrollListener(
                onScrollInit: (SliverConstraints constraints, SliverGeometry geometry) {
                  // 显示高度 / sliver高度
                  Fluttertoast.showToast(msg: "展示比例:${geometry.paintExtent / geometry.scrollExtent}");
                },
                onScrollEnd: (ScrollEndNotification notification,
                    SliverConstraints constraints,
                    SliverGeometry geometry) {
                  Fluttertoast.showToast(msg: "展示比例:${geometry.paintExtent / geometry.scrollExtent}");
                },
                child: Container(
                  height: 300,
                  color: Colors.amber,
                 
                  ),
                ),
            ),
          ],
        ),
      ),
    );
  }
}

3.3 在SliverListSliverGrid中监听滚动停止事件,并计算显示比例

  • itemLength:列表项布局高度
  • displayedLength:列表项展示高度
  • 如果需要在widget中显示高度,可以自行setState
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 通过ScrollViewListener捕获滚动事件
      body: ScrollViewListener(
        child: CustomScrollView(
          slivers: <Widget>[
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  // 监听滚动停止
                  return SliverMultiBoxScrollEndListener(
                    debounce: 1000,
                    child: Container(
                      height: 300,
                      color: Colors.redAccent,
                      child: Center(
                        child: Text("SliverList Item", style: TextStyle(fontSize: 30, color: Colors.white))
                      ),
                    ),
                    onScrollInit: (double itemLength, double displayedLength) {
                      Fluttertoast.showToast(msg: "显示高度:${displayedLength}");
                    },
                    onScrollEnd: (double itemLength, double displayedLength) {
                      Fluttertoast.showToast(msg: "显示高度:${displayedLength}");
                    },
                  );
                },
                childCount: 1
              ),
            ),
          ],
        ),
      ),
    );
  }
}

3.4 在SliverListSliverGrid中监听滚动更新事件,并计算显示比例

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 通过ScrollViewListener捕获滚动事件
      body: ScrollViewListener(
        child: CustomScrollView(
          slivers: <Widget>[
            SliverList(
              delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                // 监听滚动更新事件
                return SliverMultiBoxScrollUpdateListener(
                  onScrollInit: (double percent) {
                    // percent 列表项显示比例
                  },
                  onScrollUpdate: (double percent) {
                    // percent 列表项显示比例
                  },
                  debounce: 1000,
                  // percent 列表项显示比例
                  builder: (BuildContext context, double percent) {
                    return Container(
                      height: 200,
                      color: Colors.amber.withAlpha((percent * 255).toInt()),
                      child: Center(
                          child: Text("SliverList Item Percent ${percent.toStringAsFixed(2)}", style: TextStyle(fontSize: 30, color: Colors.white))
                      ),
                    );
                  },
                );
              },
              childCount: 6
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  flutter_sliver_tracker: ^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:flutter_sliver_tracker/flutter_sliver_tracker.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
26
Health:
Code health derived from static analysis. [more]
96
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
60
Overall:
Weighted score of the above. [more]
54
Learn more about scoring.

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

  • Dart: 2.7.0
  • pana: 0.13.4
  • Flutter: 1.12.13+hotfix.5

Health suggestions

Fix lib/src/sliver_endscroll_listener.dart. (-1.99 points)

Analysis of lib/src/sliver_endscroll_listener.dart reported 4 hints:

line 46 col 45: 'ancestorRenderObjectOfType' is deprecated and shouldn't be used. Use findAncestorRenderObjectOfType instead. This feature was deprecated after v1.12.1..

line 46 col 72: 'TypeMatcher' is deprecated and shouldn't be used. TypeMatcher has been deprecated because it is no longer used in framework(only in deprecated methods). This feature was deprecated after v1.12.1..

line 59 col 45: 'ancestorRenderObjectOfType' is deprecated and shouldn't be used. Use findAncestorRenderObjectOfType instead. This feature was deprecated after v1.12.1..

line 60 col 13: 'TypeMatcher' is deprecated and shouldn't be used. TypeMatcher has been deprecated because it is no longer used in framework(only in deprecated methods). This feature was deprecated after v1.12.1..

Fix lib/src/scroll_item_offset_mixin.dart. (-1 points)

Analysis of lib/src/scroll_item_offset_mixin.dart reported 2 hints:

line 19 col 71: 'ancestorRenderObjectOfType' is deprecated and shouldn't be used. Use findAncestorRenderObjectOfType instead. This feature was deprecated after v1.12.1..

line 19 col 98: 'TypeMatcher' is deprecated and shouldn't be used. TypeMatcher has been deprecated because it is no longer used in framework(only in deprecated methods). This feature was deprecated after v1.12.1..

Fix lib/src/scroll_view_listener.dart. (-1 points)

Analysis of lib/src/scroll_view_listener.dart reported 2 hints:

line 16 col 21: 'ancestorStateOfType' is deprecated and shouldn't be used. Use findAncestorStateOfType instead. This feature was deprecated after v1.12.1..

line 16 col 41: 'TypeMatcher' is deprecated and shouldn't be used. TypeMatcher has been deprecated because it is no longer used in framework(only in deprecated methods). This feature was deprecated after v1.12.1..

Fix additional 3 files with analysis or formatting issues.

Additional issues in the following files:

  • lib/src/_debounce.dart (Run flutter format to format lib/src/_debounce.dart.)
  • lib/src/sliver_multi_box_scroll_end_listener.dart (Run flutter format to format lib/src/sliver_multi_box_scroll_end_listener.dart.)
  • lib/src/sliver_multi_box_scroll_update_lintener.dart (Run flutter format to format lib/src/sliver_multi_box_scroll_update_lintener.dart.)

Maintenance issues and suggestions

The description contains too many non-ASCII characters. (-20 points)

The site uses English as its primary language. The value of the description field in your package's pubspec.yaml field should primarily contain characters used in English.

The package description is too short. (-20 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test