Flutter Infinite Scroll
- Robert Apikyan
Prerequisites
Get Infinite scroll ID
When using one of Flutter’s scrollable widgets we need to create the infinite scroll id manually and use the returned id to show ads in each of the scrollable items.
final infiniteScrollConfigId = ConfigConstants.infiniteScrollTestR89ConfigId;
final infiniteScrollId =
R89SDK.adFactory.createInfiniteScroll(configurationId:
infiniteScrollConfigId);Your infiniteScrollConfigId will be provided to you during onboarding process by email, you can also retrieve them from the web interface after login.
They can be many or none depending on your requests, if you need one or more please request them to your account manager or technical account manager.
Show ads in the item
To show ads, in each item, you will need to use R89InfiniteScrollAd(infiniteScrollId:,itemIndex:) widget and pass the already created infiniteScrollId and item’s index as an argument.
import 'package:flutter/material.dart';
import 'package:refinery89_monetize_app/r89_sdk.dart';
...
Widget _buildItem(context, index) => Card(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Item index $index"),
),
Center(
child: R89InfiniteScrollAd(
infiniteScrollId: infiniteScrollId,
itemIndex: index),
)
],
),
);
...Careful on the implementation of R89InfiniteScrollAd() widget.
This needs to be implemented according to your implementation of the infinite scroll.
If you have paginated content this position needs to account for that
EX: 20 items per page so first 20 items go from 0 to 19 and the first item of the second page is not 0 is 20
formula beeing -> pageItemIndex + (pageSize*currentPage)
so first item position of first page is 0 + (20*0)
item 0 plus 20 multiplied by the current page index, so page 1 has index 0
and first item position of the second page is 0 + (20*1)
item 0 plus 20 multiplied by the current page index, so page 2 has index 1
second item first page would be 1 + (20*0) = 1
second item second page would be 1 + (20*1) = 21
and so on
Lifecycle events
You can subscribe to these events with the same method but passing a new object as a parameter. Details about this object can be found in the Reference.