Flutter产品卡片展示插件flutter_product_card的使用

发布于 1周前 作者 caililin 来自 Flutter

Flutter产品卡片展示插件flutter_product_card的使用

flutter_product_card 是一个高度可定制且功能丰富的Flutter包,用于在电子商务或购物应用程序中显示产品卡片。通过这个包,你可以轻松创建视觉吸引力强的产品卡片,并具有各种自定义选项。

Features

  • Customizable card design:可以自定义边框圆角、背景颜色和文本颜色。
  • Displays product information:显示产品图片、名称、类别、描述(可选)、评分(可选)和价格。
  • Shows product availability status:用图标和标签显示产品的可用性状态。
  • Displays discount percentage:显示折扣百分比(可选)。
  • Favorite button:收藏按钮,标记喜欢的产品。
  • Tap callback:处理卡片点击事件的回调函数。
  • Error handling for image loading:加载图片时的错误处理,带有占位符。
  • Extracted UI components:提取的UI组件,便于代码组织和重用。
  • Comprehensive documentation with examples:带有示例的全面文档。

Getting started - Installation

要使用此包,在你的 pubspec.yaml 文件中添加 flutter_product_card 作为依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_product_card: ^0.0.2

然后,运行 flutter pub get 来安装该包。

Usage

在Dart文件中导入包:

import 'package:flutter_product_card/flutter_product_card.dart';

然后,在你的应用程序中使用 ProductCard 小部件:

ProductCard(
  imageUrl: 'https://your-image-url.com/image.jpg',
  categoryName: 'Pants',
  productName: 'Men Linen Pants',
  price: 199.99,
  currency: '\$', // Default is '$'
  onTap: () {
    // Handle card tap event
  },
  onFavoritePressed: () {
    // Handle favorite button press
  },
  shortDescription: 'comfortable & airy.', // Optional short description
  rating: 4.2, // Optional rating
  discountPercentage: 35.0, // Optional discount percentage
  isAvailable: true, // Optional availability status
  cardColor: Colors.white, // Optional card background color
  textColor: Colors.black, // Optional text color
  borderRadius: 8.0, // Optional border radius
)

Customization

ProductCard 小部件提供了多个属性来自定义其外观和行为:

  • imageUrl: (String) 产品的图片URL。
  • categoryName: (String) 产品的类别名称。
  • productName: (String) 产品的名称。
  • price: (double) 产品的价格。
  • currency: (String, optional) 显示的价格前缀货币符号,默认为’$’。
  • shortDescription: (String, optional) 产品的简短描述。
  • onTap: (VoidCallback, optional) 卡片被点击时触发的回调函数。
  • onFavoritePressed: (VoidCallback, optional) 收藏按钮被按下时触发的回调函数。
  • isAvailable: (bool, optional) 指示产品是否可用,默认为true。
  • textColor: (Color, optional) 文本标签和描述的颜色,默认为黑色。
  • discountPercentage: (double, optional) 产品的折扣百分比。
  • rating: (double, optional) 产品的评分。
  • cardColor: (Color, optional) 卡片背景颜色。
  • borderRadius: (double, optional) 卡片的圆角半径。

Example

下面是一个完整的示例demo,展示了如何使用 flutter_product_card 包来创建一个产品卡片:

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

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

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Product Card Demo'),
        ),
        body: Center(
          child: SizedBox(
            width: 300,
            height: 400,
            child: ProductCard(
              imageUrl: 'https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcQndSK7hvssofrM2uzv75NxVjrkAwH3RwyqWcBesUsmq1ipmkuljRr6x_SRbCKaBXvjTR9CKfAaEFtmUFw-69o52wgVMgk2hp8KDYr4FvKtQ8ZfKewgOW4gDQ&usqp=CAE4',
              categoryName: 'Pants',
              productName: 'Men Linen Pants',
              price: 199.99,
              currency: '\$', // Default is '$'
              onTap: () {
                // Handle card tap event
                print('Card tapped');
              },
              onFavoritePressed: () {
                // Handle favorite button press
                print('Favorite button pressed');
              },
              shortDescription: 'Comfortable and airy.',
              rating: 4.2,
              discountPercentage: 35.0,
              isAvailable: true,
              cardColor: Colors.white,
              textColor: Colors.black,
              borderRadius: 8.0,
              width: 300, // optional
              height: 380, // optional
            ),
          ),
        ),
      ),
    );
  }
}

