15
May

Flutter Infinite List view

0

Flutter Infinite List view:

In this tutorial, we are going to study creating a Flutter infinite list view. List view is used to create a list of products for e-commerce OR list of data to display when we scroll down it loads the data or list of the products. Using flutter infinite list view we can load an infinite list of products or infinite data unlimitedly when we scroll down.

flutter infinite list view  which fetches data over the network and loads it as a user scrolls down means infinite scrolling for example for e-commerce products flutter infinite list view fetches the products from the remote network and load on the user app and when the user of the app scrolls down it loads the products;

We will learn to fetch the JSON API in the next tutorial and In this tutorial, we are not fetching the network data we can learn this in the next tutorial.

Implementing Flutter Infinite List View:

Add the dependency package:

To use flutter infinite list view we have to add the dependency package to pubspec.yaml file. use the below code to add dependency package. After adding the dependency package run the get package method to import all the required files to the app.

dependencies:
infinite_listview: ^1.0.0

Install the package:

You can install the package from the command line using the below code with Flutter as shown.

$ flutter packages get

Importing the Package:

After, Adding the dependency package to the pubspec.yaml file, you can now import the package into the dart code by using the below code. without adding the dependency package to the pubspec.yaml file if you import it will show package not found an error.

import 'package:infinite_listview/infinite_listview.dart';

Complete Example Code for Flutter Infinite List View:

Copy and Paste the below code into your main.dart file

main.dart

import 'package:flutter/material.dart';
import 'package:infinite_listview/infinite_listview.dart';

void main() => runApp(ExampleApp());

class ExampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: ExampleScreen(),
);
}
}

class ExampleScreen extends StatefulWidget {
@override
_ExampleScreenState createState() => _ExampleScreenState();
}

class _ExampleScreenState extends State {
final InfiniteScrollController _infiniteController = InfiniteScrollController(
initialScrollOffset: 0.0,
);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Example'),
actions: [
IconButton(
icon: const Icon(Icons.arrow_downward),
onPressed: () {
_infiniteController.animateTo(_infiniteController.offset + 2000.0, duration: const Duration(milliseconds: 250), curve: Curves.easeIn);
},
),
IconButton(
icon: const Icon(Icons.arrow_upward),
onPressed: () {
_infiniteController.animateTo(_infiniteController.offset - 2000.0, duration: const Duration(milliseconds: 250), curve: Curves.easeIn);
},
),
],
),
body: InfiniteListView.separated(
controller: _infiniteController,
itemBuilder: _buildItem,
separatorBuilder: (BuildContext context, int index) => const Divider(height: 2.0),
),
);
}

Widget _buildItem(BuildContext context, int index) {
return Material(
child: InkWell(
onTap: () {},
child: ListTile(
title: Text('Item #$index'),
subtitle: Text('Subtitle $index'),
trailing: const Icon(Icons.chevron_right),
),
),
);
}
}

Congratulations You Have Learned Creating Flutter Infinite List View….!!!

If It Is Helpful Share It With Your Friends….!!!

Leave a Reply

Categories