Flutter表情图标插件fluentui_emoji

Flutter表情图标插件fluentui_emoji_icon的使用

fluentui_emoji_icon包

这个包是一个Flutter小部件，允许你使用由微软开发的FluentUi Emoji作为SVG图像显示小部件。最初，它是为了表情符号设计的，但这个包提供了显示SVG图像的小部件，这些图像是表情符号的源材料。

示例应用截图

使用方法

导入包

import 'package:fluentui_emoji_icon/fluentui_emoji_icon.dart';

设置FluentUiEmojiIcon小部件

FluentUiEmojiIcon(
   fl: Fluents.flAirplane, // 指定表情图标
   w: 50, // 宽度
   h: 50, // 高度
)

全部完成。

支持的FluentUiEmojis

微软提供了1545个表情符号。这个包提供了1544个表情图标。

FluentUiEmojiIcon网络搜索工具

请等待…

完整示例Demo

以下是一个完整的示例代码，展示如何在Flutter应用中使用fluentui_emoji_icon包：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('FluentUI Emoji Icon'), // 应用栏标题
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(mainAxisAlignment: MainAxisAlignment.center, children: const [
              FluentUiEmojiIcon( // 笑脸表情
                w: 100, // 宽度
                h: 100, // 高度
                fl: Fluents.flGrinningFace, // 表情类型
              ),
              FluentUiEmojiIcon( // 眯眼笑脸表情
                w: 100,
                h: 100,
                fl: Fluents.flGrinningSquintingFace,
              ),
              FluentUiEmojiIcon( // 心形眼睛笑脸表情
                w: 100,
                h: 100,
                fl: Fluents.flSmilingFaceWithHearts,
              ),
              FluentUiEmojiIcon( // 心形眼睛笑脸表情（重复）
                w: 100,
                h: 100,
                fl: Fluents.flSmilingFaceWithHearts,
              ),
              FluentUiEmojiIcon( // 卤素光环笑脸表情
                w: 100,
                h: 100,
                fl: Fluents.flSmilingFaceWithHalo,
              ),
              FluentUiEmojiIcon( // 墨镜笑脸表情
                w: 100,
                h: 100,
                fl: Fluents.flSmilingFaceWithSunglasses,
              ),
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: const [
              FluentUiEmojiIcon( // 挥手表情
                w: 100,
                h: 100,
                fl: Fluents.flWavingHand,
              ),
              FluentUiEmojiIcon( // 张开手指的手表情
                w: 100,
                h: 100,
                fl: Fluents.flHandWithFingersSplayed,
              ),
              FluentUiEmojiIcon( // 举起的手表情
                w: 100,
                h: 100,
                fl: Fluents.flRaisedHand,
              ),
              FluentUiEmojiIcon( // 瓦肯礼手势表情
                w: 100,
                h: 100,
                fl: Fluents.flVulcanSalute,
              ),
              FluentUiEmojiIcon( // OK手势表情
                w: 100,
                h: 100,
                fl: Fluents.flOkHand,
              ),
              FluentUiEmojiIcon( // 大拇指向上手势表情
                w: 100,
                h: 100,
                fl: Fluents.flThumbsUp,
              ),
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: const [
              FluentUiEmojiIcon( // 猴子脸部表情
                w: 100,
                h: 100,
                fl: Fluents.flMonkeyFace,
              ),
              FluentUiEmojiIcon( // 老虎脸部表情
                w: 100,
                h: 100,
                fl: Fluents.flTigerFace,
              ),
              FluentUiEmojiIcon( // 马脸部表情
                w: 100,
                h: 100,
                fl: Fluents.flHorseFace,
              ),
              FluentUiEmojiIcon( // 猪脸部表情
                w: 100,
                h: 100,
                fl: Fluents.flPigFace,
              ),
              FluentUiEmojiIcon( // 狗脸部表情
                w: 100,
                h: 100,
                fl: Fluents.flDogFace,
              ),
              FluentUiEmojiIcon( // 猫脸部表情
                w: 100,
                h: 100,
                fl: Fluents.flCatFace,
              ),
            ]),
          ],
        ),
      ),
    );
  }
}

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

htzhanglong 1楼•1 天前

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

当然，以下是如何在Flutter项目中使用fluentui_emoji_icon插件的示例代码。首先，你需要确保你的Flutter环境已经设置好，并且已经添加了这个插件到你的pubspec.yaml文件中。

步骤 1: 添加插件到 `pubspec.yaml`

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

dependencies:
  flutter:
    sdk: flutter
  fluentui_emoji_icon: ^最新版本号  # 请替换为实际的最新版本号

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

步骤 2: 导入插件并使用

在你的Flutter项目的Dart文件中（例如main.dart），导入fluentui_emoji_icon插件并使用它。

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

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

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

class EmojiIconScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FluentUI Emoji Icon Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 使用 FluentUIEmojiIcon 组件显示表情图标
            FluentUIEmojiIcon(
              emoji: '😊',  // 你可以替换为任何支持的emoji字符
              size: 48,  // 图标大小
            ),
            SizedBox(height: 20),
            FluentUIEmojiIcon(
              emoji: '😍',
              size: 64,
              color: Colors.red,  // 你可以指定颜色
            ),
            SizedBox(height: 20),
            FluentUIEmojiIcon(
              emoji: '😎',
              size: 96,
              color: Colors.blueAccent,
            ),
          ],
        ),
      ),
    );
  }
}

解释

依赖添加：在pubspec.yaml文件中添加fluentui_emoji_icon依赖。
导入插件：在Dart文件中导入fluentui_emoji_icon包。
使用组件：使用FluentUIEmojiIcon组件来显示表情图标。你可以通过emoji属性来指定要显示的emoji字符，通过size属性来设置图标的大小，通过color属性来设置图标的颜色。

这个示例展示了如何在Flutter项目中集成并使用fluentui_emoji_icon插件来显示表情图标。你可以根据需要进一步自定义和扩展这个示例。

Flutter表情图标插件fluentui_emoji_icon的使用