Flutter标签管理插件flutter_tagging_plus的使用

flutter_tagging_plus 是一个基于 flutter_tagging 的标签管理插件，提供了标签或多重选择的功能，非常适合用于添加标签或标签选择表单。本文将介绍如何使用该插件，并提供一个完整的示例代码。

插件简介

flutter_tagging_plus 提供了以下功能：

• 标签输入和管理
• 自定义建议项配置
• 支持新增标签
• 标签显示自定义

示例效果

使用步骤

1. 添加依赖

在你的 pubspec.yaml 文件中添加 flutter_tagging_plus 依赖：

dependencies:
  flutter_tagging_plus: ^latest_version

运行 flutter pub get 安装依赖。

2. 创建语言服务类

首先，我们需要创建一个语言服务类来模拟从网络获取数据的过程。这里我们使用 Future 来模拟延迟加载数据。

class LanguageService {
  /// Mocks fetching language from network API with delay of 500ms.
  static Future<List<Language>> getLanguages(String query) async {
    await Future.delayed(Duration(milliseconds: 500), null);
    return <Language>[
      Language(name: 'JavaScript', position: 1),
      Language(name: 'Python', position: 2),
      Language(name: 'Java', position: 3),
      Language(name: 'PHP', position: 4),
      Language(name: 'C#', position: 5),
      Language(name: 'C++', position: 6),
    ].where((lang) => lang.name.toLowerCase().contains(query.toLowerCase())).toList();
  }
}

3. 创建标签类

接下来，我们需要创建一个标签类 Language，该类需要继承 Taggable 接口，并实现必要的方法。

class Language extends Taggable {
  final String name;
  final int position;

  Language({required this.name, required this.position});

  [@override](/user/override)
  List<Object> get props => [name];

  String toJson() => '''{
    "name": "$name",
    "position": $position
  }''';
}

4. 使用 FlutterTagging 组件

现在我们可以使用 FlutterTagging 组件来实现标签管理功能。以下是一个完整的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Tagging Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
        scaffoldBackgroundColor: Colors.white,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Language> _selectedLanguages = [];

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Tagging Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: FlutterTagging<Language>(
          initialItems: _selectedLanguages,
          textFieldConfiguration: TextFieldConfiguration(
            decoration: InputDecoration(
              border: InputBorder.none,
              filled: true,
              fillColor: Colors.green.withAlpha(30),
              hintText: 'Search Tags',
              labelText: 'Select Tags',
            ),
          ),
          findSuggestions: LanguageService.getLanguages,
          additionCallback: (value) {
            return Language(
              name: value,
              position: 0,
            );
          },
          onAdded: (language) {
            // api calls here, triggered when add to tag button is pressed
            return Language(name: language.name, position: -1);
          },
          configureSuggestion: (lang) {
            return SuggestionConfiguration(
              title: Text(lang.name),
              subtitle: Text(lang.position.toString()),
              additionWidget: Chip(
                avatar: Icon(
                  Icons.add_circle,
                  color: Colors.white,
                ),
                label: Text('Add New Tag'),
                labelStyle: TextStyle(
                  color: Colors.white,
                  fontSize: 14.0,
                  fontWeight: FontWeight.w300,
                ),
                backgroundColor: Colors.green,
              ),
            );
          },
          configureChip: (lang) {
            return ChipConfiguration(
              label: Text(lang.name),
              backgroundColor: Colors.green,
              labelStyle: TextStyle(color: Colors.white),
              deleteIconColor: Colors.white,
            );
          },
          onChanged: () {
            setState(() {});
          },
        ),
      ),
    );
  }
}