Flutter tableview - A flutter widget like iOS UITableview. let listView with section header and each section header will hover at the top.

Overview

中文

flutter_tableview

pub package

A flutter widget like iOS UITableview. let listView with section header and each section header will hover at the top.

Installing:

Add the following to your pubspec.yaml file:

dependencies:
  flutter_tableview: ^1.0.1

How to use

class SimpleDemoPageBody extends StatefulWidget {
  @override
  _SimpleDemoPageBodyState createState() => _SimpleDemoPageBodyState();
}

class _SimpleDemoPageBodyState extends State<SimpleDemoPageBody> {
  // How many section.
  int sectionCount = 3;

  // Get row count.
  int _rowCountAtSection(int section) {
    if (section == 0) {
      return 5;
    } else if (section == 1) {
      return 10;
    } else {
      return 20;
    }
  }

  // Section header widget builder.
  Widget _sectionHeaderBuilder(BuildContext context, int section) {
    return InkWell(
      onTap: () {
        print('click section header. -> section:$section');
      },
      child: Container(
        alignment: Alignment.centerLeft,
        padding: EdgeInsets.only(left: 16.0),
        color: Color.fromRGBO(220, 220, 220, 1),
        height: 100,
        child: Text('I am section header -> section:$section'),
      ),
    );
  }

  // cell item widget builder.
  Widget _cellBuilder(BuildContext context, int section, int row) {
    return InkWell(
      onTap: () {
        print('click cell item. -> section:$section row:$row');
      },
      child: Container(
        padding: EdgeInsets.only(left: 16.0),
        alignment: Alignment.centerLeft,
        decoration: BoxDecoration(
            border: Border(
                bottom: BorderSide(
          color: Color.fromRGBO(240, 240, 240, 1),
        ))),
        height: 50.0,
        child: Text('I am cell -> section:$section  row$row'),
      ),
    );
  }

  // Each section header height;
  double _sectionHeaderHeight(BuildContext context, int section) {
    return 50.0;
  }

  // Each cell item widget height.
  double _cellHeight(BuildContext context, int section, int row) {
    return 50.0;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      //FlutterTableView
      child: FlutterTableView(
        sectionCount: sectionCount,
        rowCountAtSection: _rowCountAtSection,
        sectionHeaderBuilder: _sectionHeaderBuilder,
        cellBuilder: _cellBuilder,
        sectionHeaderHeight: _sectionHeaderHeight,
        cellHeight: _cellHeight,
      ),
    );
  }
}

demo_picture

gif:
simple_demo.gif

If you want to wrap listView with other widget (such as flutter_easyrefresh)
FlutterTableView(
        sectionCount: this.dataSourceList.length,
        rowCountAtSection: _rowCountAtSection,
        sectionHeaderBuilder: _sectionHeaderBuilder,
        cellBuilder: _cellBuilder,
        sectionHeaderHeight: _sectionHeaderHeight,
        cellHeight: _cellHeight,
        listViewFatherWidgetBuilder: (BuildContext context, Widget listView) {
          return EasyRefresh(
            key: _easyRefreshKey,
            limitScroll: true,
            refreshHeader: MaterialHeader(key: _headerKey),
            refreshFooter: MaterialFooter(key: _footerKey),
            onRefresh: () async {},
            loadMore: () async {},
            child: listView,
          );
        },
      ),
      
// detail usage please download demo

gif:
wrap_refresh_demo.gif

License

MIT License

Copyright (c) 2019 chenfanfang

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

You might also like...

Flutter Scrollable Widgets like ListView,GridView or powerful CustomScrollView can't nest inner scrollview

Introduction Flutter Scrollable Widgets like ListView,GridView or powerful CustomScrollView can't nest inner scrollview. If Nested, inner scrollview w

Aug 28, 2022

A wrapper on top of MFMailComposeViewController from iOS and Mail Intent on android

flutter_mailer Share email content via device Email Client - supports multiple Attachments Simple & quick plugin for cross application data sharing of

May 22, 2022

Let's setup Firebase​​ for our Flutter​​ app on Android​, iOS​ and Flutter Web. Setup Firebase to use Firebase products.

Let's setup Firebase​​ for our Flutter​​ app on Android​, iOS​ and Flutter Web.  Setup Firebase to use Firebase products.

Flutter Tutorial - Firebase Setup For Flutter Web Let's setup Firebase for our Flutter app on Android, iOS and Flutter Web. Setup Firebase to use Fire

