Flutter卡片选择插件select_card的使用

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

Flutter卡片选择插件 select_card 的使用

简介

select_card 是一个 Flutter 插件，提供了动画效果丰富的卡片选择功能。你可以自定义卡片组、单个卡片和下拉选择项的颜色、动画时间等属性，并且可以添加图片和详细信息列表。

功能特点

  • 自定义卡片组：支持自定义卡片组的样式和行为。
  • 自定义单个卡片：支持自定义单个卡片的样式和行为。
  • 自定义下拉选择项：支持自定义下拉选择项的样式和行为。
  • 动画效果：提供多种动画效果，增强用户体验。

主要组件

SelectGroupCard

SelectGroupCard 组件用于创建一组可选择的卡片。它需要一个标题列表（titles），并且可以选择性地提供内容列表（contents）和图片列表（images）。

示例代码

SelectGroupCard(context, 
  titles: titles,
  ids: ids,
  onTap: (title, id) {
    debugPrint(title);
    debugPrint(id);
    setState(() {
      cardGroupResult = title + " " + id;
    });
  },
);

SelectSingleCard

SelectSingleCard 组件用于创建单个可选择的卡片。它需要一个标题（title），并且可以选择性地提供内容（content）和图片（image）。

示例代码

SelectSingleCard(context,
  title: "Title",
  imageSourceType: ImageSourceType.network,
  image: "https://example.com/image.jpg",
  content: "Some content",
  cardBackgroundColor: Colors.amberAccent,
  cardSelectedColor: Colors.blue,
  titleTextColor: Colors.blue.shade900,
  contentTextColor: Colors.black87,
  onTap: (title, id) {
    debugPrint(title);
    debugPrint(id);
    setState(() {
      singleCardResult = title + " " + id;
    });
  },
);

SelectSlideItem

SelectSlideItem 组件用于创建一个带有下拉选择项的卡片。它需要一个包含图片和标题的映射列表（mapList）。

示例代码

SelectSlideItem(
  mapList: carMap,
  onChange: (title) {
    debugPrint(title);
    setState(() {
      selectSlideResult = title;
    });
  },
);

完整示例

以下是一个完整的示例，展示了如何在 Flutter 应用中使用 select_card 插件。

