If you want to know if a flutter image has been seen by the user? he impression is only counted when the image is completely visible on the screen, you can change that using _count = expression. And I used simple Container for Image.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | void main() => runApp(MaterialApp(home: HomePage()),); class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { ScrollController _scrollController; double _heightListTile = 56, _heightContainer = 200, _oldOffset = 0, _heightBox, _initialAdd; int _initialCount, _count, _previousCount = 0, _itemsInList = 4; @override void initState() { super.initState(); _heightBox = ((_itemsInList) * _heightListTile) + _heightContainer; _scrollController = ScrollController(); _scrollController.addListener(() { double offset = _scrollController.offset; if (offset >= _oldOffset) { _oldOffset = offset; _count = _initialCount + (offset + _initialAdd) ~/ _heightBox; if (_count != _previousCount) setState(() {}); _previousCount = _count; } }); Timer.run(() { bool isIos = Theme.of(context).platform == TargetPlatform.iOS; var screenHeight = MediaQuery.of(context).size.height - (isIos ? 100 : 80); // for non notches phone use 76 instead of 100 (it's the height of status and navigation bar) _initialCount = screenHeight ~/ _heightBox; _initialAdd = screenHeight % _heightBox; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(_count == null ? "Let's count" : "Images shown = ${_count}")), body: ListView.builder( itemCount: 100, controller: _scrollController, itemBuilder: (context, index) { if (index == 0) return Container(); if (index != 0 && index % (_itemsInList + 1) == 0) { return Container( height: _heightContainer, alignment: Alignment.center, color: Colors.blue[(index * 20) % 1000], child: Text("Image #${(index + 1) ~/ 5}"), ); } return SizedBox(height: _heightListTile, child: ListTile(title: Text("Item ${index}"))); }, ), ); } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
