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 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.
dependencies:
scroll_snap_list: ^0.8.4
scrollDirection is Axis.horizontal, height if Axis.vertical.
|
Article Contributed By :
|
|
|
|
|
562 Views |
|