A iOS like table view including section, row, section header and divider

Overview

flutter_section_table_view

  • A iOS like table view including section, row, section header and divider
  • Support both Android and iOS
  • Support drop-down refresh and pull-up load (based on pull_to_refresh)
  • you can animate/jump to specific index path
  • you can know which index path it scrolled to, when scrolling

Usage

minimal

class MinList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Min List'),
      ),
      body: SafeArea(
        child: SectionTableView(
          sectionCount: 7,
          numOfRowInSection: (section) {
            return section == 0 ? 3 : 4;
          },
          cellAtIndexPath: (section, row) {
            return Container(
              height: 44.0,
              child: Center(
                child: Text('Cell $section $row'),
              ),
            );
          },
          headerInSection: (section) {
            return Container(
              height: 25.0,
              color: Colors.grey,
              child: Text('Header $section'),
            );
          },
          divider: Container(
            color: Colors.green,
            height: 1.0,
          ),
        ),
      ),
    );
  }
}

Section List which can scroll to specific index path

class SectionList extends StatelessWidget {
  final controller = SectionTableController(sectionTableViewScrollTo: (section, row, isScrollDown) {
    print('received scroll to $section $row scrollDown:$isScrollDown');
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Section List'),
      ),
      floatingActionButton: FloatingActionButton(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[Text('Scroll'), Icon(Icons.keyboard_arrow_down)],
          ),
          onPressed: () {
            controller.animateTo(2, -1).then((complete) {
              print('animated $complete');
            });
          }),
      body: SafeArea(
        child: SectionTableView(
          sectionCount: 7,
          numOfRowInSection: (section) {
            return section == 0 ? 3 : 4;
          },
          cellAtIndexPath: (section, row) {
            return Container(
              height: 44.0,
              child: Center(
                child: Text('Cell $section $row'),
              ),
            );
          },
          headerInSection: (section) {
            return Container(
              height: 25.0,
              color: Colors.grey,
              child: Text('Header $section'),
            );
          },
          divider: Container(
            color: Colors.green,
            height: 1.0,
          ),
          controller: controller, //SectionTableController
          sectionHeaderHeight: (section) => 25.0,
          dividerHeight: () => 1.0,
          cellHeightAtIndexPath: (section, row) => 44.0,
        ),
      ),
    );
  }
}

Full function list which can pull up/down refresh

class FullList extends StatefulWidget {
  @override
  _FullListState createState() => _FullListState();
}

class _FullListState extends State<FullList> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  int sectionCount = 9;
  final controller = SectionTableController(sectionTableViewScrollTo: (section, row, isScrollDown) {
    print('received scroll to $section $row scrollDown:$isScrollDown');
  });
  final refreshController = RefreshController();

  Indicator refreshHeaderBuilder(BuildContext context, int mode) {
    return ClassicIndicator(
      mode: mode,
      releaseText: '释放以刷新',
      refreshingText: '刷新中...',
      completeText: '完成',
      failedText: '失败',
      idleText: '下拉以刷新',
      noDataText: '',
    );
  }

  Indicator refreshFooterBuilder(BuildContext context, int mode) {
    return ClassicIndicator(
      mode: mode,
      releaseText: '释放以加载',
      refreshingText: '加载中...',
      completeText: '加载完成',
      failedText: '加载失败',
      idleText: '上拉以加载',
      noDataText: '',
      idleIcon: const Icon(Icons.arrow_upward, color: Colors.grey),
      releaseIcon: const Icon(Icons.arrow_downward, color: Colors.grey),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Full List'),
      ),
      floatingActionButton: FloatingActionButton(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[Text('Scroll'), Icon(Icons.keyboard_arrow_down)],
          ),
          onPressed: () {
            controller.animateTo(2, -1).then((complete) {
              print('animated $complete');
            });
          }),
      body: SafeArea(
        child: SectionTableView(
          refreshHeaderBuilder: refreshHeaderBuilder,
          refreshFooterBuilder: refreshFooterBuilder,
          enablePullDown: true,
          enablePullUp: true,
          onRefresh: (up) {
            print('on refresh $up');

            Future.delayed(const Duration(milliseconds: 2009)).then((val) {
              refreshController.sendBack(up, RefreshStatus.completed);
              setState(() {
                if (up) {
                  sectionCount = 5;
                } else {
                  sectionCount++;
                }
              });
            });
          },
          refreshController: refreshController,
          sectionCount: sectionCount,
          numOfRowInSection: (section) {
            return section == 0 ? 3 : 4;
          },
          cellAtIndexPath: (section, row) {
            return Container(
              height: 44.0,
              child: Center(
                child: Text('Cell $section $row'),
              ),
            );
          },
          headerInSection: (section) {
            return Container(
              height: 25.0,
              color: Colors.grey,
              child: Text('Header $section'),
            );
          },
          divider: Container(
            color: Colors.green,
            height: 1.0,
          ),
          controller: controller, //SectionTableController
          sectionHeaderHeight: (section) => 25.0,
          dividerHeight: () => 1.0,
          cellHeightAtIndexPath: (section, row) => 44.0,
        ),
      ),
    );
  }
}

