Flutter Dismissible Not working

Question

Just trying to build a simple app with a list where you can tap to go to detail page, swipe left and right to do some actions.

The code for the list page are as below. However as soon as I add the Dismissible, tapping stops working and the swiping doesn't work as well.

When I enable debugPaintPointersEnabled, the list tiles(rows) just doesn't respond to any taps. Weird I am using this example and the code are almost identical but have no clue why my code doesn't work but the example works. Any suggestions would be very appreciated! Thanks!

import 'package:flutter/material.dart';
import 'package:xxx/routes/utils.dart';
import 'package:xxxx/models/SomeItem.dart'; 
import 'SomeItem_DoSth.dart';
import 'package:xxxxxh/constants.dart';

class SomeItemListRoute extends StatefulWidget {
  @override
  _SomeItemListState createState() => new _SomeItemListState();
}

class _SomeItemListState extends State<SomeItemListRoute> {
  List<SomeItem> SomeItemList;
  @override
  Widget build(BuildContext context) {
    SomeAppDb.get().getSomeItems().then((SomeItems) {
      if (SomeItems != null) {
        setState(() {
          SomeItemList = SomeItems;
        });
      }
    });
    if (SomeItemList == null || SomeItemList.length <= 0) {
      return emptyView("No items yet");
    }
    return new Container(
        child: new ListView.builder(
      itemCount: SomeItemList.length,
      itemBuilder: (context, index) {
        return new Dismissible(
            key: new ObjectKey(SomeItemList[index]),
            onDismissed: (DismissDirection direction) {
              var taskID = SomeItemList[index].id;
              setState(() {
                SomeItemList.removeAt(index);
              });
              if (direction == DismissDirection.endToStart) {
                SomeAppDb
                    .get()
                    .updateSomeItemStatus(taskID, SomeItemStatus.COMPLETE)
                    .then((value) {
                  Scaffold.of(context).showSnackBar(new SnackBar(
                      content: new Text("Completed"),
                      backgroundColor: Colors.green));
                });
              } else {
                SomeAppDb.get().deleteSomeItem(taskID).then((value) {
                  Scaffold.of(context).showSnackBar(new SnackBar(
                      content: new Text("Deleted"),
                      backgroundColor: Colors.red));
                });
              }
            },
            background: new Container(
              color: Colors.red,
              child: new ListTile(
                leading: new Icon(Icons.delete, color: Colors.white),
              ),
            ),
            secondaryBackground: new Container(
              color: Colors.green,
              child: new ListTile(
                trailing: new Icon(Icons.check, color: Colors.white),
              ),
            ),
            child: SomeItemRow(SomeItemList[index]));
      },
    ));
  }
}