Apr 27, 2022

This project has the vision to assist the officials for Forest trees census and tagging each tree with proper location (latitude and longitude), tree type, and other arguments. and further had the plan to apply data analysis over-collected data.

🌳 Trees 🌳 🔖 Tagger 🔖 App & Analysis Software The vision of this project is to assist forest officials for tree census by tagging each tree with pr

Sep 29, 2022

🧾 Flutter widget allowing easy cache-based data display in a ListView featuring pull-to-refresh and error banners.

Often, apps just display data fetched from some server. This package introduces the concept of fetchable streams. They are just like normal Streams, b

Jan 18, 2022

A Recipe App created by following the first section of the book, Flutter Apprentice 2nd Edition.

recipes A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Dec 17, 2021

A section list view for flutter

A section list view for flutter

Section view Features Show with select view Alphabet support Refresh support Scr

Nov 6, 2022
Comments
  • Inkwell should be wrapped in Material()

    Inkwell should be wrapped in Material()

    In the flutter_tableview 1.0.1 docs in the How to use section:

    The _sectionHeaderBuilder and the _cellBuilder both use Inkwell which needs to be wrapped in Material for it to work properly. Something like:

    // Section header widget builder.
      Widget _sectionHeaderBuilder(BuildContext context, int section) {
        return Material(
          child: InkWell(
            onTap: () {
              print('click section header. -> section:$section');
            },
          child: Container(
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.only(left: 16.0),
            color: Color.fromRGBO(220, 220, 220, 1),
            height: 100,
            child: Text('I am section header -> section:$section'),
          ),
        ));
      }
    
    opened by CarolineLaw 0
  • ListView needs padding

    ListView needs padding

    Hi! I really appreciate your work, however I found a bug when the first section header "jumps" up when you start scrolling. This is a result of having standard padding in your ListView. So you need to add: padding: this.widget.padding in ListView configuration in order to get rid of this behavior.

    opened by Filofei 0
A iOS like table view including section, row, section header and divider

flutter_section_table_view A iOS like table view including section, row, section header and divider Support both Android and iOS Support drop-down ref

刘彦博 73 Nov 4, 2022
A Flutter widget to create an iOS settings-table (static TableView).

flutter_cupertino_settings A Flutter widget to create an iOS settings-table (static TableView). import 'package:flutter_cupertino_settings/flutter_cup

Matthias Rupp 234 Dec 28, 2022
Travel Folding Card with hover animation

travelfoldingcard Travel Folding Card with hover animation The live version is in my Flutter CodePen The original CodePen is from Madalena, which is c

Mahtab Tadayon 4 Jun 9, 2022
A ListView widget capable of pinning a child to the top of the list.

PinnableListView A Flutter ListView widget that allows pinning a ListView child to the top of the list. Demo Getting Started Define the list PinCont

Jan Hrastnik 2 May 17, 2020
This project is a NGO which let you donate anything or even let you ask for help to people.

ngo_app This app is written in flutter using dart language. Getting Started This project is a NGO which let you donate anything or even let you ask fo

null 1 May 8, 2022
Flutter Tutorial - Scroll To Top In ListView

Flutter Tutorial - Scroll To Top In ListView Let's use Flutter to scroll to the top of a ListView and to detect the current ListView Scroll Position.

null 0 Apr 20, 2022
Flutter Bidirectional ListView - ListView with items that can be scrolled in both directions with a fixed item count and scroll boundaries.

Flutter Bidirectional ListView ListView with items that can be scrolled and lazy loaded in up and down direction with a fixed item count and scroll bo

Christoph Rothermel 7 May 30, 2022
Stories like in Instagram, each story can include multiple images and videos. Package supports video, titles, preliminary caching.

flutter_instagram_stories A Flutter package for displaying stories just like Whatsapp & Instagram. Built-in groups (multiple stories with one icon), c

Alex Awaik 125 Dec 9, 2022
AuthorizationHeader is an open-sourced Dart library. With AuthorizationHeader, you can easily manage authorization header on your application.

A most easily usable authorization header management library in Dart! 1. About 1.1. Supported 1.1.1. Authorization Header 1.1.2. Authorization Type 1.

Kato Shinya 3 Dec 24, 2021
Greentick assignment - State management tool provider and UI components like ListView etc

greentick_assignment This project is a part of assignment, which demonstrate the

Vinod Patil 0 Feb 11, 2022