Flutter表情弹窗插件emoji_alert的使用

Flutter表情弹窗插件emoji_alert的使用

插件简介

emoji_alert 是一个全新的、时尚的表情弹窗插件，提供了多种表情选择，简单易用且高度可定制。以下是该插件的主要功能和使用方法。

功能特性

• 单行基础弹窗：支持默认表情的简单弹窗。
• 动态添加小部件：不仅可以添加文本，还可以添加任何你想要的小部件。
• 按钮支持：可以添加带有点击事件处理的按钮。
• 显示行为选择：可以选择正常弹窗或底部弹出层（Bottom Sheet）。
• 多种表情选择：提供多种表情供选择。
• 动画效果：在弹窗显示时添加动画效果。

使用步骤

1. 添加依赖

在 pubspec.yaml 文件中添加 emoji_alert 依赖：

dependencies:
  emoji_alert: ^1.1.0

或者直接引用 GitHub 仓库：

dependencies:
  emoji_alert:
    git: https://github.com/koukibadr/Emoji_Alert.git

2. 参数说明

3. 示例代码

简单弹窗示例

EmojiAlert(
  description: Column(
    children: [
      Text("Simple Example of the popup"),
      Text("with minimum attributes"),
    ],
  ),
).displayAlert(context);

自定义小部件弹窗示例

EmojiAlert(
  alertTitle: Text("Joyful Alert", style: TextStyle(fontWeight: FontWeight.bold)),
  description: Column(
    children: [
      Text("You can add also any widget"),
      Container(
        width: 200,
        child: TextField(
          decoration: InputDecoration(hintText: "Input field example"),
        ),
      ),
    ],
  ),
  cancelable: true,
  emojiType: EMOJI_TYPE.JOYFUL,
  height: 300,
).displayAlert(context);

带有主按钮的弹窗示例

EmojiAlert(
  alertTitle: Text("Angry Alert", style: TextStyle(fontWeight: FontWeight.bold)),
  description: Column(
    children: [
      Text("You can add a main button"),
    ],
  ),
  enableMainButton: true,
  mainButtonColor: Colors.red,
  onMainButtonPressed: () {
    print("Hello");
    Navigator.pop(context);
  },
  cancelable: false,
  emojiType: EMOJI_TYPE.ANGRY,
  height: 300,
).displayAlert(context);

底部弹出层示例

EmojiAlert(
  alertTitle: Text("Bottom Sheet Modal", style: TextStyle(fontWeight: FontWeight.bold)),
  description: Column(
    children: [
      Text(
        "And this is a bottom sheet modal with different Radius",
        style: TextStyle(color: Colors.blue),
        textAlign: TextAlign.center,
      ),
    ],
  ),
  enableMainButton: true,
  cornerRadiusType: CORNER_RADIUS_TYPES.TOP_ONLY,
  mainButtonColor: Colors.green,
  mainButtonText: Text("Save"),
  onMainButtonPressed: () {
    Navigator.pop(context);
  },
  cancelable: true,
  emojiType: EMOJI_TYPE.SMILE,
  width: 300,
  height: 300,
).displayBottomSheet(context);

带有动画效果的弹窗示例

EmojiAlert(
  description: Column(
    children: [
      Text("Simple Example with animation"),
      Text("This is a transition animation"),
    ],
  ),
  animationType: ANIMATION_TYPE.TRANSITION,
).displayAlert(context);

4. 完整示例Demo

以下是一个完整的示例代码，展示了如何在应用中使用 emoji_alert 插件：

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

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

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

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Simple example with minimum parameters"),
            ElevatedButton(
              onPressed: () {
                displayAlert(context);
              },
              child: Text("Happy Alert"),
            ),
            SizedBox(height: 20),
            Text("Alert with custom body widgets (textfield)"),
            ElevatedButton(
              onPressed: () {
                displayShockedAlert(context);
              },
              child: Text("Joyful Alert"),
            ),
            SizedBox(height: 20),
            Text("Alert with main button example with press handler"),
            ElevatedButton(
              onPressed: () {
                displayAngryAlert(context);
              },
              child: Text("Angry Alert"),
            ),
            SizedBox(height: 20),
            Text("Alert with multiple buttons example"),
            ElevatedButton(
              onPressed: () {
                displayCoolAlert(context);
              },
              child: Text("Multiple buttons Alert"),
            ),
            SizedBox(height: 20),
            Text("Emoji alert displayed as a bottom sheet modal"),
            ElevatedButton(
              onPressed: () {
                displayBottomSheetAlert(context);
              },
              child: Text("Bottom Sheet Alert"),
            ),
          ],
        ),
      ),
    );
  }

  void displayAlert(BuildContext context) {
    EmojiAlert(
      description: Column(
        children: [
          Text("Simple Example with animation"),
          Text("This is a transition animation"),
        ],
      ),
      animationType: ANIMATION_TYPE.TRANSITION,
    ).displayAlert(context);
  }

  void displayShockedAlert(BuildContext context) {
    EmojiAlert(
      alertTitle: Text("Joyful Alert", style: TextStyle(fontWeight: FontWeight.bold)),
      description: Column(
        children: [
          Text("You can add also any widget"),
          Container(
            width: 200,
            child: TextField(
              decoration: InputDecoration(hintText: "Input field example"),
            ),
          ),
        ],
      ),
      cancelable: true,
      emojiType: EMOJI_TYPE.JOYFUL,
      height: 300,
    ).displayAlert(context);
  }

  void displayAngryAlert(BuildContext context) {
    EmojiAlert(
      alertTitle: Text("Angry Alert", style: TextStyle(fontWeight: FontWeight.bold)),
      description: Column(
        children: [
          Text("You can add a main button"),
        ],
      ),
      enableMainButton: true,
      mainButtonColor: Colors.red,
      onMainButtonPressed: () {
        print("Hello");
        Navigator.pop(context);
      },
      cancelable: false,
      emojiType: EMOJI_TYPE.ANGRY,
      height: 300,
    ).displayAlert(context);
  }

  void displayCoolAlert(BuildContext context) {
    EmojiAlert(
      alertTitle: Text("Cool Alert", style: TextStyle(fontWeight: FontWeight.bold)),
      description: Column(
        children: [
          Text("You can add multiple buttons", style: TextStyle(color: Colors.blue)),
        ],
      ),
      enableMainButton: true,
      enableSecondaryButton: true,
      mainButtonColor: Colors.green,
      secondaryButtonColor: Colors.green,
      mainButtonText: Text("Save"),
      secondaryButtonText: Text("Discard"),
      cancelable: true,
      emojiType: EMOJI_TYPE.COOL,
      height: 300,
    ).displayAlert(context);
  }

  void displayBottomSheetAlert(BuildContext context) {
    EmojiAlert(
      alertTitle: Text("Bottom Sheet Modal", style: TextStyle(fontWeight: FontWeight.bold)),
      description: Column(
        children: [
          Text(
            "And this is a bottom sheet modal with different Radius",
            style: TextStyle(color: Colors.blue),
            textAlign: TextAlign.center,
          ),
        ],
      ),
      enableMainButton: true,
      cornerRadiusType: CORNER_RADIUS_TYPES.TOP_ONLY,
      mainButtonColor: Colors.green,
      mainButtonText: Text("Save"),
      onMainButtonPressed: () {
        Navigator.pop(context);
        displayAngryAlert(context);
      },
      cancelable: true,
      emojiType: EMOJI_TYPE.SMILE,
      width: 300,
      height: 300,
    ).displayBottomSheet(context);
  }
}