class SomeItemRow extends StatelessWidget {
  SomeItem SomeItem;
  static final date_label = "Date";
  SomeItemRow(SomeItem) {
    this.SomeItem = SomeItem;
  }

  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
        onTap: () {
          Navigator.of(context).push(new MaterialPageRoute(
            builder: (context) {
              return SomeItemDoSthRoute();
            },
          ));
        },
        child: Column(
          children: <Widget>[
            new Container(
              margin: const EdgeInsets.symmetric(vertical: PADDING_TINY),
              decoration: new BoxDecoration(
                border: new Border(
                  left: new BorderSide(
                    width: 4.0,
                    color: Colors.blue,
                  ),
                ),
              ),
              child: new Padding(
                padding: const EdgeInsets.all(PADDING_SMALL),
                child: new Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    new Padding(
                      padding: const EdgeInsets.only(
                          left: PADDING_SMALL, bottom: PADDING_VERY_SMALL),
                      child: new Text(SomeItem.DoSthNo,
                          style: new TextStyle(
                              fontSize: FONT_SIZE_TITLE,
                              fontWeight: FontWeight.bold)),
                    ),
                    new Container(),
                    new Padding(
                      padding: const EdgeInsets.only(
                          left: PADDING_SMALL, bottom: PADDING_VERY_SMALL),
                      child: new Row(
                        children: <Widget>[
                          new Text(
                            "Date Placeholder",
                            style: new TextStyle(
                                color: Colors.grey, fontSize: FONT_SIZE_DATE),
                            key: new Key(date_label),
                          ),
                          new Expanded(
                            child: new Column(
                              crossAxisAlignment: CrossAxisAlignment.end,
                              children: <Widget>[
                                new Row(
                                  mainAxisAlignment: MainAxisAlignment.end,
                                  children: <Widget>[
                                    new Text('Consignee Placeholder',
                                        style: new TextStyle(
                                            color: Colors.grey,
                                            fontSize: FONT_SIZE_LABEL)),
                                    new Container(
                                      margin: const EdgeInsets.symmetric(
                                          horizontal: 8.0),
                                      width: 8.0,
                                      height: 8.0,
                                      child: new CircleAvatar(
                                        backgroundColor: Colors.red,
                                      ),
                                    )
                                  ],
                                ),
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
            new Container(
                decoration: new BoxDecoration(
              border: new Border(
                bottom: new BorderSide(
                  width: 0.5,
                  color: Colors.grey,
                ),
              ),
            ))
          ],
        ));
  }
}

Answer 1

Like nomad commented above, your code has too many personal variables, making it hard for others to recreate your exact problem. I was able to have a functioning Dismissible similar to what you have above. I advise that you start with a working layout first, like the code below, then add more functionality one piece at a time to figure out what breaks the layout. Start with presentation only stuff using hardcoded values, then use mock data, then add those function calls, and finally replace the mock data with real data from your database. When you find the exact reason, you'll either know how to solve it or can post a more informed question.

import'package:flutter/material.dart';

class SwipeLeftRightDismissible extends StatefulWidget {
  @override
  _SwipeLeftRightDismissibleState createState() {
    return new _SwipeLeftRightDismissibleState();
  }

}

class _SwipeLeftRightDismissibleState extends State<SwipeLeftRightDismissible> {
  List<String> _itemList;


  @override
  void initState() {
    super.initState();
    _itemList = ["first", "second", "third", "fourth"];
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Container(
        child: new ListView.builder(
            itemCount: _itemList.length,
            itemBuilder: (context, index) {
              return new Dismissible(
                  key: new ObjectKey(_itemList[index]),
                  child: ItemRow(_itemList[index]),
                onDismissed: (direction) {
                  setState(() {
                    _itemList.removeAt(index);
                  });
                    if (direction == DismissDirection.endToStart) {
                      debugPrint("dismiss end to start");
                    } else {
                      debugPrint("dismiss start to end");
                    }
                },
                background: new Container(
                  color: Colors.red,
                  child: new ListTile(
                    leading: new Icon(Icons.delete, color: Colors.white),
                  ),
                ),
                secondaryBackground: new Container(
                  color: Colors.green,
                  child: new ListTile(
                    trailing: new Icon(Icons.check, color: Colors.white),
                  ),
                ),
              );
            }
        ),
      ),
    );
  }
}

class ItemRow extends StatelessWidget {
  final String item;
  ItemRow(this.item);

  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: () {
        Navigator.push(context, new MaterialPageRoute(
            builder: (context) => new SwipeLeftRightDismissible()));
      },
      child: Column(
        children: <Widget>[
          new Container(
            margin: const EdgeInsets.symmetric(vertical: 4.0),
            decoration: new BoxDecoration(
              border: new Border(
                left: new BorderSide(
                  width: 4.0,
                  color: Colors.blue,
                ),
              ),
            ),
            child: new Padding(
              padding: const EdgeInsets.all(8.0),
              child: new Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  new Padding(
                    padding: const EdgeInsets.only(
                        left: 8.0, bottom: 4.0),
                    child: new Text(item,
                        style: new TextStyle(
                            fontWeight: FontWeight.bold)),
                  ),
                  new Container(),
                  new Padding(
                    padding: const EdgeInsets.only(
                        left: 4.0, bottom: 4.0),
                    child: new Row(
                      children: <Widget>[
                        new Text(
                          "Date Placeholder",
                          style: new TextStyle(
                              color: Colors.grey, ),
                        ),
                        new Expanded(
                          child: new Column(
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: <Widget>[
                              new Text("column 1"),
                              new Text("column 2"),
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          new Container(
              decoration: new BoxDecoration(
                border: new Border(
                  bottom: new BorderSide(
                    width: 0.5,
                    color: Colors.grey,
                  ),
                ),
              ))
        ],
      ),
    );
  }
}