iOS android

Getting Started

For help getting started with Flutter, view our online documentation.

For help on editing package code, view the documentation.

You might also like...

Flutter list view - An unofficial list view for flutter

Flutter list view - An unofficial list view for flutter

Flutter List View I don't like official list view. There are some features don't

Dec 15, 2022

Grid-View-App - Grid View App For Flutter

Grid-View-App - Grid View App For Flutter

grid_view_app practice purpose flutter application Getting Started This project

Jun 9, 2022

Swipeable button view - Create Ripple Animated Pages With Swipeable Button View

Swipeable button view - Create Ripple Animated Pages With Swipeable Button View

swipeable_button_view You can create ripple animated pages with swipeable_button

Apr 22, 2022

-UNDER DEVELOPMENT- a project built demonstrating model view view model architecture

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

Nov 28, 2022

CRUD Table Flutter consists of a Lazy loading function, resizable columns, and integrated CRUD Form.

CRUD Table Flutter consists of a Lazy loading function, resizable columns, and integrated CRUD Form.

CRUD Table Flutter CRUD Table Flutter is a package for crating CURD-UI for your entity/object/class easily. It consists of a Lazy loading function, re

Dec 31, 2022

Flutter table with dio and provider - A flutter Application created for Portfolio Page

Flutter table with dio and provider - A flutter Application created for Portfolio Page

My LinkedIn https://www.linkedin.com/in/marcelo-augusto-a60b6821a/ Intro This is

Jan 18, 2022

Layout of the flutter example.such as Row,Comlun,listview,Just for learning.

Layout of the flutter example.such as Row,Comlun,listview,Just for learning.

Just for learning ❤️ Star ❤️ the repo to support the project or 😄 Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flut

Nov 29, 2022

Four-In-A-Row in Flutter

Four-In-A-Row in Flutter

Flutter FIAR Four-in-a-row game in Flutter Game modes Player vs Player (only local) Player vs Cpu Dumb Hard Hardest Demo (Cpu Hard vs Cpu Hardest) Get

