A Flutter package consisting of pre animated cards(containers) with fluid animation for freely adding user customized cards to the app with heavy customizable options adding up to an incredible UI experience

Shantanu

Last update: Dec 30, 2022

Overview

Fluid action card Package

A Flutter package consisting of pre animated cards(containers) with fluid animation for freely adding user customized cards to the app with heavily customizable options for the cards adding up to an incredible UI experience.You can set the amount of cards for your screen to display without writing code for creating additonal cards and also writing your own animation mechanism.You can also add multiple texts,images in the card and also customize its color which is in gradient form with various attributes making it a complete package for modern frontend development.

Preview

Demo

Installation

You should have Flutter installed in your system.
Now in your terminal
Run this command:

$ flutter pub add fluid_action_card

Example and Usage

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Fluid Action card display',
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          body: FluidActionCard(
            color1: Colors.pinkAccent,
            color2: Colors.black45,
            backgroundcolor: Colors.grey[900]!,
            borderRadius1: BorderRadius.circular(20),
            borderRadius2: BorderRadius.circular(20),
            height: 400.0,
            width: 240.0,
            cardCount: 6,
            Position: 250.0,
            shadow: BoxShadow(
              color: Colors.black12,
              blurRadius: 10.0,
              spreadRadius: 0.2,
              offset: Offset(0, 3),
            ),
            ontap: () {},
           ),
        )
      );
  }
}

To add images to the animated cards follow this procedure:

First import the dependancy assets to pubspec.yaml

flutter:
  uses-material-design: true

  assets:
    - assets/images/

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Fluid Action card display',
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          body: FluidActionCard(
            color1: Colors.greenAccent.shade400,
            color2: Colors.black12,
            backgroundcolor: Colors.grey[900]!,
            borderRadius1: BorderRadius.circular(20),
            borderRadius2: BorderRadius.circular(20),
            TextPosition_Top: 22.0,
            TextPosition_Down: 29.0,
            height: 400.0,
            width: 240.0,
            CardCount: 3,
            text1: Text(
              "Starts From",
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 18.0,
                  fontStyle: FontStyle.italic),
            ),
            text2: Text(
              "300",
              style: TextStyle(
                color: Colors.white,
                fontSize: 20.0,
                fontWeight: FontWeight.w700,
                letterSpacing: 2.0,
              ),
            ),
            Position: 250.0,
            shadow: BoxShadow(
              color: Colors.black12,
              blurRadius: 10.0,
              spreadRadius: 0.2,
              offset: Offset(0, 3),
            ),
            assetimage: 'assets/images/Xbox.png',
            ontap: () {},
          ),
        ));
  }
}

Support the Library

You can support the library by liking it on pub, staring in on Github and reporting any bugs you encounter.

Flutter - Special animated flip card

special_card Flutter UI Design | Animated Flip Card. Demo for the app: animated-flip-card.mp4 Getting Started This project is a starting point for a F

Dec 4, 2022

The most complete Chat UI for flutter highly customizable and helps developing chat UI faster.

⚠️ Dashchat v2 is available in v2 branch ⚠️ You can open issues for the v2 to indicate things we need to implement/fix. Also the API can change until

Dec 11, 2022

A customizable shadow for any widget

simple_shadow A customizable shadow for any widget Getting Started import: import 'package:simple_shadow/simple_shadow.dart'; example: SimpleShadow(

Nov 23, 2022

A customizable segment tab control. Can be used with or without TabView.

A customizable segment tab control. Can be used with or without TabView. Features The package provides an advanced segmented control widget based on t

Nov 16, 2022