A flutter widget like iOS UITableview

flutter_tableview

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,
      ),
    );
  }
}

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