Flutter's [FlatList] widget for React Native friendly developers

Related tags

Templates flat_list
Overview

FlatList for Flutter

Pub Version CI

[FlatList] widget in Flutter which will be familiar to React Native developers.

Motivation

While there are opinionated ways to build listviews in React Native, there are many ways to build listviews in Flutter. In Flutter, we can use ListView, ListView.builder(), SliverList and also when you want to make list with more than one column, you need to use GridView, SliverGrid and so on.

By providing FlatList widget in Flutter, we can move faster on implementing the ListView we want.

Installation

flutter pub add flat_list

Usage

You'll easily understand by looking at below code.

FlatList(
  onEndReached: () async {
    loading.value = true;
    await Future.delayed(const Duration(seconds: 2));
    if (context.mounted) {
      items.value += getMoreData();
      loading.value = false;
    }
  },
  onRefresh: () async {
    await Future.delayed(const Duration(seconds: 2));

    if (context.mounted) {
      items.value = data;
    }
  },
  loading: loading.value,
  listHeaderWidget: const Header(),
  listFooterWidget: const Footer(),
  listEmptyWidget: Container(
    alignment: Alignment.center,
    padding: const EdgeInsets.all(12),
    child: const Text('List is empty!'),
  ),
  data: items.value,
  buildItem: (item, index) {
    var person = items.value[index];

    return ListItemView(person: person);
  },
)

More about the differences in props compared to React Native's FlatList are listed below.

Flutter React Native Required
data data
buildItem renderItem
listHeaderWidget ListHeaderComponent
listFooterWidget ListFooterComponent
listEmptyWidget ListEmptyComponent
onRefresh onRefresh
onEndReached onEndReached
`` refreshing
loading loading
numColumns numColumns
onEndReachedDelta onEndReachedThreshold
controller ``
inverted inverted

Basic setup

The complete example is available here.

FlatList requires you to provide data and buildItem:

FlatList(
  data: items.value,
  buildItem: (item, index) {
    var person = items.value[index];

    return ListItemView(person: person);
  },
)

Adding additional views

You can provide header and footer in [FlatList]. When providing listEmptyWidget, it will be rendered when the list of data is empty.

listHeaderWidget: const Header(), // Provider any header
listFooterWidget: const Footer(), // Provider any footer
listEmptyWidget: Container(
  alignment: Alignment.center,
  padding: const EdgeInsets.all(12),
  child: const Text('List is empty!'),
),

Refresh indicator

Providing onRefresh will add [RefreshIndicator]. Therefore you can refresh the data.

onRefresh: () async {
  await Future.delayed(const Duration(seconds: 2));

  if (context.mounted) {
    items.value = data;
  }
},

Infinite scroll

Infinite scrolling is possible using onEndReached. You should also provide loading to use this feature correctly.

loading: loading.value,
onEndReached: () async {
  loading.value = true;
  await Future.delayed(const Duration(seconds: 2));
  if (context.mounted) {
    items.value += getMoreData();
    loading.value = false;
  }
},

GridView

Just by giving numColumns value greater than 1, it will render [GridView].

numColums: 3, // Value greater than 1
),

One column

One column Multiple Columns

Demo

Examples are provided in /example folder.

