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