示例代码

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

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

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final List<String> titles = [
    'Emre Kaplan',
    'Oğuzcan',
    'Cansu',
    'Ahmet',
    "Mete",
    "Fatih Burak Kaplan",
  ];
  final List<String> ids = [
    'id-123',
    'id-134',
    'id-145',
    'id-156',
    "id-167",
    "id-178",
  ];
  final List<String> contents = [
    'Lorem ipsum dolor sit amet, consectetur ',
    'Mauris vitae, tristique',
    'Volutpat convallis tellus',
    'Metus maximus sit amet.',
    "Integer tristique sodales",
    "Sed sodales lacus Metus maximus sit tristique sodales Mauris vitae, tristique"
  ];
  final List<String> imagesFromNetwork = [
    'https://gravatar.com/avatar/37b27392b82a7f94676757c1c2d10273?s=400&d=robohash&r=x',
    'https://gravatar.com/avatar/36f1d92605a3bf914d94cd136d3c7ec3?s=400&d=robohash&r=x',
    'https://gravatar.com/avatar/5ef18de85860bd24b4d95f3dcd41eccb?s=400&d=robohash&r=x',
    'https://gravatar.com/avatar/ce9c78d5127331baa3c67c7f67973967?s=400&d=robohash&r=x',
    "https://gravatar.com/avatar/d7204273c98a64cf10cef68ef561e722?s=400&d=robohash&r=x",
    "https://gravatar.com/avatar/f4f5b41a89722855c614bb1ea1dacc4d?s=400&d=robohash&r=x"
  ];
  final Map<String, String> carMap = {
    'assets/cars/car4.png': 'automobile',
    'assets/cars/car6.png': "VIP",
    'assets/cars/car1.png': "18+1",
    'assets/cars/car3.png': "Panelvan",
    'assets/cars/car7.png': "Pick-Up",
    'assets/cars/car5.png': "SUV",
    'assets/cars/car2.png': "Other",
  };
  final Map<String, String> cakeMap = {
    'assets/cakes/cake1.png': 'Strawbery Pie',
    'assets/cakes/cake2.png': "Cheese Pie",
    'assets/cakes/cake3.png': "Donut",
    'assets/cakes/cake4.png': "Roll Cake",
    'assets/cakes/cake5.png': "Waffle",
    'assets/cakes/cake6.png': "Croissant",
  };

  String? cardGroupResult;
  String? cardGroupResult2;
  String? cardGroupResult3;
  String? singleCardResult;
  String? selectSlideResult;
  String? selectSlideResult2;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Package Control',
      theme: ThemeData(
        primarySwatch: Colors.deepOrange,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Package Control Example"),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              const Padding(
                padding: EdgeInsets.all(12.0),
                child: Text(
                  "Simplest Select GROUP Card Example which returns title and id",
                  style: TextStyle(color: Colors.black, fontSize: 16),
                ),
              ),
              SelectGroupCard(context, titles: titles, ids: ids, onTap: (title, id) {
                debugPrint(title);
                debugPrint(id);
                setState(() {
                  cardGroupResult = title + " " + id;
                });
              }),
              Text(cardGroupResult ?? ''),
              const Divider(
                height: 20,
                thickness: 3,
                indent: 20,
                endIndent: 20,
                color: Color.fromARGB(255, 16, 39, 189),
              ),
              const Padding(
                padding: EdgeInsets.all(12.0),
                child: Text(
                  "Select GROUP Card Example with properties which returns just title",
                  style: TextStyle(color: Colors.black, fontSize: 16),
                ),
              ),
              SelectGroupCard(context,
                titles: titles,
                imageSourceType: ImageSourceType.network,
                images: imagesFromNetwork,
                contents: contents,
                cardBackgroundColor: const Color.fromARGB(255, 128, 201, 235),
                cardSelectedColor: Colors.deepOrange,
                titleTextColor: Colors.blue.shade900,
                contentTextColor: Colors.black87,
                onTap: (title) {
                  debugPrint(title);
                  setState(() {
                    cardGroupResult2 = title;
                  });
                },
              ),
              Text(cardGroupResult2 ?? ''),
              const Divider(
                height: 20,
                thickness: 3,
                indent: 20,
                endIndent: 20,
                color: Color.fromARGB(255, 16, 39, 189),
              ),
              const Padding(
                padding: EdgeInsets.all(12.0),
                child: Text(
                  "Select GROUP Card Example which returns just title even if you give id list",
                  style: TextStyle(color: Colors.black, fontSize: 16),
                ),
              ),
              SelectGroupCard(context,
                titles: titles,
                ids: ids,
                imageSourceType: ImageSourceType.network,
                images: imagesFromNetwork,
                contents: contents,
                onTap: (title) {
                  debugPrint(title);
                  setState(() {
                    cardGroupResult3 = title;
                  });
                },
              ),
              Text(cardGroupResult3 ?? ''),
              const Divider(
                height: 20,
                thickness: 3,
                indent: 20,
                endIndent: 20,
                color: Color.fromARGB(255, 16, 39, 189),
              ),
              const Padding(
                padding: EdgeInsets.all(12.0),
                child: Text(
                  "Select SINGLE Card Example with properties",
                  style: TextStyle(color: Colors.black, fontSize: 16),
                ),
              ),
              Row(
                children: [
                  SelectSingleCard(context,
                    title: titles[2],
                    id: ids[2],
                    imageSourceType: ImageSourceType.network,
                    image: imagesFromNetwork[1],
                    content: contents[0],
                    cardBackgroundColor: Colors.amberAccent,
                    cardSelectedColor: Colors.blue,
                    titleTextColor: Colors.blue.shade900,
                    contentTextColor: Colors.black87,
                    onTap: (title, id) {
                      debugPrint(title);
                      debugPrint(id);
                      setState(() {
                        singleCardResult = title + " " + id;
                      });
                    },
                  ),
                  SelectSingleCard(context,
                    title: titles[5],
                    imageSourceType: ImageSourceType.network,
                    image: imagesFromNetwork[5],
                    content: contents[5],
                    cardBackgroundColor: Colors.orange,
                    cardSelectedColor: Colors.green,
                    titleTextColor: Colors.white,
                    contentTextColor: Colors.black87,
                    onTap: (title) {
                      debugPrint(title);
                      setState(() {
                        singleCardResult = title;
                      });
                    },
                  ),
                  SelectSingleCard(context,
                    title: titles[0],
                    id: ids[0],
                    imageSourceType: ImageSourceType.network,
                    image: imagesFromNetwork[3],
                    content: contents[0],
                    cardBackgroundColor: Colors.blue.shade600,
                    cardSelectedColor: Colors.deepOrange,
                    titleTextColor: Colors.white,
                    contentTextColor: Colors.white70,
                    onTap: (title) {
                      debugPrint(title);
                      setState(() {
                        singleCardResult = title;
                      });
                    },
                  ),
                ],
              ),
              Text(singleCardResult ?? ''),
              const Divider(
                height: 20,
                thickness: 3,
                indent: 20,
                endIndent: 20,
                color: Color.fromARGB(255, 16, 39, 189),
              ),
              const Padding(
                padding: EdgeInsets.all(12.0),
                child: Text(
                  "Simplest Select Slide Item Example",
                  style: TextStyle(color: Colors.black, fontSize: 16),
                ),
              ),
              SelectSlideItem(
                mapList: carMap,
                onChange: (title) {
                  debugPrint(title);
                  setState(() {
                    selectSlideResult = title;
                  });
                },
              ),
              Text(selectSlideResult ?? ''),
              const Divider(
                height: 20,
                thickness: 3,
                indent: 20,
                endIndent: 20,
                color: Color.fromARGB(255, 16, 39, 189),
              ),
              const Padding(
                padding: EdgeInsets.all(12.0),
                child: Text(
                  "Select Slide Item Example with properties",
                  style: TextStyle(color: Colors.black, fontSize: 16),
                ),
              ),
              SelectSlideItem(
                mapList: cakeMap,
                fontColor: Colors.purple,
                fontSize: 18,
                text: "Cakes",
                hint: "Please select cake",
                imageHeight: 200,
                duration: const Duration(milliseconds: 900),
                onChange: (title) {
                  debugPrint(title);
                  setState(() {
                    selectSlideResult2 = title;
                  });
                },
              ),
              Text(selectSlideResult2 ?? ''),
              const Divider(
                height: 20,
                thickness: 3,
                indent: 20,
                endIndent: 20,
                color: Color.fromARGB(255, 16, 39, 189),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

说明

  1. SelectGroupCard：展示了一个简单的卡片组选择示例，返回标题和ID。
  2. SelectSingleCard：展示了一个单个卡片选择示例，返回标题和ID。
  3. SelectSlideItem：展示了一个带有下拉选择项的卡片示例，返回选中的标题。

通过这些示例，你可以看到 select_card 插件的强大功能和灵活性。希望这些示例能帮助你更好地理解和使用 select_card 插件。


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

Harmonyos Next教程
1 回复

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


当然，我可以为你提供一个关于如何在Flutter项目中使用select_card插件的示例代码。select_card插件通常用于在移动应用中实现卡片选择功能，例如支付卡片选择等。下面是一个简单的示例，展示如何集成和使用这个插件。

首先，确保你的Flutter项目已经创建，并且你已经在pubspec.yaml文件中添加了select_card依赖：

dependencies:
  flutter:
    sdk: flutter
  select_card: ^最新版本号  # 请替换为最新的版本号

然后运行flutter pub get来安装依赖。

接下来，在你的Dart文件中，你可以按照以下方式使用select_card插件：

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

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

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

class SelectCardDemo extends StatefulWidget {
  @override
  _SelectCardDemoState createState() => _SelectCardDemoState();
}

class _SelectCardDemoState extends State<SelectCardDemo> {
  List<Map<String, String>> cards = [
    {"frontImage": "assets/card_front_1.png", "backImage": "assets/card_back_1.png"},
    {"frontImage": "assets/card_front_2.png", "backImage": "assets/card_back_2.png"},
    {"frontImage": "assets/card_front_3.png", "backImage": "assets/card_back_3.png"},
  ];

  String selectedCard = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Select Card Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (context) {
                    return SelectCardDialog(
                      cards: cards,
                      onSelectCard: (cardIndex) {
                        setState(() {
                          selectedCard = "Card ${cardIndex + 1} selected";
                        });
                        Navigator.of(context).pop();
                      },
                    );
                  },
                );
              },
              child: Text('Select Card'),
            ),
            SizedBox(height: 20),
            Text(selectedCard),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事情：

  1. 定义卡片数据：在cards列表中，我们定义了每个卡片的正面和背面图片路径。你需要将这些图片放在你的assets文件夹中，并在pubspec.yaml中声明它们。

  2. 创建选择卡片的按钮：我们使用了一个ElevatedButton来触发卡片选择对话框。

  3. 显示卡片选择对话框：当按钮被点击时，显示SelectCardDialog对话框，传入卡片数据和选择卡片的回调函数。

  4. 处理卡片选择：在回调函数中，我们更新选中的卡片信息，并关闭对话框。

请确保你已经将卡片图片放置在项目的assets文件夹中，并在pubspec.yaml中声明它们，例如：

flutter:
  assets:
    - assets/card_front_1.png
    - assets/card_back_1.png
    - assets/card_front_2.png
    - assets/card_back_2.png
    - assets/card_front_3.png
    - assets/card_back_3.png

这样，你就可以在Flutter应用中实现卡片选择功能了。希望这个示例对你有帮助！

回到顶部