TODO

  • Support optional horizontal mode

  • Separator support in ListView

  • Expose scroll controller: Ability to control similar functionalities listed below.

    - [scrollToEnd](https://reactnative.dev/docs/flatlist#scrolltoend)
    - [scrollToIndex](https://reactnative.dev/docs/flatlist#scrolltoindex)
    - [scrollToItem](https://reactnative.dev/docs/flatlist#scrolltoitem)
    - [scrollToOffset](https://reactnative.dev/docs/flatlist#scrolltooffset)
    
  • Support inverted

  • Enhance onEndReachedDelta with similar to onEndReachedThreshold

  • Test coverage

Additional information

Read our blog

You might also like...

Fluent System Icons are a collection of familiar, friendly and modern icons from Microsoft.

Fluent System Icons are a collection of familiar, friendly and modern icons from Microsoft.

Fluent UI System Icons Fluent UI System Icons are a collection of familiar, friendly and modern icons from Microsoft. Icon List View the full list of

Dec 29, 2022

Win32 registry - A package that provides a friendly Dart API for accessing the Windows registry

A package that provides a friendly Dart API for accessing the Windows registry.

Dec 23, 2022

A user-friendly money management app which allows you to keep track of transactions seamlessly

A user-friendly money management app which allows you to keep track of transactions seamlessly

See the first version of 'Mvelopes' - Money Management Application which I completed as my first project and published on Play Store. 'Mvelopes' is a user-friendly money management app which allows you to keep track of transactions seamlessly. - Features - Technology • Reminder • Flutter • Notification • Hive • Manage income & expenses

Dec 8, 2022

A simple, open and privacy friendly plant watering reminder for Android

A simple, open and privacy friendly plant watering reminder for Android

Water Me 🪴 A simple, open and privacy friendly plant watering reminder for Android. Water me is a mobile application written in Flutter to remind you

Dec 29, 2022

A super powerful widget to help developers build complex views quickly and comfortably.

A super powerful widget to help developers build complex views quickly and comfortably.

FSuper FSuper can help developers build complex views quickly and comfortably. It supports rich text, rounded corners, borders, pictures, small red do

Dec 29, 2022

A super powerful widget to help developers build complex views quickly and comfortably.

A super powerful widget to help developers build complex views quickly and comfortably.

FSuper FSuper can help developers build complex views quickly and comfortably. It supports rich text, rounded corners, borders, pictures, small red do

Dec 29, 2022

The aim of this project is to assist flutter developers, especially juniors to create reusable widget faster in flutter.

FLUTTER WIDGET BUILDER A widget builder for flutter Explore the docs » View Demo · Report Bug · Request Feature Table of Contents About The Project Bu

Oct 27, 2022

Widget to count the amount of nested widget tree, useful in the dynamic construction of the interface when it is important to know the depth of widget.

Widget to count the amount of nested widget tree, useful in the dynamic construction of the interface when it is important to know the depth of widget.

widget_tree_depth_counter Widget Tree Depth Counter WidgetTreeDepthCounter is a simple widget to count the amount of nested widget tree, useful in the

Aug 1, 2022
Comments
  • feat: support `inverted` list and grid view

    feat: support `inverted` list and grid view

    Description

    Support inverted feature included in react-native flatlist.

    This is useful when we implement lists like chatting, which loads more data by scrolling up.

    Demo

    Simulator Screen Recording - iPhone 14 - 2022-11-20 at 12 57 12

    Demo for inverted list with [ListView] and [GridView]. It also works withhorizontal.

    🗡️ feature 
    opened by hyochan 0
  • feat: horizontal listview

    feat: horizontal listview

    Description

    Support horizontal, the optional horizontal mode. The default is vertical.

    Demo

    https://user-images.githubusercontent.com/27461460/201479789-7c1ea90a-b5ae-441b-9a0a-63d27cf00776.mp4

    🗡️ feature 
    opened by hyochan 0
Releases(0.1.11)
  • 0.1.11(Nov 20, 2022)

  • 0.1.10(Nov 20, 2022)

    What's Changed

    • feat: support inverted list and grid view by @hyochan in https://github.com/hyochan/flat_list/pull/4
    • feat: expose [ScrollController] as controller #fcd9cea

    Full Changelog: https://github.com/hyochan/flat_list/compare/0.1.2...0.1.10

    Source code(tar.gz)
    Source code(zip)
  • 0.1.2(Nov 12, 2022)

    What's Changed

    • feat: horizontal listview by @hyochan in https://github.com/hyochan/flat_list/pull/3

    New Contributors

    • @hyochan made their first contribution in https://github.com/hyochan/flat_list/pull/3

    Full Changelog: https://github.com/hyochan/flat_list/commits/0.1.2

    Source code(tar.gz)
    Source code(zip)
Owner
Hyo
I am always beginner
Hyo
This perfect starter kit is an app based on React Native and UI Kitten library with Light and Dark themes support.

Kitten Tricks This perfect starter kit is an app based on React Native and UI Kitten library with Light and Dark themes support. It’s completely free

Akveo 7k Dec 30, 2022
DEVS: Developer Board and Jobs Listing | For Developers, By Developers

devs Setup Currently, this DEVS project is using the master channel of the Flutter SDK. TODO: Migrate to beta Clone the project git clone https://gith

Flutter Philippines Community 40 Apr 16, 2022
dna, dart native access. A lightweight dart to native super channel plugin

dna, dart native access. A lightweight dart to native super channel plugin, You can use it to invoke any native code directly in contextual and chained dart code.

Assuner 14 Jul 11, 2022
how to Integrating facebook audience network to flutter app for banner, interstitial, rewarded, native and native banner

fb_ads_flutter_12 A new Flutter project. Getting Started Watch the complite tutorial for integrating Facebook ads into the Flutter app in our Youtube

null 4 Nov 26, 2022
Flutter native ads - Show AdMob Native Ads use PlatformView

flutter_native_ads Flutter plugin for AdMob Native Ads. Compatible with Android and iOS using PlatformView. Android iOS Getting Started Android Androi

sakebook 64 Dec 20, 2022
Flutter React Golang WebRTC等技术学习笔记

study-notes Flutter React Golang WebRTC等技术学习笔记 学习资源 除了一些文章外,亢老师还精心录制了一些视频教程供大家学习. 国内用户请查看核心系列课程(国内). 海外华人用户请查看核心系列课程(海外), 支持paypal支付.可放心购买 核心系列课程(国内)

亢少军 15 Nov 11, 2022
Trying out Flutter for desktop Web app development as an alternative to SPA frameworks (such as React and Angular) by recreating one of the pages of an existing CV Management web app

HTML Renderer Demo CanvasKit Renderer Demo Reddit discussion This repo contains a PoC of using Flutter as a traditional SPA framework for creating a d

Maxim Saplin 20 Oct 11, 2022
A GraphQL client for Flutter, bringing all the features from a modern GraphQL client to one easy to use package. Built after react apollo

Flutter GraphQL Table of Contents Flutter GraphQL Table of Contents About this project Installation Usage GraphQL Provider [Graphql Link and Headers]

Snowball Digital 45 Nov 9, 2022
A user-friendly API for KDE's KRunner application.

A user-friendly API for KDE's KRunner application. Features Create KRunner plugins ("runners") Type safe Null safe Named parameters Documentation expl

Kristen McWilliam 6 Dec 25, 2021
A privacy-friendly Twitter frontend for mobile devices

Fritter A privacy-friendly Twitter frontend for mobile devices. Features Device-local subscriptions and groups, Newpipe-style, including a feed view D

Jonjo McKay 1k Jan 3, 2023