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

License: GNU General Public License v2.0

Kotlin 2.15% Swift 2.59% Objective-C 0.24% Dart 95.03%

flutter-package flutter animation flare-flutter dart

slimycard-animated-flutter-package's Introduction

SlimyCard - Animated Flutter Package

How to install this package

1. Depend on it

Add this to your flutter app's pubspec.yaml file:
```
dependencies:
  slimy_card: ^1.0.4
```
2. Install it

You can install packages from the command line:

with Flutter:
```
$ flutter pub get
```
Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

How to use this package

1. Import it

In your Dart code, import the package as mentioned below:
```
import 'package:slimy_card/slimy_card.dart';
```
2. Use It

Create a ListView, and in its children use SlimyCard()
```
ListView(
  children: <Widget>[
    SlimyCard(),
  ],
);
```

3. Customize It

You can customize SlimyCard as per need, by using the following parameters:

ListView(
  children: <Widget>[
    SlimyCard(
      color: Colors.red,
      width: 200,
      topCardHeight: 400,
      bottomCardHeight: 200,
      borderRadius: 15,
      topCardWidget: myWidget01(),
      bottomCardWidget: myWidget02(),
      slimeEnabled: true,
    ),
  ],
),

myWidget01 & myWidget02 are your custom widget which you can display in Top Card & Bottom Card respectively.

Actual ScreenShots

How to get the status of this package

You can get the real-time status of this Package by wrapping the SlimeyCard in StreamBuilder as below:

StreamBuilder(
  initialData: false,
  stream: slimyCard.stream, //Stream of SlimyCard
  builder: ((BuildContext context, AsyncSnapshot snapshot) {
    return ListView(
      children: <Widget>[
        SlimyCard(
          color: Colors.red,
          width: 200,
          topCardHeight: 400,
          bottomCardHeight: 200,
          borderRadius: 15,
          topCardWidget: myWidget01(),
          bottomCardWidget: myWidget02(),
          slimeEnabled: true,
        ),
      ],
    );
  }),
),

snapshot.data will contain the real-time

State change in the Package

SlimeyCard also supports changing of state, check the code below:

SlimyCard(
  topCardWidget: topCardWidget((snapshot.data)
      ? 'assets/images/rock_aggresive.jpg'
      : 'assets/images/rock_calm.jpg'),
),

In the code above, snapshot.data contains status of SlimeyCard and have two states according to it & hence updates UI according to it.

App Demonstration Video

Cooming Soon...

About Me

Hi! my name is Akash Divya.

I'm a veteran Designer/Animator with 10+ years of experience. I always hated the excuses Developers gave me when they fail to implement my Design. One day, when I found about Flutter I said no more & started learning it.

Other Repo you may Like

Visit this Repo

My Links

Facebook

YouTube

Dribbble

Behance

Email: [email protected]

Now go out there and do what you Love.

slimycard-animated-flutter-package's People

Contributors

Stargazers

Watchers

slimycard-animated-flutter-package's Issues

Cannot use setState in the slimy card.

I want to be able to change a few data on bottom card widget using setState but that seems not possible.

This seems to be no longer maintained so I forked it

Here's my fork: LINK

@AkashDivya If you plan on maintaining this again, I'll create a PR to merge my changes.

Changes:

Fixed animation (no flicker if bottomHeight != 100)
Removed opinionated paddings
Fixed drawing order so clicks aren't obstructed by invisible animation object

Null Safety

Opening another issue since the last one wasn't being responded to.
Kindly, Update the package to support null safety (approve the pull request).

Card auto height

How can i make the card heights auto/dynamic?

Since these cards have fixed height, i am facing overflow content issue. It would be great if we can make the height auto to use this in dynamic content list.

Thanks in advance!

Support for expanding towards top

Lets say my initial(not divided) Card is at the bottom of the screen. In this case, It would be nice to see the animation going upwards, bottom of the new little card staying where the big card was before.

Null safety

Please update so it support null safety

Arrow icon remains up even after page mounting

First, Very nice Library, but I Stuck somewhere.

Could you please help me 😃

Like first I click on arrow icon then it show the animation beautifully, now the both widget open and then go to the next page and once you come back the card arrow icon will remain in up direction and data in Widget2 will be shown.

Please let me know what else can I do to resolve it.

Waiting for your response...

Thanks
Vivek Rajoriya

Support Nullsafety

I can work on this, by April 2nd.

Cc: @AkashDivya

Dropdown Arrow Styling Issue

Given that the BoxDecoration for the open button is explicitly set to Colors.white, this means the arrow cannot be seen when using
flutter's Material dark mode as the icon also appears white. Therefore explicitly setting the icon to black ensures it can always be seen regardless of theme settings.

I've sent a pull request to fix this.

Update Bottom Widget

Hello, thanks for sharing such an awesome widget.

Been trying to update the Bottom widget with data but it appears to be static, how can I go about changing it?

akashdivya / slimycard-animated-flutter-package Goto Github PK