A tinder like cards for flutter

tcard

a tinder like cards flutter plugin, can slide it’s children left or right. you can use it to show some images, videos and so on.

install

# pubspec.yaml
dependencies:
  tcard: ^1.3.3

uasge

normal widget

list<widget> cards = list.generate(
  5,
  (index) => container(
    color: colors.blue,
    child: center(
      child: text(
        '$index',
        style: textstyle(fontsize: 60, color: colors.white),
      ),
    ),
  ),
);

tcard(
  cards: cards,
)

network image

list<string> images = [
  'https://gank.io/images/5ba77f3415b44f6c843af5e149443f94',
  'https://gank.io/images/02eb8ca3297f4931ab64b7ebd7b5b89c',
  'https://gank.io/images/31f92f7845f34f05bc10779a468c3c13',
  'https://gank.io/images/b0f73f9527694f44b523ff059d8a8841',
  'https://gank.io/images/1af9d69bc60242d7aa2e53125a4586ad',
];

list<widget> cards = list.generate(
  images.length,
  (int index) {
    return container(
      decoration: boxdecoration(
        color: colors.white,
        borderradius: borderradius.circular(16.0),
        boxshadow: [
          boxshadow(
            offset: offset(0, 17),
            blurradius: 23.0,
            spreadradius: -13.0,
            color: colors.black54,
          )
        ],
      ),
      child: cliprrect(
        borderradius: borderradius.circular(16.0),
        child: image.network(
          images[index],
          fit: boxfit.cover,
        ),
      ),
    );
  },
);

tcard(
  size: size(400, 600),
  cards: cards,
);

use a controller to control

class myapp extends statefulwidget {
  @override
  _myappstate createstate() => _myappstate();
}

class _myappstate extends state<myapp> {
  tcardcontroller _controller = tcardcontroller();

  @override
  widget build(buildcontext context) {
    return materialapp(
      home: scaffold(
        body: column(
          mainaxisalignment: mainaxisalignment.center,
          children: [
            tcard(
              cards: cards,
              size: size(360, 480),
              controller: _controller,
              onforward: (index, info) {
                print(index);
              },
              onback: (index, info) {
                print(index);
              },
              onend: () {
                print('end');
              },
            ),
            sizedbox(
              height: 40,
            ),
            row(
              mainaxisalignment: mainaxisalignment.spacearound,
              children: <widget>[
                outlinebutton(
                  onpressed: () {
                    print(_controller);
                    _controller.back();
                  },
                  child: text('back'),
                ),
                outlinebutton(
                  onpressed: () {
                    _controller.reset();
                  },
                  child: text('reset'),
                ),
                outlinebutton(
                  onpressed: () {
                    _controller.forward();
                  },
                  child: text('forward'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

determine the sliding direction

 tcard(
  cards: cards,
  size: size(360, 480),
  controller: _controller,
  onforward: (index, info) {
    print(index);
    print(info.direction);
    if (info.direction == swipdirection.right) {
      print('like');
    } else {
      print('dislike');
    }
  },
  onback: (index, info) {
    print(index);
  },
  onend: () {
    print('end');
  },
)

reset width new cards

list<widget> newcards = [];

tcardcontroller _controller = tcardcontroller();

_controller.reset(cards: newcards);

property