flutter_sliver_tracker

Making connections

Sliding exposure buried point framework, support SliverList, SliverGrid

What is a sliding exposure buried point

Slide exposure buries are used to expose modules in a slide list component, such as the SliverList and SliverGrid in a Flutter. When a row (or column) in the SliverList moves to the ViewPort and the display ratio exceeds a certain threshold, we count that event as a sliding exposure event.

Of course we have some additional requirements for sliding exposure:

• Need to slide out of a certain proportion before starting exposure (achieved)
• No exposure event when sliding fast (throttle required)
• Modules that slide out of view need to be reported again when sliding back into view (implemented)
• Modules moving up and down in view only trigger one exposure (not yet)

Run the Demo

• Cloning code to the local: git clone [email protected]: SBDavid/flutter_sliver_tracker git
• Run the CD flutter_sliver_tracker/example/ command to switch the working path
• Start simulator
• Run: flutter run

internals

The core difficulty of sliding exposure is to calculate the exposure proportion of components. We need to know the total height of the components in the ListView and the current display height. Divide these two heights to get the ratio.

Total component height

The total height of the component can be obtained in the renderObject. We can get the Size property under the renderObject, which contains the length and width of the component.

Current display height

According to height from SliverGeometry. PaintExtent.

Using document

1. Install

dependencies:
  flutter_sliver_tracker: ^ 1.0.0
Copy the code

2. Reference plug-ins

import 'package:xm_sliver_listener/flutter_sliver_tracker.dart';
Copy the code

3. Send the sliding buried point event

3.1 throughScrollViewListenerCatch the scroll event,ScrollViewListenerMust be wrappedCustomScrollViewAbove the law.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // Capture the scroll event with ScrollViewListenerbody: ScrollViewListener( child: CustomScrollView( slivers: <Widget>[ ], ), ), ); }}Copy the code

3.2 inSliverToBoxAdapterListen to the scroll stop event and calculate the display scale

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // Capture the scroll event with ScrollViewListener
      body: ScrollViewListener(
        child: CustomScrollView(
          slivers: <Widget>[
            SliverToBoxAdapter(
              // listen for the stop event. If the scale is displayed on the page, you can setState yourself
              child: SliverEndScrollListener(
                onScrollInit: (SliverConstraints constraints, SliverGeometry geometry) {
                  // Display height/sliver height
                  Fluttertoast.showToast(msg: "Display proportion:${geometry.paintExtent / geometry.scrollExtent}");
                },
                onScrollEnd: (ScrollEndNotification notification,
                    SliverConstraints constraints,
                    SliverGeometry geometry) {
                  Fluttertoast.showToast(msg: "Display proportion:${geometry.paintExtent / geometry.scrollExtent}");
                },
                child: Container(
                  height: 300, color: Colors.amber, ), ), ), ], ), ), ); }}Copy the code

3.3 inSliverListandSliverGridListen to the scroll stop event and calculate the display scale

• ItemLength: Layout height of a list item
• DisplayedLength: Displays the height of the list item
• If you need to display height in the widget, you can setState yourself

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // Capture the scroll event with ScrollViewListener
      body: ScrollViewListener(
        child: CustomScrollView(
          slivers: <Widget>[
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  // Listen to scroll stop
                  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: "Display height:${displayedLength}");
                    },
                    onScrollEnd: (double itemLength, double displayedLength) {
                      Fluttertoast.showToast(msg: "Display height:${displayedLength}"); }); }, childCount:1),),),),); }}Copy the code

3.4 inSliverListandSliverGridTo listen for rolling update events and calculate the display scale

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // Capture the scroll event with ScrollViewListener
      body: ScrollViewListener(
        child: CustomScrollView(
          slivers: <Widget>[
            SliverList(
              delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                // Listen for rolling update events
                return SliverMultiBoxScrollUpdateListener(
                  onScrollInit: (double percent) {
                    // percent Indicates the percentage of list items
                  },
                  onScrollUpdate: (double percent) {
                    // percent Indicates the percentage of list items
                  },
                  debounce: 1000.// percent Indicates the percentage of list items
                  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),),),),); }}Copy the code