ListViews inside ListView Flutter

Question

Trying to replicate google MyTasks apps, but can't come up with the solution for task list.

Basically trying to do this layout: ListsView

If I understand correctly, this is two listViews: one of pending tasks, other completed tasks. Completed tasks are inside ExpansionTile. Pending tasks are separated by date.

Currently, I have this listView builder:

Displaying main list of items:

  Widget build(BuildContext context) {
    final dao = Provider.of<TodoDao>(context);

    return ListView(
      shrinkWrap: true,
      children: <Widget>[
        _buildTaskList(context),
        ExpansionTile(
          title: Text('Completed tasks'),
          children: <Widget>[_buildCompletedTodoList(context)],
        )
      ],
    );
  }

Building pending list

  StreamBuilder<List<Task>> _buildTaskList(BuildContext context) {
    final dao = Provider.of<TodoDao>(context);

    return StreamBuilder(
      stream: dao.watchAllTasks(),
      builder: (context, AsyncSnapshot<List<Task>> snapshot) {
        final tasks = snapshot.data ?? List();

        return ListView.builder(
          itemCount: tasks.length,
          itemBuilder: (_, index) {
            final itemTask = tasks[index];

            return _buildListItem(itemTask, dao);
          },
        );
      },
    );
  }


  Widget _buildListItem(Task itemTask, TodoDao dao) {
    return Dismissible(
      direction: DismissDirection.horizontal,
      key: Key(itemTask.id.toString()),
      onDismissed: (direction) {
        dao.deleteTask(itemTask);
      },
      background: Container(
        color: Colors.blue,
        child: Align(
          alignment: Alignment.centerLeft,
          child: Padding(
            padding: const EdgeInsets.only(left: 16.0),
            child: Icon(
              Icons.check,
              color: Colors.white,
              size: 32.0,
            ),
          ),
        ),
      ),
      secondaryBackground: Container(
        color: Colors.red,
        child: Align(
          alignment: Alignment.centerRight,
          child: Icon(
            Icons.delete,
            color: Colors.white,
            size: 32.0,
          ),
        ),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          _buildCheckboxListTile(itemTask, dao),
          Divider(
            height: 8.0,
            color: Color.fromRGBO(150, 150, 150, 0.8),
          ),
        ],
      ),
    );

  }

And almost identical code for completed list, just different stream, and listItem UI.

With this code I get both pending listView and ExpansionTile in one List, but they are like in separate blocks

Also if I add a lot of items in pending list, I can't scroll down, because I use srinkWrap, withouth that, I get bunch of errors.

So yeah, I don't know if this is formulated correctly and if anybody understood what I am talking about, but I just need ideas how I should create task list similar to what MyTasks app has.

Answer 1

What you need is a single ListView with ExpansionTile widgets. Basically, it's a bad idea to have multiple scroll on mobile. (check Android / iOS guidelines)