首页 > 解决方案 > Flutter ReorderableListView - how to add divider

问题描述

I have a list created using ReorderableListView. I want to have a separate each list item with a Divider. I am looking for a clean solution, similar to ListView.separated(), however I can't find anything similar for ReorderableListView. In my code at the moment I am using a column widget to which I add a divider for every item but this is very "hacky". Do you know how this could be implemented in a better way?

I'm looking for divider like here:

enter image description here

My Code:

Main Page:

Widget _buildList(RoutinesState state) {
if (state is RoutinesFetched || state is RoutinesReordered) {
  List<CustomCard> cards = [];
  state.routines.forEach(
    (e) {
      cards.add(
        CustomCard(
          key: PageStorageKey(UniqueKey()),
          title: e.name,
          onTap: () {
            Navigator.pushNamed(
              context,
              RoutineDetails.PAGE_ROUTE,
              arguments: RoutineDetailsArgs(e),
            );
          },
          includeDivider: cards.isNotEmpty,
        ),
      );
    },
  );

  return ReorderableListView(
    children: cards,
    onReorder: (int from, int to) => {
      bloc.add(ReorderRoutine(fromIndex: from, toIndex: to)),
    },
  );
}

return Container(
  child: Text("No routines found yet :( "),
);

}

Custom Card Widget:

      @override
   Widget build(BuildContext context) {
     List<Widget> columnItems = [];
     if (this.includeDivider) {
        columnItems.add(Divider());
     }

    columnItems.add(ListTile(
      leading: CircleAvatar(
        child: Icon(Icons.fitness_center),
      ),
      title: Text(this.title),
      subtitle: Text("Weights"),
      trailing: ActionChip(
        label: Icon(Icons.play_arrow),
        backgroundColor: Color(0xffECECEC),
        onPressed: () => null,
      ),
      onTap: this.onTap,
    ));

    return Column(
      mainAxisSize: MainAxisSize.min,
      children: columnItems,
    );
  }

标签: flutterdart

解决方案


推荐阅读