Overview

Pagination is the process of dividing a large set of data into smaller chunks or "pages," which are retrieved and displayed one at a time. This is especially important for web applications to optimize performance and improve the user experience when dealing with extensive datasets.

Why We Create This

If we use a DataTable in FlutterFlow for pagination with the help of an API, it will call the API once and then display the data. This can be a time-consuming process if the user wants to reduce the loading time and retrieve the data quickly. In such cases, we need to handle it statically.

Prerequisites

• Supabase
• Flutterflow
• API

Supabase

Supabase is an open-source Backend-as-a-Service (BaaS) platform that offers a scalable backend for building web and mobile applications. It provides developers with tools to set up a full backend without having to manually configure databases or authentication systems. Supabase is often described as an alternative to Google Firebase, but with a stronger focus on open-source technologies and relational databases like PostgreSQL.

To set up your Supabase project, please follow the steps below:

1. Create a Supabase project

• Go to the Supabase console.
• Click on "Create a project" and follow the instructions to set up a new project.

Flutterflow

FlutterFlow is a low-code development platform built on top of Flutter, Google's open-source UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

To set up your FlutterFlow project, please follow the steps below:

1. Create a FlutterFlow Project

• Go to the FlutterFlow console.
• Click on Create a project and follow the instructions to set up a new project.

Enable Supabase Authentication in FlutterFlow

• In the settings, enable authentication and select Supabase as the authentication type in the FlutterFlow console.
• Set up the entry and login page.
• Enable Supabase in FlutterFlow and fill in the API URL and Anon Key from Supabase.

• Go to the Supabase project, select Supabase project settings, choose API, then copy the URL and Anon Key and paste them in the FlutterFlow console.
• Go to settings and enable Supabase, fill in the API URL and Anon Key from the Supabase project, and retrieve the schema.

Define Database Schema

• Go to the SQL Editor and create a table using the following SQL script:
• Create a Supabase table and add columns as per the requirements. Ensure that row-level security (RLS) is enabled at the time of table creation.

• Or You can create table through below SQL code also.

-- Create the table

CREATE TABLE table_name (

   id UUID PRIMARY KEY DEFAULT gen_random_uuid(),

   created_at TIMESTAMP DEFAULT now(),

   name TEXT NOT NULL,

   address TEXT,

   images TEXT[]

);



-- Enable Row-Level Security

ALTER TABLE table_name ENABLE ROW LEVEL SECURITY;



• Insert at least 30–40 rows of data into the table.
• Navigate to the SQL editor in Supabase, create an SQL query using all the columns created during table creation, and run it.

CREATE OR REPLACE FUNCTION public.function_name(variable_name INT)

-- Create a function with 'function_name' variable and 'variable_name'

RETURNS TABLE (

   id BIGINT,

   created_at TIMESTAMPTZ,

   name TEXT,

   address TEXT,

   image TEXT

   -- Fields of the table: e.g., id, created_at, name, address, image

) AS $$

BEGIN

   RETURN QUERY

   SELECT table_name.id, table_name.created_at, table_name.name, table_name.address, table_name.image

   -- Put the table name exactly as it was given during creation: 'table_name'

   FROM table_name

   ORDER BY table_name.id

   LIMIT limit_var

   -- Create limit variable 'limit_var'

   OFFSET variable_name * limit_var - limit_var;

END;

$$ LANGUAGE plpgsql;

SELECT * FROM public.function_name(page_number);

-- Put the number of pages in the table, which means the total number of columns in the table divided by the limit





• In the limit, you can set the number of rows you want to fetch from the Supabase table.
• Fill it in as per the instructions, and then execute the SQL code. If it runs successfully, it will automatically create a database function in the Supabase database and display the output on the results screen.

Create the policy

• Go to Table Editor > table_Name > View Policies and enable RLS.

• Define access policies, for example, allow public read access:
• Set the using field (true/false) as per your requirements.

create policy "policy_name"

on "public"."admin"

as PERMISSIVE

for SELECT

to public

using (

-- you have only two option in that 'true/false'

);



API

An API (Application Programming Interface) is a set of rules, protocols, and tools that allow different software applications to communicate with each other. It acts as an intermediary, enabling one application to interact with another to request or provide data, services, or functionality.

Create an API with the help of Supabase.

• Supabase automatically generates RESTful endpoints for your tables.
• This is a POST API.
• You can test the API in Postman.

Base URL

Find your API URL in the API Settings of the Supabase dashboard. It typically looks like:

https://<project-ref>.supabase.co



Add the Endpoints in the above URL

/rest/v1/rpc/function_name



Add the headers

1. apikey: Add the Supabase ‘anon key’.
2. Authorization: Add the Supabase ‘JWT secret’.
3. Content-Type: Add ‘application/json’.

Add the body

{

 "variable_name": page_num

}

-- The 'variable_name' is the function's variable name.



Run the API and test if it returns the output in JSON format. If it does, then it is correct.

Add the API in the flutterflow

• Create the POST API in FlutterFlow and include all the details that were added in Postman during testing.
• Create a new page and design a table using Row, Column, and Container widgets.
• Define two page state variables:
  1. Page number: Set the initial value to 1.
  2. JSON list: This will store the list of JSON data returned from the API.
• Call the API when the page loads, passing the page number as a parameter. Store the API response in the JSON list variable.
• Dynamically generate children for the Column using the JSON list variable, mapping the values to display in the table.

• Create a pagination indicator below the table using Icon and Text widgets.
• As shown in the image above, add the following functionality:
  1. Backward arrow icon:
     • Set the action to decrement the page number.
     • Call the API, passing the updated page number as a parameter.
     • Update the API response in the JSON list variable.
  2. Forward arrow icon:
     • Set the action to increment the page number.
     • Call the API, passing the updated page number as a parameter.
     • Update the API response in the JSON list variable.
• The table should automatically update whenever the current page changes.

Conclusion

By using Supabase and FlutterFlow, you can efficiently handle pagination for large datasets in your application, minimizing the loading time and enhancing user experience. Supabase provides a scalable backend and the ability to create APIs easily, while FlutterFlow allows you to visually build applications with minimal code.

‍