Output

Example Product Card Image

Additional Information

Contributing

欢迎贡献!如果你遇到任何问题或有改进建议(例如文档改进),请在 GitHub仓库 上提交issue或pull request。

Author

此包由 Krishna Gupta 创建并维护。

Contact

如果有任何问题或需要进一步的帮助,请联系:

License

此包发布在 MIT License 下。


更多关于Flutter产品卡片展示插件flutter_product_card的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter产品卡片展示插件flutter_product_card的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何使用flutter_product_card插件来展示产品卡片的示例代码。请注意,flutter_product_card并非Flutter官方插件,所以这里假设它类似于一个常见的卡片展示插件。如果实际插件的API有所不同,请查阅相应的文档进行调整。

首先,你需要在pubspec.yaml文件中添加依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_product_card: ^latest_version  # 请替换为实际版本号

然后运行flutter pub get来获取依赖。

接下来,你可以在你的Flutter应用中使用flutter_product_card来展示产品卡片。以下是一个简单的示例:

import 'package:flutter/material.dart';
import 'package:flutter_product_card/flutter_product_card.dart';  // 假设插件提供了这样的导入路径

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Product Card Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ProductCardScreen(),
    );
  }
}

class ProductCardScreen extends StatelessWidget {
  final List<Product> products = [
    Product(
      id: '1',
      title: 'Product 1',
      description: 'This is the first product.',
      price: '\$19.99',
      imageUrl: 'https://example.com/product1.jpg',
    ),
    Product(
      id: '2',
      title: 'Product 2',
      description: 'This is the second product.',
      price: '\$29.99',
      imageUrl: 'https://example.com/product2.jpg',
    ),
    // 添加更多产品...
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Product Cards'),
      ),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 4.0,
          mainAxisSpacing: 4.0,
        ),
        itemCount: products.length,
        itemBuilder: (BuildContext context, int index) {
          return ProductCard(
            product: products[index],
            onTap: () {
              // 点击卡片时的处理逻辑,比如导航到详情页
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => ProductDetailPage(product: products[index])),
              );
            },
          );
        },
      ),
    );
  }
}

// 假设的产品模型
class Product {
  final String id;
  final String title;
  final String description;
  final String price;
  final String imageUrl;

  Product({required this.id, required this.title, required this.description, required this.price, required this.imageUrl});
}

// 产品详情页面(示例)
class ProductDetailPage extends StatelessWidget {
  final Product product;

  ProductDetailPage({required this.product});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(product.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Image.network(product.imageUrl, width: double.infinity, height: 200, fit: BoxFit.cover),
            SizedBox(height: 16.0),
            Text(product.title, style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold)),
            SizedBox(height: 8.0),
            Text(product.description, style: TextStyle(fontSize: 16.0)),
            SizedBox(height: 16.0),
            Text('Price: ${product.price}', style: TextStyle(fontSize: 20.0, color: Colors.red)),
          ],
        ),
      ),
    );
  }
}

// 假设的 ProductCard 组件(根据插件API实现,这里仅为示例)
class ProductCard extends StatelessWidget {
  final Product product;
  final VoidCallback? onTap;

  ProductCard({required this.product, this.onTap});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12.0),
        ),
        elevation: 8.0,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(12.0),
              child: Image.network(
                product.imageUrl,
                width: double.infinity,
                height: 150,
                fit: BoxFit.cover,
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    product.title,
                    style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
                  ),
                  SizedBox(height: 8.0),
                  Text(
                    product.description,
                    style: TextStyle(fontSize: 14.0, color: Colors.grey),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                  SizedBox(height: 8.0),
                  Text(
                    'Price: ${product.price}',
                    style: TextStyle(fontSize: 16.0, color: Colors.red),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这个示例代码展示了如何使用GridView来展示产品卡片,每个卡片包含产品的图片、标题、描述和价格。点击卡片时,会导航到产品详情页面。请根据实际情况调整代码,特别是插件的API和产品数据的获取方式。

回到顶部