May

Flutter Load More

Flutter Load More:

In this tutorial, we are going to create Flutter load more functionality. We all know that whatever apps we are using nowadays are having a large amount of data fetching over the network remotely from the server and loads dynamically when we scroll down the screen of the app for this functionality we have to implement flutter load more functionality for both Android and IOS Apps.

So in this tutorial, we are going to implement auto load more functionality.

Implementing Flutter Load More Functionality:

Add the dependency package:

To implement the flutter load more functionality we need 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:
loadmore: ^1.0.3

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:loadmore/loadmore.dart';

Getting the original length of the file in a remote server or in the app only.use the below code to get the length of the items.

int get count => list.length;

Creating flutter load more functionality:

We are creating this load more functionality inside the container of the build method. Inside a Container we are creating a child widget for loadMore functionality and also inside this load more we are creating the child widget for building the list using the listView.builder method.

body: Container(
child: RefreshIndicator(
child: LoadMore(
isFinish: count >= 60,
onLoadMore: _loadMore,
child: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return Container(
child: Text(list[index].toString()),
height: 40.0,
alignment: Alignment.center,
);
},
itemCount: count,
),

Creating the Delay time for Load More Functionality:

In the beow example code we are creating the time to load the items within the given delay time

Future _loadMore() async {
print("onLoadMore");
await Future.delayed(Duration(seconds: 0, milliseconds: 2000));
load();
return true;
}

Complete Example Code to Create Flutter Load More:

Copy and Paste below code into your main.dart file

main.dart

import 'dart:async';

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

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.red,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;

@override
_MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State {
int get count => list.length;

List list = [];

void initState() {
super.initState();
// list.addAll(List.generate(30, (v) => v));
}

void load() {
print("load");
setState(() {
list.addAll(List.generate(15, (v) => v));
print("data count = ${list.length}");
});
}

@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: Container(
child: RefreshIndicator(
child: LoadMore(
isFinish: count >= 60,
onLoadMore: _loadMore,
child: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return Container(
child: Text(list[index].toString()),
height: 40.0,
alignment: Alignment.center,
);
},
itemCount: count,
),
whenEmptyLoad: false,
delegate: DefaultLoadMoreDelegate(),
textBuilder: DefaultLoadMoreTextBuilder.chinese,
),
onRefresh: _refresh,
),
),
);
}

Future _loadMore() async {
print("onLoadMore");
await Future.delayed(Duration(seconds: 0, milliseconds: 2000));
load();
return true;
}

Future _refresh() async {
await Future.delayed(Duration(seconds: 0, milliseconds: 2000));
list.clear();
load();
}
}

Congratulations You Have Learned Creating Flutter Load More Functionality….!!!

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

PrevNext