flutter_slimy_card 1.0.0

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.0

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),
          ))
        ],
      ),
    );
  }