Pub Version
GitHub
My badge
GitHub Repo stars

流体动作卡片包

一个Flutter包，包含带有流体动画的预制动画卡片（容器），可自由地将用户自定义的卡片添加到应用程序中，并为卡片提供高度可定制的选项，为用户带来出色的UI体验。您可以设置屏幕上显示的卡片数量，而无需编写代码来创建其他卡片和编写自己的动画机制。您还可以在卡片中添加多个文本、图像，并自定义其渐变形式的颜色，以及各种属性，使其成为现代前端开发的完整包。

预览

image

演示

ezgif com-gif-maker

安装

您的系统中应已安装 Flutter。
现在，在您的终端中
运行此命令

$ flutter pub add fluid_action_card

示例和用法

Screenshot 2022-02-09 205025(1)

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: () {},
           ),
        )
      );
  }
}

Screenshot 2022-02-10 101138

要将图像添加到动画卡片，请遵循此过程

  • 首先，将依赖项资产导入 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: () {},
          ),
        ));
  }
}

支持此库

您可以通过在pub上点赞、在Github上标星以及报告遇到的任何bug来支持此库。