slimy_card 1.0.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 88

SlimyCard - Animated Flutter Package #

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.

Banner Image

How to install this package #

  • 1. Depend on it

    Add this to your flutter app's pubspec.yaml file:

    dependencies:
      slimy_card: ^1.0.1
    
  • 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. Custimize 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 #

Explore Flutter Firebase

Visit this Repo

My Links #

Facebook

YouTube

Dribbble

Behance

Email: akash.apd@gmail.com

Now go out there and do what you Love.

[1.0.2] - Oct 21, 2019

  • Fixed errors in readme.md.

[1.0.1] - Oct 20, 2019

  • Fixed short description and other small issues.

[1.0.0] - Oct 20, 2019

  • 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, topCardWidget & bottomCardWidget.

  • Customizable parameters added.

  • Proper readme with example app included.

example/README.md

example #

A new Flutter project.

Getting Started #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  slimy_card: ^1.0.2

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.

3. Import it

Now in your Dart code, you can use:


import 'package:slimy_card/slimy_card.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
81
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
90
Overall:
Weighted score of the above. [more]
88
Learn more about scoring.

We analyzed this package on Jan 19, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.0
  • pana: 0.13.4
  • Flutter: 1.12.13+hotfix.5

Maintenance issues and suggestions

Support latest dependencies. (-10 points)

The version constraint in pubspec.yaml does not support the latest published versions for 1 dependency (flare_flutter).

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flare_flutter ^1.5.9 1.8.3 2.0.1
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
flare_dart 2.3.3
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test