Flutter custom bottom sheet

Question

I have a ListView where I want to implement a nice way to delete list items using a bottom sheet with actions on. Initially I went down the path of simply calling showBottomSheet() in the onLongPress event handler for my list items, which would successfully open a bottom sheet with my action buttons on. However, this would automatically add a back button to the AppBar which is not what I want.

I then went down the route of trying out animations, such as SlideTransition and AnimatedPositioned:

class FoldersListWidget extends StatefulWidget {
  @override
  _FoldersListWidgetState createState() => _FoldersListWidgetState();
}

class _FoldersListWidgetState extends State<FoldersListWidget>
    with SingleTickerProviderStateMixin {
  double _bottomPosition = -70;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        FutureBuilder<List<FolderModel>>(
          future: Provider.of<FoldersProvider>(context).getFolders(),
          builder: (context, snapshot) {
            if (!snapshot.hasData) {
              return Center(
                child: CircularProgressIndicator(),
              );
            }
            return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (context, i) {
                final folder = snapshot.data[i];
                return Card(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15),
                  ),
                  margin: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                  elevation: 1,
                  child: ListTile(
                    title: Text(folder.folderName),
                    leading: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Container(
                          width: 50,
                          child: Consumer<FoldersProvider>(
                            builder:
                                (BuildContext context, value, Widget child) {
                              return value.deleteFolderMode
                                  ? CircularCheckBox(
                                      value: false,
                                      onChanged: (value) {},
                                    )
                                  : Icon(
                                      Icons.folder,
                                      color: Theme.of(context).accentColor,
                                    );
                            },
                          ),
                        ),
                      ],
                    ),
                    subtitle: folder.numberOfLists != 1
                        ? Text('${folder.numberOfLists} items')
                        : Text('${folder.numberOfLists} item'),
                    onTap: () {},
                    onLongPress: () {
                      Provider.of<FoldersProvider>(context, listen: false)
                          .toggleDeleteFolderMode(true); // removes fab from screen
                      setState(() {
                        _bottomPosition = 0;
                      });
                    },
                  ),
                );
              },
            );
          },
        ),
        AnimatedPositioned(
          bottom: _bottomPosition,
          duration: Duration(milliseconds: 100),
          child: ClipRRect(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(25),
              topRight: Radius.circular(25),
            ),
            child: Container(
              height: 70,
              width: MediaQuery.of(context).size.width,
              color: Theme.of(context).colorScheme.surface,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Expanded(
                    child: IconAboveTextButton(
                      icon: Icon(Icons.cancel),
                      text: 'Cancel',
                      textColour: Colors.black,
                      opacity: 0.65,
                      onTap: () => setState(() {
                        _bottomPosition = -70;
                      }),
                    ),
                  ),
                  VerticalDivider(
                    color: Colors.black26,
                  ),
                  Expanded(
                    child: IconAboveTextButton(
                      icon: Icon(Icons.delete),
                      text: 'Delete',
                      textColour: Colors.black,
                      opacity: 0.65,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

This slides the bottom Container on and off the screen but my issue is that it covers the last list item:

Could anyone suggest a better way of doing this or simply a way to adjust the height of the ListView so that when the Container slides up, the ListView also slides up.

Answer 1

Wrap ListView.builder inside a container and set its bottom padding as (70+16) 70 (height of bottom sheet), 16 (some default padding to make it look better if you like).

return Container(
padding: EdgetInset.only(bottom: (70+16)),
         child:ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (context, i) {
               .....
               .....
               .....

})