Flutter Horizontal List with A Snap Effect

Last updated Nov 30, 2021

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

dependencies:
  scroll_snap_list: ^0.8.4

 

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: 

 

Video Tutorial

 

Conclusion: In this way, we have learned how you can get a snapping effect for a horizontal list in Flutter.


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

474 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions