iRyanBell

Completable Dismissibles

May 28, 2019

Completable Dismissibles

While working on my to do list manager, I found that I needed a Flutter Widget similar to a standard Dismissible component, but with bidirectional actions. I wanted something that would drop off the screen with a right-to-left swipe, but change status on a left-to-right swipe.

I present, the Completable Dismissible.

library completable;

import 'package:flutter/material.dart';

class Completable extends StatelessWidget {
  final Key key;
  final Function confirmDismiss;
  final Function onCompleted;
  final Function onPressed;
  final Color color;
  final Color colorBorder;
  final Widget backgroundDismiss;
  final Widget backgroundComplete;
  final Widget child;
  final Widget childComplete;
  final bool completed;

  Completable({
    this.key,
    this.confirmDismiss,
    this.onCompleted,
    this.onPressed,
    this.color,
    this.colorBorder,
    this.backgroundDismiss,
    this.backgroundComplete,
    this.child,
    this.childComplete,
    this.completed,
  });

  
  Widget build(BuildContext context) {
    return Dismissible(
      key: key,
      confirmDismiss: (direction) {
        if (direction == DismissDirection.startToEnd) {
          onCompleted();
          return Future.value(false);
        }

        return confirmDismiss();
      },
      background: backgroundComplete,
      secondaryBackground: backgroundDismiss,
      child: FlatButton(
        padding: const EdgeInsets.all(0.0),
        color: color,
        onPressed: onPressed,
        child: Container(
          decoration: BoxDecoration(
            border: Border(
              bottom: BorderSide(
                width: 1.0,
                color: colorBorder,
              ),
            ),
          ),
          child: Row(
            children: <Widget>[
              completed
                ? childComplete
                : Container(),
              Flexible(
                child: child,
              ),
            ],
          ),
        ),
      )
    );
  }
}

Params

final Key key;
final Function confirmDismiss;
final Function onCompleted;
final Function onPressed;
final Color color;
final Color colorBorder;
final Widget backgroundDismiss;
final Widget backgroundComplete;
final Widget child;
final Widget childComplete;
final bool completed;

Demo

Available on pub.dev:

https://pub.dev/packages/completable

You can view the project on GitHub here: 👇
https://github.com/iRyanBell/flutter-completable