Flutter 标签

一个带标签或多选功能的 flutter 包。可用于添加标签或标签选择表单。

Flutter-Tagging

用法

1. 依赖

将此添加到您的 package 的 pubspec.yaml 文件中

dependencies:
  flutter_tagging: ^1.1.0

2. 安装

运行命令

$ flutter packages get

3. 导入

在 Dart 代码中导入

import 'package:flutter_tagging/flutter_tagging.dart';

4. 使用 Flutter 标签

///
/// textFieldDecoration: Adds decoration to TextField.
/// addButtonWidget: Button to be shown when new pattern is typed.
/// chipsColor: Background Color of Chips. Default is light grey.
/// chipsFontColor: Font Color of Chips. Default is black.
/// deleteIcon: Delete Icon to be included in Chips. Default is Material Cancel Icon.
/// chipsPadding: Imposes padding inside chips.
/// chipsSpacing: Defines horizontal space between chips.
/// suggestionsCallback: Callback to get suggestions as per the pattern entered.
/// onChanged: Callback to get result on data change.
///
FlutterTagging(
     textFieldDecoration: InputDecoration(
         border: OutlineInputBorder(),
         hintText: "Tags",
         labelText: "Enter tags"),
     addButtonWidget: _buildAddButton(),
     chipsColor: Colors.pinkAccent,
     chipsFontColor: Colors.white,
     deleteIcon: Icon(Icons.cancel,color: Colors.white),
     chipsPadding: EdgeInsets.all(2.0),
     chipsFontSize: 14.0,
     chipsSpacing: 5.0,
     chipsFontFamily: 'helvetica_neue_light',
     suggestionsCallback: (pattern) async {
       return await TagSearchService.getSuggestions(pattern);
       },
     onChanged: (result) {
       setState(() {
         text = result.toString();
         });
       },
),

有关属性更详细的用法，请参阅 flutter_typeahead 的文档。

示例

示例源码

GitHub

https://github.com/sarbagyastha/flutter_tagging