Flutter offers various widgets in which Listview is the most used widget in the application and in today's tutorial we will see how you can get a snapping effect to listview i.e "snaping" event to an item at the end of user-scroll.
Let's start
Step 1: Create a new Flutter Application
Step 2: Add a line like this to your package's pubspec.yaml
|
Step 3: You can create a list that you want in which there is an item view for example we have a list of ten numbers that we will display in a container.
|
List data = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]; |
Now Once the Package is installed we will get access to a widget called ScrollSnapList it has required properties
itemBuilder: where you will give your list item view.
itemCount: where you will give the list item count just like normal listview.
itemSize: Composed of the size of each item + its margin/padding. Size used is width if scrollDirection is Axis.horizontal, height if Axis.vertical.
onItemFocus: Callback function when list snaps to list index.
when the item reaches to last it has a property called onReachEnd which will help you launch any function
for example:
|
Expanded( child: ScrollSnapList( onItemFocus: _onItemFocus, itemBuilder: _buildItemList, itemSize: 150, dynamicItemSize: true, onReachEnd: () { print('Done!'); }, itemCount: data.length, )), |
this is the simple example where you will see "Done!" printed in your terminal when the list reaches to end using onReachEnd Function.
Full Source Code to try
|
import 'package:flutter/material.dart'; import 'package:scroll_snap_list/scroll_snap_list.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: DemoApp(), theme: ThemeData( brightness: Brightness.dark, ), ); } }
class DemoApp extends StatefulWidget { @override _DemoAppState createState() => _DemoAppState(); }
class _DemoAppState extends State { int _focusedIndex = 0; List data = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]; void _onItemFocus(int index) { setState(() { _focusedIndex = index; }); }
Widget _buildItemList(BuildContext context, int index) { if (index == data.length) return Center( child: CircularProgressIndicator(), ); return Container( width: 150, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( color: Colors.yellow, width: 150, height: 200, child: Center( child: Text( '${data[index]}', style: TextStyle(fontSize: 50.0, color: Colors.black), ), ), ), ], ), ); }
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( 'Horizontal list', style: TextStyle(color: Colors.white), ), centerTitle: true, ), body: Container( child: Column( children: [ Expanded( child: ScrollSnapList( onItemFocus: _onItemFocus, itemBuilder: _buildItemList, itemSize: 150, dynamicItemSize: true, onReachEnd: () { print('Done!'); }, itemCount: data.length, )), ], ), ), ); } }
|
Output:
 |
 |
Conclusion: In this way, we have learned how you can get a snapping effect for a horizontal list in Flutter.
|
Article Contributed By :
|
|
|
|
|
807 Views |
|