Flutter图片展示插件image_card的使用

Image Card

Image Card 是一个Flutter插件，用于创建带有图片的卡片。你可以根据需要自定义两种类型的卡片：Fill image card 和 Transparent image card。

Usage

Fill image card

这种类型的卡片会填满整个卡片区域，并允许添加标签、标题和描述等元素。

FillImageCard(
  width: 200,
  heightImage: 140,
  imageProvider: AssetImage('assets/mockup.png'),
  tags: [_tag('Category', () {}), _tag('Product', () {})],
  title: _title(),
  description: _content(),
),

Transparent image card

透明背景的卡片适合叠加在其他元素之上，同样支持标签、标题和描述等元素。

TransparentImageCard(
  width: 200,
  imageProvider: AssetImage('assets/mockup.png'),
  tags: [ _tag('Product', () {}), ],
  title: _title(color: Colors.white),
  description: _content(color: Colors.white),
),

Parameter

更多参数详情请参考GitHub仓库。

完整示例Demo

下面是一个完整的示例代码，演示如何在项目中使用 image_card 插件：

import 'package:flutter/material.dart';
import 'package:image_card/image_card.dart'; // 导入image_card包

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Image Card Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // Fill image card 示例
              FillImageCard(
                width: 300,
                heightImage: 200,
                imageProvider: AssetImage('assets/mockup.png'), // 替换为你的图片路径
                tags: [
                  _tag('Category', () {}),
                  _tag('Product', () {}),
                ],
                title: _title(),
                description: _content(),
              ),
              SizedBox(height: 20),
              // Transparent image card 示例
              TransparentImageCard(
                width: 300,
                imageProvider: AssetImage('assets/mockup.png'), // 替换为你的图片路径
                tags: [
                  _tag('Product', () {}),
                ],
                title: _title(color: Colors.white),
                description: _content(color: Colors.white),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 标签组件
  Widget _tag(String label, VoidCallback onTap) {
    return GestureDetector(
      onTap: onTap,
      child: Chip(
        label: Text(label),
      ),
    );
  }

  // 标题组件
  Widget _title({Color? color = Colors.black}) {
    return Text(
      'Title',
      style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: color),
    );
  }

  // 描述组件
  Widget _content({Color? color = Colors.black}) {
    return Text(
      'Description goes here...',
      style: TextStyle(fontSize: 14, color: color),
    );
  }
}

注意：在使用此插件前，请确保已将 image_card 添加到项目的 pubspec.yaml 文件中的依赖项中，并且正确配置了图片资源路径。

希望这个指南对你有所帮助！如果你有任何问题或需要进一步的帮助，请随时提问。