Flutter表情选择插件flutter_emoji_mart的使用

Emoji Picker for Flutter

此插件灵感来源于emoji_mart

功能

自定义表情列表
支持表情搜索
支持表情分类
支持表情肤色选择

安装

在你的Flutter项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  emoji_mart: <latest_version>

在你的库中添加以下导入：

import 'package:emoji_mart/emoji_mart.dart';

使用方法

例如：

EmojiPicker(
  emojiData: [YOUR_EMOJI_DATA],
  onEmojiSelected: (emojiId, emoji) {
    // ...
  },
)

对于更多详细信息，请参考示例代码。

示例代码

import 'package:adaptive_theme/adaptive_theme.dart';
import 'package:emoji_mart/emoji_mart.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({
    super.key,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return AdaptiveTheme(
      light: ThemeData.light(
        useMaterial3: true,
      ),
      dark: ThemeData.dark(
        useMaterial3: true,
      ),
      initial: AdaptiveThemeMode.light,
      builder: (theme, darkTheme) => MaterialApp(
        supportedLocales: const [Locale('en')],
        theme: theme,
        darkTheme: darkTheme,
        debugShowCheckedModeBanner: false,
        home: const MyHomePage(title: '🏪 Emoji Mart'),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

// emojiId, emoji
typedef EmojiNotifier = ValueNotifier<(String, String)>;

class _MyHomePageState extends State<MyHomePage> {
  late final Future<EmojiData> emojiData;

  final EmojiNotifier onHoverEmojiNotifier = EmojiNotifier(('', ''));

  final EmojiNotifier selectedEmojiNotifier = EmojiNotifier(('', ''));

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

    emojiData = EmojiData.builtIn();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FutureBuilder<EmojiData>(
              future: emojiData,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Container(
                    padding: const EdgeInsets.all(20),
                    decoration: BoxDecoration(
                      color: Theme.of(context).colorScheme.surface,
                      borderRadius: BorderRadius.circular(10),
                      boxShadow: [
                        BoxShadow(
                          color: Theme.of(context).colorScheme.shadow,
                          blurRadius: 2,
                        ),
                      ],
                    ),
                    child: SizedBox(
                      width: 320,
                      height: 400,
                      child: EmojiPicker(
                        emojiData: snapshot.data!,
                        configuration: const EmojiPickerConfiguration(
                          emojiSize: 28,
                          showSectionHeader: false,
                          perLine: 9,
                          defaultSkinTone: EmojiSkinTone.dark,
                        ),
                        itemBuilder: (context, emojiId, emoji, callback) {
                          return MouseRegion(
                            onHover: (_) {
                              onHoverEmojiNotifier.value = (emojiId, emoji);
                            },
                            child: EmojiItem(
                              onTap: () {
                                callback(emojiId, emoji);
                              },
                              emoji: emoji,
                              size: 28,
                            ),
                          );
                        },
                        onEmojiSelected: (emojiId, emoji) {
                          selectedEmojiNotifier.value = (emojiId, emoji);
                        },
                      ),
                    ),
                  );
                }
                return const CircularProgressIndicator();
              },
            ),
            const SizedBox(
              height: 30,
            ),
            ValueListenableBuilder<(String, String)>(
              valueListenable: onHoverEmojiNotifier,
              builder: (context, value, child) {
                return Text(
                  'You\'re hovering on: ${value.$1} ${value.$2}',
                  style: Theme.of(context).textTheme.bodyLarge,
                );
              },
            ),
            const SizedBox(
              height: 15,
            ),
            ValueListenableBuilder<(String, String)>(
              valueListenable: selectedEmojiNotifier,
              builder: (context, value, child) {
                return Text(
                  'You have picked the emoji: ${value.$1} ${value.$2}',
                  style: Theme.of(context).textTheme.bodyLarge,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.color_lens_outlined),
        onPressed: () {
          AdaptiveTheme.of(context).toggleThemeMode();
        },
      ),
    );
  }
}

更多关于Flutter表情选择插件flutter_emoji_mart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

itying888 1楼•2 天前

更多关于Flutter表情选择插件flutter_emoji_mart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter项目中使用flutter_emoji_mart插件来实现表情选择的代码示例。

首先，确保你已经在pubspec.yaml文件中添加了flutter_emoji_mart依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_emoji_mart: ^1.0.0  # 请检查最新版本号

然后运行flutter pub get来安装依赖。

接下来，在你的Flutter项目中，你可以按照以下步骤使用flutter_emoji_mart：

导入必要的包：

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

创建一个Emoji选择页面：

class EmojiPickerPage extends StatefulWidget {
  @override
  _EmojiPickerPageState createState() => _EmojiPickerPageState();
}

class _EmojiPickerPageState extends State<EmojiPickerPage> {
  late EmojiPickerController controller;
  String? selectedEmoji;

  @override
  void initState() {
    super.initState();
    controller = EmojiPickerController();
    controller.addListener(() {
      setState(() {
        selectedEmoji = controller.selectedEmoji?.emoji;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Emoji Picker'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: EmojiPicker(
              controller: controller,
              emojiSize: 32.0,
              initCategory: Category.RECENT,
              color: Colors.black,
              backgroundColor: Colors.white,
              indicatorColor: Colors.blue,
              rowIndicatorColor: Colors.blueAccent,
            ),
          ),
          Text(
            selectedEmoji ?? 'No emoji selected',
            style: TextStyle(fontSize: 24),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

在你的应用中导航到这个页面：

假设你有一个主页面，你可以添加一个按钮来导航到Emoji选择页面：

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

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Emoji Mart Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => EmojiPickerPage()),
            );
          },
          child: Text('Pick an Emoji'),
        ),
      ),
    );
  }
}

运行你的应用：

确保一切设置正确后，运行你的Flutter应用。你应该会看到一个主页面，点击按钮后会导航到Emoji选择页面，选择表情后，底部会显示你选择的表情。

这个示例展示了如何使用flutter_emoji_mart插件来创建一个简单的表情选择器，并且监听用户选择的变化。你可以根据需要进一步自定义和扩展这个示例。