Sep 12, 2022
Comments
  • Question: Many cell in same Row it's possible?

    Question: Many cell in same Row it's possible?

    Congratulations on your package. I needed a package with this one to rewrite a native app.

    In one of my app I need to have several Widgets per line in each session, like the IOS UICollection.

    See the image below. I can do this with your package. Do you have any suggestions?

    image

    opened by RodrigoSMarques 5
  • Null safety support

    Null safety support

    The library is migrated to null safety. Unfortunately, I don't have time to test everything and only tested my particular use case. Hopefully, this will come in handy.

    opened by numen31337 1
  • Getting the index of the first visible section

    Getting the index of the first visible section

    I don't know if I can relate to this as an issue, but I really need to have this feature as I tried many solutions, I have a list and need to scroll to a specific section when I navigate to the list page, I got this done using this package which was so easy and amazing, but now I need to change the app bar title as I scroll down or up to match the first visible section title in my list! I tried to wrap my section table view inside a NotificationListener, and measured the offsets of scrolling manually, which is not only great cause my list items aren't same height... but I get a value, when I write setState() to update the appbarIndex value so it renders the title in my appbar it breaks! I can't scroll anymore until I remove setState(), do you have any solution for this?

    thanks in advance!

    opened by pr-Mais 0
  • 配置了ScrollController之后滚动触发报错

    配置了ScrollController之后滚动触发报错

    原因是preIndexOffset的默认值是null,不能用于在package:flutter_section_table_view/flutter_section_table_view.dart:294:27 这个地方进行比较。

    下面是日志 `flutter: The following NoSuchMethodError was thrown while dispatching notifications for ScrollController: flutter: The method '>' was called on null. flutter: Receiver: null flutter: Tried calling: >(271.3333435058594) flutter: flutter: When the exception was thrown, this was the stack: flutter: #0 Object.noSuchMethod (dart:core-patch/object_patch.dart:50:5) flutter: #1 double.< (dart:core-patch/double.dart:82:18) flutter: #2 _SectionTableViewState.calculateIndexPathAndOffset. (package:flutter_section_table_view/flutter_section_table_view.dart:294:27) flutter: #3 ChangeNotifier.notifyListeners (package:flutter/src/foundation/change_notifier.dart:206:21) flutter: #4 ChangeNotifier.notifyListeners (package:flutter/src/foundation/change_notifier.dart:206:21) flutter: #5 ScrollPosition.notifyListeners (package:flutter/src/widgets/scroll_position.dart:701:11) flutter: #6 ScrollPosition.setPixels (package:flutter/src/widgets/scroll_position.dart:218:9) flutter: #7 ScrollPositionWithSingleContext.setPixels (package:flutter/src/widgets/scroll_position_with_single_context.dart:83:18) flutter: #8 ScrollPositionWithSingleContext.applyUserOffset (package:flutter/src/widgets/scroll_position_with_single_context.dart:126:5) flutter: #9 ScrollDragController.update (package:flutter/src/widgets/scroll_activity.dart:372:14) flutter: #10 ScrollableState._handleDragUpdate (package:flutter/src/widgets/scrollable.dart:498:12) flutter: #11 DragGestureRecognizer._checkUpdate. (package:flutter/src/gestures/monodrag.dart:383:46) flutter: #12 GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:182:24) flutter: #13 DragGestureRecognizer._checkUpdate (package:flutter/src/gestures/monodrag.dart:383:7) flutter: #14 DragGestureRecognizer.handleEvent (package:flutter/src/gestures/monodrag.dart:253:9) flutter: #15 PointerRouter._dispatch (package:flutter/src/gestures/pointer_router.dart:75:13) flutter: #16 PointerRouter.route (package:flutter/src/gestures/pointer_router.dart:102:11) flutter: #17 _WidgetsFlutterBinding&BindingBase&GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:218:19) flutter: #18 _WidgetsFlutterBinding&BindingBase&GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:198:22) flutter: #19 _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.dart:156:7) flutter: #20 _WidgetsFlutterBinding&BindingBase&GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:102:7) flutter: #21 _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:86:7) flutter: #25 _invoke1 (dart:ui/hooks.dart:250:10) flutter: #26 _dispatchPointerDataPacket (dart:ui/hooks.dart:159:5) flutter: (elided 3 frames from package dart:async) flutter: flutter: The ScrollController sending notification was: flutter: ScrollController#a8730(one client, offset 271.3) flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════ flutter: Another exception was thrown: NoSuchMethodError: The method '>' was called on null.

    flutter: Another exception was thrown: NoSuchMethodError: The method '>' was called on null.

    flutter: Another exception was thrown: NoSuchMethodError: The method '>' was called on null.

    flutter: Another exception was thrown: NoSuchMethodError: The method '>' was called on null. `

    opened by yiios 0
Owner
刘彦博
iOS Developer / Google Developer Expert in Flutter
刘彦博
This library allows you to create editable tables and spreadsheets with ease, either by providing initial row and column count to display an empty table or use it with predefined rows and column data sets.

Editable ⚡️ A highly customizable, editable table package for Flutter projects. Specs This package allows you to create editable tables and spreadshee

Godwin Asuquo 94 Dec 7, 2022
Flutter package: Json Table Widget to create table from json array

Json Table Widget ?? Proudly Sponsored by FieldAssist Request a Demo This Flutter package provides a Json Table Widget for directly showing table from

Ayush P Gupta 193 Jan 7, 2023
Flutter-sorted-chips-row - Flutter library for rendering a row of Material "Chip" buttons that gets sorted according to the given function

sorted_chips_row A Flutter Widget displaying a row of Material Chips, sorted according to the provided comparison function. How to use Adding dependen

Callstack Incubator 29 Jul 29, 2021
A ListView that allows you to group list items and support headers like iOS UITableView section.

GroupListView package for Flutter. A ListView that allows you to group list items and support headers like iOS UITableView section. Features List Item

Daniel Ioannou 73 Nov 21, 2022
This library provides a customizable Flutter widget that makes it easy to display text in the middle of a Divider.

1. About 1.1. Introduction 1.1.1. Install Library 1.1.2. Import It 1.1.3. Use TextDivider 1.2. Details 1.2.1. Customization Options 1.2.2. Horizontal

Kato Shinya 2 Feb 9, 2022
A periodic table app with 3D view of the elements built using flutter.

A flutter app which takes you on a 3d visualisation of the 118 elements of the periodic table. promo.mp4 Tech Stack Deployed using How it all began It

Shanwill Pinto 48 Nov 16, 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
A section list view for flutter

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

null 6 Nov 6, 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
A flutter plugin for improved row and column widgets with added spacing and optional interleaved dividers

flutter_series A flutter plugin for improved row and column widgets with added s

null 0 Nov 1, 2021