slimy_card 1.0.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 90

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/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:slimy_card/slimy_card.dart';

void main() {
  //Don't worry about these codes here, as they are not relevant for this example.
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarIconBrightness: Brightness.dark,
    systemNavigationBarColor: Colors.white,
    systemNavigationBarIconBrightness: Brightness.dark,
    systemNavigationBarDividerColor: Colors.transparent,
  ));
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.white,
        fontFamily: 'Poppins',
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder(
        // This streamBuilder reads the real-time status of SlimyCard.
        initialData: false,
        stream: slimyCard.stream, //Stream of SlimyCard
        builder: ((BuildContext context, AsyncSnapshot snapshot) {
          return ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              SizedBox(height: 100),

              // SlimyCard is being called here.
              SlimyCard(
                // In topCardWidget below, imagePath changes according to the
                // status of the SlimyCard(snapshot.data).
                topCardWidget: topCardWidget((snapshot.data)
                    ? 'assets/images/rock_aggresive.jpg'
                    : 'assets/images/rock_calm.jpg'),
                bottomCardWidget: bottomCardWidget(),
              ),
            ],
          );
        }),
      ),
    );
  }

  // This widget will be passed as Top Card's Widget.
  Widget topCardWidget(String imagePath) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          height: 70,
          width: 70,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(15),
            image: DecorationImage(image: AssetImage(imagePath)),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.1),
                blurRadius: 20,
                spreadRadius: 1,
              ),
            ],
          ),
        ),
        SizedBox(height: 15),
        Text(
          'The Rock',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
        SizedBox(height: 15),
        Text(
          'He asks, what your name is. But!',
          style: TextStyle(
              color: Colors.white.withOpacity(0.8),
              fontSize: 12,
              fontWeight: FontWeight.w500),
        ),
        SizedBox(height: 10),
      ],
    );
  }

  // This widget will be passed as Bottom Card's Widget.
  Widget bottomCardWidget() {
    return Text(
      'It doesn\'t matter \nwhat your name is.',
      style: TextStyle(
        color: Colors.white,
        fontSize: 12,
        fontWeight: FontWeight.w500,
      ),
      textAlign: TextAlign.center,
    );
  }
}

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]
84
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]
90
Learn more about scoring.

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

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

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