CODEWITHSUNDEEP
flutterdart
Rostyk
Rostyk

Reputation: 1159

How to use Stack and listview together flutter

I have a ListView.builder inside of FutureBuilder where I get and display DB data to a screen.
Data are displayed one by one, but I'm wondering how to use the Stack widget in order to display them on each other.

https://github.com/geekruchika/FlutterCardSwipe that's how elements have to be positioned(scroll down)
SOLVED:

@override
  Widget build(BuildContext context) {
    var device = MediaQuery.of(context).size;

    return FutureBuilder<List<Task>>(
      future: DBHelper().getTasks(),
      builder: (BuildContext context, AsyncSnapshot<List<Task>> snapshot) {
        if (snapshot.hasData) {
          var data = snapshot.data;
          return snapshot.data.length > 0
              ? Stack(
                  children: data.map((task) {
                    return Positioned(
                      child: Dismissible(
                        key: UniqueKey(),
                        crossAxisEndOffset: -0.1,
                        onDismissed: (direction) {
                          DBHelper().delete(task.id);

                        },
                        child: Container(
                          height: device.height * 585 / 812,
                          child: AddTask(null, task.name,
                              'Meeting with directory', null, []),
                        ),
                      ),
                    );
                  }).toList(),
                )
              : Container(
                  height: device.height * 585 / 812,
                  child: NoTasksFound(),
                );
        } else {
          return Center(child: CircularProgressIndicator());
        }
      },
    );
  }

Upvotes: 1

Views: 96

Answers (1)

Hemanth Raj
Hemanth Raj

Reputation: 34769

What you tried is correct except for you had to convert Iterable to a List.

Like:

Widget build(BuildContext context) {
  var device = MediaQuery.of(context).size;

  return FutureBuilder<List<Task>>(
    future: DBHelper().getTasks(),
    builder: (BuildContext context, AsyncSnapshot<List<Task>> snapshot) {
      if (snapshot.hasData) {
        var data = snapshot.data;
        return Stack(
          children: snapshot.data.map((task) { // map the data
            return Positioned(
              child: Dismissible(
                key: UniqueKey(),
                crossAxisEndOffset: -0.2,
                background: Container(color: Colors.red),
                onDismissed: (direction) {
                  // DBHelper().delete(task.id);
                },
                child: Container(
                  // margin: EdgeInsets.only(bottom: 100, top: 100),
                  height: device.height * 585 / 812,
                  child: AddTask(null, 'Description',
                      'Meeting with directory', null, []),
                ),
              ),
            );
          }).toList(), // convert the mapped iterable to list
        );
      } else {
        return Center(child: CircularProgressIndicator());
      }
    },
  );
}

Hope that helps!

Upvotes: 1

Related Questions