Flutter Pagination with Getx

Posted By : Saurabh Singh | 20-Jun-2022

 we will discuss how we can implement Getx the package for managing the state of pagination in flutter. Pagination is the process of dividing an object into many pages. This feature is nowadays most common. It helps in improving the performance. Through pagination we can reduce the server time to the database, hence it reduces the cost of database maintenance. It is a user-friendly feature, interested users can scroll more and more if they deliberately want to load more data.

 

Table of content:

1)Introduction to Getx

2)Creating Project and Installing Getx in Flutter project

3)Creating model class , GetxController and Home Page

3)Pagination Using Getx


 

Introduction to Getx:

Getx is state management  technique that is used for route management, and dependency Injection.For routing, Getx does not required context for navigation. Automatically reduce the memory consumption when the controller is not in used.Getx uses its own dependency injection feature with simple syntax.

 

Creating Project and Installing Getx in Flutter project:

2.1) open android studio and click on file > new >new flutter project

2.2) add latest Getx package to yaml.file from pub.dev website

2.3) run command on terminal pub get to install package

 

Creating a model class:

3.1 Creating simple model class.

class Name{

String Name;

Name({

this.name

})

}

 

Creating a GetxController:

GetxController is a class in which we write all our business logic, variables, and methods used for managing the state of the app screen.

 

Class HomePageController extends GetxController {

}

 

Generating list:

we are generated a list of Name(Model Name) that we will initially display on the screen.List.generate() will generate a list for the Model class.

generateList(){

list=List.generate(

   listLength,(index)=>Name(name:(index=1).toString()));

)

}

Creating a  method executed every time when scrolling controller limit exceeds limits:

To measure the scroll limit we use the ScrollController . maxScrollExtent is the number of max pixels and pixels. it will notify the listener when the pixel changes. controller.position.maxScrollExtent == controller.position.pixels this condition will only return true when the scrolling is max( reach to bottom).

 It will add it item in to the list when scroll controller will reach the end of page

addItems() async {

controller.addListener(() {

if (controller.position.maxScrollExtent == controller.position.pixels) {

for (int i = 0; i < 10; i++) {

listLength++;

list.add(Name(name: (listLength).toString())); update();

}

}

});

}

Pagination Using GetX  code:

 

HomePageController.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_pagination/main.dart';

class HomePageController extends GetxController {
  List<Model> list = [];
  ScrollController controller = ScrollController();
  int listLength = 6;

  void onInit() {
    generateList();
    addItems();
    super.onInit();
  }

  addItems() async {
    controller.addListener(() {
      if (controller.position.maxScrollExtent == controller.position.pixels) {
        for (int i = 0; i < 10; i++) {
          listLength++;
          list.add(Name(name: (listLength).toString()));
          update();
        }
      }
    });
  }

  generateList() {
    list = List.generate(
        listLength, (index) => Name(name: (index + 1).toString()));
  }
}

main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_pagination/homepage_controller.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.red,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(
        title: "Pagination",
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  String title;

  MyHomePage({
    this.title,
  });

  HomePageController homePageController = Get.put(HomePageController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: GetBuilder(
        init: homePageController,
        builder: (value) => ListView.builder(
          controller: value.controller,
          itemCount: value.list.length,
          itemBuilder: (context, index) {
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                color: Colors.red,
                height: 100,
                child: Center(
                  child: Text(value.list[index].name),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

class Name {
  String name;

  Name({
    this.name,
  });
} 

 

About Author

Author Image
Saurabh Singh

Saurabh is working as a Mobile Application Developer with an overall 2+ years of experience. His areas of expertise are Flutter and Android Development. He is a detail-oriented person with good problem-solving skills.

Request for Proposal

Name is required

Comment is required

Sending message..