Flutter表情选择器插件flutter_emoji_picker的使用

Flutter Emoji picker 使得在不同平台上轻松选择表情符号变得更加简单。

使用

导入包

import 'package:flutter_emoji_picker/flutter_emoji_picker.dart';

包装你的MaterialApp以使用EmojiProvider

EmojiProvider(
  child: MaterialApp(
    title: 'Flutter Demo',
    home: Scaffold(
      body: ...yourcode 
    ),
  ),
);

示例

我们可以使用三种方式来选择或显示表情选择器：

对话框选项

EmojiButton(
  emojiPickerViewConfiguration: EmojiPickerViewConfiguration(
    viewType: ViewType.dialog,
    onEmojiSelected: (String emoji) {
      print('表情选择: $emoji');
    },
  ),
  child: const Text('点击我'),
),

底部弹出框选项

EmojiButton(
  emojiPickerViewConfiguration: EmojiPickerViewConfiguration(
    viewType: ViewType.bottomsheet,
    onEmojiSelected: (String emoji) {
      print('表情选择: $emoji');
    },
  ),
  child: const Text('点击我'),
),

屏幕选项

此选项为选择表情符号提供了全屏界面。

IconButton(
  onPressed: () {
    Navigator.push(
        context,
        MaterialPageRoute(
            builder: (ctx) {
                return EmojiListView(
                    currentHoveredEmoji: ValueNotifier(''), // 可选，仅在非移动平台使用
                    contentPadding: const EdgeInsets.only(left: 20, right: 40),
                    appBar: SliverAppBar(
                      leading: IconButton(
                        icon: const Icon(Icons.arrow_back),
                        onPressed: () {
                          Navigator.pop(ctx);
                        },
                      ),
                    ),
                    configuration: EmojiListViewConfiguration(onEmojiSelected: (String emoji) {
                        print('表情选择: $emoji');
                    }),
                    searchBarConfiguration: EmojiPickerSearchFieldConfiguration(showField: false),
                );
            },
        ),
    );
  },
  icon: const Text('😀'),
)

社区支持

如果您有任何建议或问题，请随时在此处提交一个 issue。

如果您希望贡献，请随时创建一个 PR。

以下是一个完整的示例代码，展示了如何在应用中集成表情选择器。

完整示例代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_emoji_picker/flutter_emoji_picker.dart';

void main() {
  runApp(const MyApp());
}

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

  // 这个小部件是你的应用的根节点。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const EmojiProvider(
      child: MaterialApp(
        title: 'Flutter Demo',
        themeMode: ThemeMode.dark,
        home: MyHomePage(title: '表情选择器'),
      ),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  final ValueNotifier<String?> _currentHoverNotifier = ValueNotifier('');

  [@override](/user/override)
  void dispose() {
    _currentHoverNotifier.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Row(
              children: [
                Container(
                  alignment: Alignment.center,
                  child: EmojiButton(
                    emojiPickerViewConfiguration: EmojiPickerViewConfiguration(
                      viewType: ViewType.bottomsheet,
                      onEmojiSelected: (emoji) {},
                    ),
                    child: const Icon(
                      CupertinoIcons.arrow_down,
                    ),
                  ),
                ),
                const SizedBox(width: 10),
                Container(
                  alignment: Alignment.center,
                  child: EmojiButton(
                    emojiPickerViewConfiguration: EmojiPickerViewConfiguration(
                      viewType: ViewType.dialog,
                      onEmojiSelected: (emoji) {},
                    ),
                    child: const Icon(
                      Icons.emoji_flags,
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}