Flutter表情选择插件emoji_choose的使用
Flutter表情选择插件emoji_choose的使用
一个用于 Flutter 应用的表情键盘插件。
基于
https://github.com/JeffG05/emoji_picker
主要特性
- 支持 Flutter Web
- 支持 Null 安全
- 可以查看并选择 390 个表情
- 有 8 个类别
- 可以选择添加关键词来推荐表情
- 提供 Material Design 和 Cupertino 模式
- 在 Android 上过滤无法显示的表情
使用方法
要使用此插件,在 pubspec.yaml
文件中添加 emoji_choose
作为依赖项。
示例代码
以下是一个完整的示例代码:
import 'package:flutter/material.dart';
import 'package:emoji_choose/emoji_choose.dart';
void main() => runApp(MainApp());
class MainApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: "测试",
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("表情选择测试"),
),
body: MainPage(),
),
);
}
}
class MainPage extends StatefulWidget {
[@override](/user/override)
MainPageState createState() => new MainPageState();
}
class MainPageState extends State<MainPage> {
[@override](/user/override)
Widget build(BuildContext context) {
// 返回一个 EmojiChoose 组件
return EmojiChoose(
rows: 3, // 表情行数
columns: 7, // 每行表情数量
buttonMode: ButtonMode.MATERIAL, // 按钮模式
recommendKeywords: ["赛车", "马"], // 推荐关键词
numRecommended: 10, // 推荐表情数量
onEmojiSelected: (emoji, category) {
// 当选择表情时打印表情
print(emoji);
},
);
}
}
更多关于Flutter表情选择插件emoji_choose的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter表情选择插件emoji_choose的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter项目中使用emoji_choose
插件的一个示例。emoji_choose
是一个用于在Flutter应用中实现表情选择的插件。
首先,你需要在pubspec.yaml
文件中添加emoji_choose
依赖项:
dependencies:
flutter:
sdk: flutter
emoji_choose: ^最新版本号 # 请替换为当前最新版本号
然后,运行flutter pub get
来获取依赖项。
接下来,在你的Flutter项目中,你可以按照以下步骤使用emoji_choose
插件:
- 导入插件:
在你的Dart文件中导入emoji_choose
插件:
import 'package:emoji_choose/emoji_choose.dart';
- 使用EmojiChoose组件:
你可以在你的UI中使用EmojiChoose
组件来显示表情选择界面。以下是一个简单的示例:
import 'package:flutter/material.dart';
import 'package:emoji_choose/emoji_choose.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Emoji Choose Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String _selectedEmoji = '';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Emoji Choose Demo'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Selected Emoji: $_selectedEmoji',
style: TextStyle(fontSize: 24),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Choose an Emoji'),
content: SingleChildScrollView(
child: EmojiChoose(
onSelect: (emoji) {
Navigator.of(context).pop();
setState(() {
_selectedEmoji = emoji;
});
},
),
),
);
},
);
},
child: Text('Select Emoji'),
),
],
),
),
);
}
}
在这个示例中,我们创建了一个简单的Flutter应用,其中包含一个按钮,用于显示一个对话框,对话框中包含EmojiChoose
组件。当用户选择一个表情时,对话框关闭,并且选择的表情显示在屏幕上。
EmojiChoose
组件的onSelect
回调函数会在用户选择一个表情时被调用,并且会将选中的表情作为参数传递。在这个示例中,我们使用Navigator.of(context).pop()
来关闭对话框,并使用setState
来更新UI以显示选中的表情。
这样,你就可以在你的Flutter项目中使用emoji_choose
插件来选择表情了。