flutter Dismissible widget variable dependency

Question

Edit: Fixed it.. Look down

Old problem:

I am experimenting with the Dismissible widget. I can successfully monitor the state of the direction, which is stored in directionVar. It outputs something like DismissDirection.endToStart

I want to use this information, to change the placement of the icon that I show. When removing an item, the background is red, with an icon on the right to it. Something in the style like Gmail.

Widget build(BuildContext context) {
        DismissDirection directionVar;
        return ListView.builder(
          itemBuilder: (BuildContext context, int index) {
            return Dismissible(
              key: Key(products[index]['title']), //Should be unique.
              onDismissed: (DismissDirection direction) {
                directionVar = direction;
              },

My issue is this part:

              background: Container(
                 color: Colors.red,
                padding: EdgeInsets.only(left: 20.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    Icon(
                      Icons.delete,
                    )
                  ],
                ),
              ),);});}

I want this part to change dependent on the directionVar value. The padding should change dependent on the value of directionVar, together with the mainAxisAlignment.

Something along these lines:

        if(directionVar == DismissDirection.endToStart){

        } else if (directionVar == DismissDirection.startToEnd){

        }

But I can't access the background: and padding property in these statements, since they are a property of the Dismissible widget and can't be changed inside onDismissed(){}

This seems like simple problem but can't seem to solve it.

Edit: Fixed it.. Very easy.. Just added this:

   secondaryBackground: Container(
        color: Colors.red,
        padding: EdgeInsets.only(right: 20.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Icon(
              Icons.delete,
            )
          ],
        ),
      ),

Have you tried to make your `directionVar` accessible for both widgets and then you can resolve dynamically the padding and mainAxisAlignment by calling `setState()` each time the direction changes. — Miguel Ruivo, Dec 17 '18 at 11:57
I need a Stateful widget for that to work but I am working with a Stateless widget — aze45sq6d, Dec 17 '18 at 12:52

score 1 · Answer 1 · answered Dec 17 '18 at 12:09

There are a few ways that you can achieve this. For example, you can create a method that handles the direction dynamically and then update it accordingly in your widget tree. Something like

    List<dynamic> _resolveDirection(DismissDirection direction) {

    switch (direction) {
        case DismissDirection.endToStart:
          return [MainAxisAlignment.center, 20.0];
          break;
        case DismissDirection.startToEnd:
          return [MainAxisAlignment.start, 10.0];
          break;
        case DismissDirection.vertical:
          return [MainAxisAlignment.end, 5.0];
          break;
        // And so on...
        default:
          return [];
      }
    }

and then replace your tree with

 background: Container(
                 color: Colors.red,
                padding: _resolveDirection(directionVar)[1],
                child: Row(
                  mainAxisAlignment: _resolveDirection(directionVar)[0],
                  children: <Widget>[
                    Icon(
                      Icons.delete,
                    )
                  ],
                ),
              ),);});}

In the end, all you have to do everytime a swipe occurs, is just rebuild your tree with the direction updated

setState(() => directionVar = direction);

Hey is it possible to implement the Dismissible functionality for an OnTap Gesture instead of Swipe? — Simran Aswani, Feb 23 '20 at 06:28

flutter Dismissible widget variable dependency

1 Answers1