flutter_slimy_card 1.0.2

FlutterSlymyCard provides a beautiful slime-like card animation Divided into two different cards,one at the top the other at the bottom.

flutter_slimy_card

SlimyCard provides a nice slime-like animation of a Card that splits into two different Cards, one on top and one on the bottom. It is possible to put any custom widget into these two separate cards.

How install this package

Getting Started

1. Depend on it Add this to your package's pubspec.yaml file:

dependencies:
  flutter_slimy_card: ^1.0.2

2. Install it

You can install packages from the command line with Flutter:

$ flutter pub get

How use this package

1. Import this package

Now in your Dart code, you can use:

import 'package:flutter_slimy_card/flutter_slimy_card.dart';

2. Use this package

Basic Use

ListView(
  children: <Widget>[
    FlutterSlimyCard()
  ]
);

Custom Usuage Example

Widget build(BuildContext context) {
    return Scaffold(
        body: ListView(
      children: <Widget>[
        FlutterSlimyCard(
          topCardHeight: 160,
          bottomCardHeight: 120,
          topCardWidget: topWidget(),
          bottomCardWidget: bottomWidget(),
        ),
      ],
    ));
  }

  topWidget() {
    return Container(
      child: SafeArea(
        child: Column(
          children: [
            Container(height: 75, child: Image(image: AssetImage('assets/run_horse.png'))),
            SizedBox(
              height: 5,
            ),
            Text(
              'A Horse',
              style: TextStyle(color: Colors.white, fontSize: 18),
            ),
            SizedBox(
              height: 5,
            ),
          ],
        ),
      ),
    );
  }

  bottomWidget() {
    return Container(
      margin: EdgeInsets.only(top: 5),
      child: Column(
        children: [
          SizedBox(height: 10),
          Flexible(
              child: Text(
            'A horse is a large animal which people can ride. Some horses are used for pulling ploughs and carts. Say Hello to a Funny Hourse.',
            style: TextStyle(color: Colors.white),
          ))
        ],
      ),
    );
  }