completable 0.1.3

A completable dissmissible widget. This widget extends the Dismissible component from Material, adding the capability to swipe right to complete an item.

example/lib/main.dart

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:completable/completable.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  @override
  MyAppState createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  final items = List<Map>.generate(3, (i) {
    return {
      'label': 'Item ${i + 1}',
      'details': 'Details',
      'completed': false,
      'selected': false,
    };
  });

  @override
  Widget build(BuildContext context) {
    final title = 'Completing Items';

    return MaterialApp(
      title: title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            final item = items[index];

            return Completable(
              key: Key(item['label']),
              onPressed: () {
                setState(() {
                  items.forEach((item) => item['selected'] = false);
                  items[index]['selected'] = true;
                });
              },
              colorBorder: Colors.grey.shade300,
              onCompleted: () {
                setState(() {
                  items[index]['completed'] = !items[index]['completed'];
                });

                if (items[index]['completed']) {
                  Scaffold.of(context).showSnackBar(
                      SnackBar(content: Text('${item['label']} completed')));
                }
              },
              confirmDismiss: () {
                showDialog(
                  context: context,
                  barrierDismissible: false,
                  builder: (BuildContext alertContext) {
                    return AlertDialog(
                      title: Text('Remove Item'),
                      content: SingleChildScrollView(
                        child: ListBody(
                          children: <Widget>[
                            Text('Do you want to delete this item?'),
                          ],
                        ),
                      ),
                      actions: <Widget>[
                        FlatButton(
                          child: Text("Cancel"),
                          onPressed: () {
                            Navigator.of(alertContext).pop();

                            return false;
                          },
                        ),
                        FlatButton(
                          color: Colors.blueAccent,
                          textColor: Colors.white,
                          child: Text('Sure'),
                          onPressed: () {
                            Navigator.of(alertContext).pop();

                            setState(() {
                              items.removeAt(index);
                            });

                            Scaffold.of(context).showSnackBar(SnackBar(
                                content: Text('${item['label']} removed')));

                            return true;
                          },
                        ),
                      ],
                    );
                  },
                );
              },
              color: item['selected']
                  ? Colors.blueAccent.shade100
                  : Colors.grey.shade100,
              backgroundDismiss: Container(color: Colors.redAccent),
              backgroundComplete: Container(color: Colors.blueAccent),
              child: Container(
                padding: const EdgeInsets.only(left: 8.0),
                alignment: Alignment.centerLeft,
                height: 64.0,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(item['label'],
                        style: Theme.of(context).textTheme.title),
                    Text(
                      item['details'],
                      style: Theme.of(context).textTheme.subtitle,
                    ),
                  ],
                ),
              ),
              childComplete: Container(
                  width: 64.0,
                  height: 64.0,
                  alignment: Alignment.center,
                  color: Colors.blueAccent,
                  child: Icon(
                    Icons.check,
                    size: 32.0,
                    color: Colors.white,
                  )),
              completed: item['completed'],
            );
          },
        ),
      ),
    );
  }
}