Flutter联系人卡片管理插件contact_card的使用

Flutter联系人卡片管理插件contact_card的使用

Contact Card

由 Damian Aldair 提供

一个用于处理 MeCard 和 vCard 不同版本的 Dart 库。可以从文本创建 MeCard 或 vCard 对象，并且可以将这些对象转换回文本。

适用于使用二维码读取器的应用程序。

特性

格式 文本到对象 对象到文本
MeCard 2.1 ✅ ✅
vCard 1.0 ✅ ✅
vCard 2.1 ⌛ ⌛
vCard 3.0 ⌛ ⌛
vCard 4.0 ⌛ ⌛

对于 vCards，以下字段尚未实现：

  • CLIENTPIDMAP
  • KEY
  • LABEL
  • LOGO
  • MEMBER
  • NAME
  • PHOTP
  • PRODID
  • RELATED
  • SOUND
  • TZ
  • UID

开始使用

在 pubspec.yaml 文件中导入此库：

dependencies:
  contact_card:

所有工作已完成。

使用方法

final MeCard card1 = MeCard.fromPlainText(sampleText1);
final String plainText1 = card1.toPlainText();

final VCard1 card2 = VCard1.fromPlainText(sampleText2);
final String plainText2 = card2.toPlainText();

完整示例代码

import 'package:contact_card/cards/mecard.dart';
import 'package:contact_card/cards/vcard.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

// MeCard 示例文本
const mecardText =
    'MECARD:N:Doe,John;ORG:ABC Company;TEL:+123456789;TEL:+987654321;EMAIL:john.doe@abccompany.com;ADR:123 Main St, Anytown, CA 12345;NOTE:This is a note;BDAY:1970-01-01;URL:http://www.abccompany.com;TITLE:Marketing Director;NICKNAME:Johnny;X-SOCIALPROFILE;type=twitter:http://twitter.com/johndoe;X-SOCIALPROFILE;type=linkedin:http://www.linkedin.com/in/johndoe;;';

// vCard 1.0 示例文本
const vcard1Text = '''
BEGIN:VCARD
VERSION:1.0
N:Gonzalez;Juan;;;
FN:Juan Gonzalez
TEL:555-1234
TEL;HOME:555-5678
ADR;WORK:;;123 Main St.;Anytown;CA;12345;USA
ADR;HOME:;;456 Oak St.;Othertown;CA;67890;USA
EMAIL:juan.gonzalez@work.com
EMAIL:juan.gonzalez@gmail.com
ORG:Acme Inc.;Sales Department
TITLE:Sales Representative
ROLE:Sales
URL:http://www.johndoe.com
PHOTO;JPEG:http://www.example.com/photo.jpg
LOGO;GIF:http://www.example.com/logo.gif
LABEL;WORK;ENCODING=QUOTED-PRINTABLE:Acme Inc.=0D=0ASales Department=0D=0A123 Main St.=0D=0AAnytown, CA 12345=0D=0AUSA
LABEL;HOME;ENCODING=QUOTED-PRINTABLE:456 Oak St.=0D=0AOthertown, CA 67890=0D=0AUSA
END:VCARD''';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: Theme.of(context).copyWith(useMaterial3: true),
      title: 'Contact Card App',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Contact Card App'),
          centerTitle: true,
        ),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              // MeCard 按钮
              ElevatedButton(
                child: const Text('MeCard'),
                onPressed: () {
                  final card = MeCard.fromPlainText(mecardText);
                  debugPrint(card.toString());
                  debugPrint(card.toPlainText());
                },
              ),
              // vCard 1.0 按钮
              ElevatedButton(
                child: const Text('vCard 1.0'),
                onPressed: () {
                  final card = VCard1.fromPlainText(vcard1Text);
                  debugPrint(card.toString());
                  debugPrint(card.toPlainText());
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter联系人卡片管理插件contact_card的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


contact_card 是一个用于在 Flutter 应用中管理和显示联系人卡片的插件。它可以帮助你快速集成联系人信息的展示和编辑功能。以下是如何使用 contact_card 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 contact_card 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  contact_card: ^1.0.0  # 使用最新版本

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

2. 导入插件

在你的 Dart 文件中导入 contact_card 插件：

import 'package:contact_card/contact_card.dart';

3. 创建联系人卡片

你可以使用 ContactCard 小部件来创建一个联系人卡片。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Contact Card Example'),
        ),
        body: Center(
          child: ContactCard(
            name: 'John Doe',
            phone: '+1 234 567 890',
            email: 'john.doe@example.com',
            address: '123 Main St, City, Country',
            image: AssetImage('assets/john_doe.png'),
          ),
        ),
      ),
    );
  }
}

4. 自定义联系人卡片

ContactCard 提供了多个参数来定制联系人卡片的外观和行为。以下是一些常用的参数：

  • name: 联系人姓名
  • phone: 联系人电话
  • email: 联系人邮箱
  • address: 联系人地址
  • image: 联系人头像（AssetImage 或 NetworkImage）
  • onTap: 卡片点击事件回调
  • onEdit: 编辑按钮点击事件回调
  • onDelete: 删除按钮点击事件回调

5. 处理交互事件

你可以通过 onTap, onEdit, 和 onDelete 参数来处理用户在卡片上的交互事件。例如：

ContactCard(
  name: 'Jane Doe',
  phone: '+1 987 654 321',
  email: 'jane.doe@example.com',
  address: '456 Elm St, City, Country',
  image: AssetImage('assets/jane_doe.png'),
  onTap: () {
    print('Card tapped');
  },
  onEdit: () {
    print('Edit button tapped');
  },
  onDelete: () {
    print('Delete button tapped');
  },
)
回到顶部