Flutter Tagging 项目教程

Flutter Tagging 项目教程

flutter_taggingA TextField flutter package with tagging functionality.项目地址:https://gitcode.com/gh_mirrors/fl/flutter_tagging

1. 项目的目录结构及介绍

Flutter Tagging 项目的目录结构如下：

flutter_tagging/
├── android/
├── ios/
├── lib/
│   ├── flutter_tagging.dart
│   └── ...
├── test/
├── example/
│   ├── lib/
│   │   └── main.dart
│   └── ...
├── CHANGELOG.md
├── LICENSE
├── README.md
├── pubspec.lock
├── pubspec.yaml
└── ...

目录结构介绍

• android/: 包含 Android 平台相关的文件。
• ios/: 包含 iOS 平台相关的文件。
• lib/: 包含 Flutter 项目的主要代码文件，其中 flutter_tagging.dart 是核心文件。
• test/: 包含项目的测试文件。
• example/: 包含一个示例项目，展示如何使用 Flutter Tagging 包。
• CHANGELOG.md: 记录项目的更新日志。
• LICENSE: 项目的许可证文件。
• README.md: 项目的介绍和使用说明。
• pubspec.lock: 锁定依赖版本的文件。
• pubspec.yaml: 项目的配置文件，包含依赖、版本等信息。

2. 项目的启动文件介绍

在 example/lib/main.dart 文件中，可以找到 Flutter Tagging 的示例启动文件。

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Tagging Demo'),
      ),
      body: Column(
        children: <Widget>[
          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();
            },
            configureSuggestion: (lang) {
              return SuggestionConfiguration(
                title: Text(lang.name),
                subtitle: Text(lang.position.toString()),
              );
            },
            configureChip: (lang) {
              return ChipConfiguration(
                label: Text(lang.name),
                backgroundColor: Colors.green,
              );
            },
          ),
        ],
      ),
    );
  }
}

class Language {
  final String name;
  final int position;

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

class LanguageService {
  static List<Language> getLanguages(String query) {
    List<Language> languages = <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),
    ];
    return languages.where((lang) {
      return lang.name.toLowerCase().contains(query.toLowerCase

flutter_taggingA TextField flutter package with tagging functionality.项目地址:https://gitcode.com/gh_mirrors/fl/flutter_tagging