Flutter自定义卡片插件flutter_custom_cards的使用

Flutter Custom Cards 插件帮助开发者在 Flutter 中创建美观的自定义卡片和 3D 卡片。以下是关于如何使用这个插件的详细说明。

Demo Screenshot

Getting Started

添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_custom_cards: ^0.2.1

导入并使用

在 Dart 文件中导入插件：

import 'package:flutter_custom_cards/flutter_custom_card.dart';

Basic Usages

创建一个 CustomCard

CustomCard(
  borderRadius: 10,
  color: Colors.yellow,
  hoverColor: Colors.indigo,
  onTap: () {},
  child: Text('Flutter'),
),

创建一个 Custom3DCard

Custom3DCard(
  elevation: 4,
  child: SizedBox(
    height: 100,
    width: 100,
    child: Center(
      child: FlutterLogo(size: 65),
    ),
  ),
),

更多用法可以参考 Example 部分。

Major Changes

在版本 0.2 中，进行了以下重大更改：

• TextCard, ImageCard 和 WidgetCard 合并为一个名为 CustomCard 的单一卡片。
• 新的 CustomCards 支持 onTap, hoverColor, height, width 等属性。
• 引入了新的 Custom3DCard。
• 现在只有两种卡片：CustomCard 和 Custom3DCard。

CustomCard Options

Custom3DCard Options

Upcoming Features

即将推出的功能包括：

• 在 Custom3DCard 上添加 onTap 选项
• 在两张卡片上添加 onHover 选项
• 在两张卡片上添加 onLongPressed 和 onDoubleTap 选项
• 在 Custom3DCard 上添加 style 属性，用于创建不同类型的 3D 卡片

License

本项目采用 MIT 许可证。详情请参阅 LICENSE 文件。

示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_custom_cards 插件创建自定义卡片和 3D 卡片：

import 'package:flutter/material.dart';
import 'package:flutter_custom_cards/flutter_custom_cards.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CustomCards',
      debugShowCheckedModeBanner: false,
      home: CustomCardsExample(),
    );
  }
}

class CustomCardsExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Custom Cards Example'),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              Text('CustomCards'),
              Center(
                child: Wrap(
                  children: [
                    CustomCard(
                      height: 50,
                      child: FlutterLogo(
                        style: FlutterLogoStyle.horizontal,
                        size: 90,
                      ),
                    ),
                    CustomCard(
                      height: 50,
                      width: 100,
                      elevation: 6,
                      childPadding: 10,
                      color: Colors.green,
                      onTap: () {},
                      child: Center(
                        child: Text(
                          'Flutter',
                          style: TextStyle(
                            fontSize: 21,
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ),
                    CustomCard(
                      height: 50,
                      width: 100,
                      borderRadius: 10,
                      color: Colors.red,
                      hoverColor: Colors.indigo,
                      splashColor: Colors.white,
                      onTap: () {},
                      child: Center(
                        child: Text(
                          'Flutter',
                          style: TextStyle(
                            fontSize: 20,
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(height: 8),
              Wrap(
                children: [
                  CustomCard(
                    height: 100,
                    width: 100,
                    elevation: 5,
                  ),
                  CustomCard(
                    height: 100,
                    width: 100,
                    elevation: 5,
                    borderRadius: 50,
                    color: Colors.green,
                    hoverColor: Colors.yellow,
                    onTap: () {},
                  ),
                  CustomCard(
                    height: 100,
                    width: 100,
                    elevation: 5,
                    color: Colors.blue,
                    borderColor: Colors.white,
                    borderWidth: 2,
                  ),
                ],
              ),
              SizedBox(height: 25),
              Text('Custom3DCards'),
              Wrap(
                children: [
                  Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: Custom3DCard(
                      elevation: 4,
                      child: SizedBox(
                        height: 100,
                        width: 100,
                        child: Center(
                          child: FlutterLogo(size: 65),
                        ),
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: Custom3DCard(
                      elevation: 10,
                      shadowSpread: 5,
                      shadowColor: Colors.brown.shade400,
                      child: SizedBox(
                        height: 100,
                        width: 100,
                        child: Center(
                          child: FlutterLogo(
                            size: 65,
                            style: FlutterLogoStyle.stacked,
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(height: 30),
            ],
          ),
        ),
      ),
    );
  }
}

通过以上内容，您可以快速上手并使用 flutter_custom_cards 插件来创建美观且功能丰富的自定义卡片和 3D 卡片。