如何在Flutter中打开表情符号键盘 [英] How to open emoji keyboard in flutter

问题描述

我正在创建一个聊天应用程序，我想在其中打开表情符号键盘，当用户单击表情符号图标时，它将打开表情符号键盘。这是图片，我想点击左侧表情符号图标打开表情符号键盘。

解决方案

使用

  import'package：emoji_picker / emoji_picker.dart'; 
导入的 package：flutter / material.dart； 
 
 void main（）=> runApp（MainApp（））; 
 
类MainApp扩展了StatelessWidget {
 @override 
 Widget build（BuildContext context）{
 return MaterialApp（
 title： Test，
 debugShowCheckedModeBanner：否，
主页：Scaffold（
 appBar：AppBar（
标题：Text（ Emoji Picker Test），
），
正文：MainPage（ ），
），
）； 
} 
} 
 
类MainPage扩展了StatefulWidget {
 @override 
 MainPageState createState（）=>新的MainPageState（）; 
} 
 
类MainPageState扩展了State< MainPage> {
 bool isShowSticker; 
 
 @override 
 void initState（）{
 super.initState（）; 
 isShowSticker = false; 
} 
 
 Future< bool> onBackPress（）{
 if（isShowSticker）{
 setState（（）{
 isShowSticker = false; 
}）; 
} else {
 Navigator.pop（context）; 
} 
 
返回Future.value（false）; 
} 
 
 @override 
 Widget build（BuildContext context）{
 return WillPopScope（
 child：Stack（
 children：< Widget> ; [
 Column（
 children：< Widget> [
 //您的列表在此处
 
 //输入内容
 buildInput（），
 
 //贴纸
（isShowSticker？buildSticker（）：Container（）），
]，
），
]，
）， 
 onWillPop：onBackPress，
）; 
} 
 
小部件buildInput（）{
 return Container（
 child：Row（
 children：< Widget> [
 //按钮发送图像
材质（
子级：新Container（
保证金：新EdgeInsets.symmetric（水平：1.0），
子级：新IconButton（
图标：新Icon（Icons.image），
 onPressed：（）{}，
颜色：Colors.blueGrey，
，
），
颜色：Colors.white， 
），
材质（
子级：新Container（
保证金：新EdgeInsets.symmetric（水平：1.0），
子级：new IconButton（
图标：new Icon（Icons.face），
 onPressed：（）{
 setState（（）{
 isShowSticker =！isShowSticker; 
}）; 
}， 
 color：Colors.blueGrey，
），
），
 color：Colors.white，
），
 
 //编辑文字
灵活（
子项：容器（
子项：TextField（
样式：TextStyle（颜色：Colors.blueGrey，fontSize：15.0）），
装饰：InputDecoration.collapsed（
 hintText：'输入您的消息...'，
 hintStyle：TextStyle（color：Colors.blueGrey），
），
），
），
） ，
 
 //按钮发送消息
 Material（
 child：new Container（
 margin：new EdgeInsets.symmetric（horizo​​ntal：8.0），
 child ：new IconButton（
 icon：new Icon（Icons.send），
 onPressed：（）{}，
 color：Colors.blueGrey，
），
）： ，
颜色：Colors.white，
），
]，
 ），
宽度：double.infinity，
高度：50.0，
装饰：新BoxDecoration（
边框：新Border（
顶部：新BorderSide（颜色：颜色.blueGrey，宽度：0.5）），
颜色：Colors.white），
）; 
} 
 
小部件buildSticker（）{
返回EmojiPicker（
行：3，
列：7，
 buttonMode：ButtonMode.MATERIAL ，
推荐关键字：[ racing， horse]，
 numRecommended：10，
 onEmojiSelected：（emoji，category）{
 print（emoji）; 
 }，
）; 
} 
} 
  

I am creating one chatting application and there I want to open the emoji keyboard when the user clicks on the emoji icon it will open the emoji keyboard. here are the image and I want to open the emoji keyboard on click on the left side emoji icon.

解决方案

Use Emoji Picker for this, below is the complete example

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

void main() => runApp(MainApp());

class MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Test",
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Emoji Picker Test"),
        ),
        body: MainPage(),
      ),
    );
  }
}

class MainPage extends StatefulWidget {
  @override
  MainPageState createState() => new MainPageState();
}

class MainPageState extends State<MainPage> {
  bool isShowSticker;

  @override
  void initState() {
    super.initState();
    isShowSticker = false;
  }

  Future<bool> onBackPress() {
    if (isShowSticker) {
      setState(() {
        isShowSticker = false;
      });
    } else {
      Navigator.pop(context);
    }

    return Future.value(false);
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      child: Stack(
        children: <Widget>[
          Column(
            children: <Widget>[
              // your list goes here

              // Input content
              buildInput(),

              // Sticker
              (isShowSticker ? buildSticker() : Container()),
            ],
          ),
        ],
      ),
      onWillPop: onBackPress,
    );
  }

  Widget buildInput() {
    return Container(
      child: Row(
        children: <Widget>[
          // Button send image
          Material(
            child: new Container(
              margin: new EdgeInsets.symmetric(horizontal: 1.0),
              child: new IconButton(
                icon: new Icon(Icons.image),
                onPressed: () {},
                color: Colors.blueGrey,
              ),
            ),
            color: Colors.white,
          ),
          Material(
            child: new Container(
              margin: new EdgeInsets.symmetric(horizontal: 1.0),
              child: new IconButton(
                icon: new Icon(Icons.face),
                onPressed: () {
                  setState(() {
                    isShowSticker = !isShowSticker;
                  });
                },
                color: Colors.blueGrey,
              ),
            ),
            color: Colors.white,
          ),

          // Edit text
          Flexible(
            child: Container(
              child: TextField(
                style: TextStyle(color: Colors.blueGrey, fontSize: 15.0),
            decoration: InputDecoration.collapsed(
              hintText: 'Type your message...',
              hintStyle: TextStyle(color: Colors.blueGrey),
            ),
          ),
        ),
      ),

      // Button send message
      Material(
        child: new Container(
          margin: new EdgeInsets.symmetric(horizontal: 8.0),
          child: new IconButton(
            icon: new Icon(Icons.send),
            onPressed: () {},
            color: Colors.blueGrey,
          ),
        ),
        color: Colors.white,
      ),
    ],
  ),
  width: double.infinity,
  height: 50.0,
  decoration: new BoxDecoration(
      border: new Border(
          top: new BorderSide(color: Colors.blueGrey, width: 0.5)),
      color: Colors.white),
    );
  }

  Widget buildSticker() {
    return EmojiPicker(
  rows: 3,
  columns: 7,
  buttonMode: ButtonMode.MATERIAL,
  recommendKeywords: ["racing", "horse"],
  numRecommended: 10,
  onEmojiSelected: (emoji, category) {
    print(emoji);
  },
    );
  }
}

这篇关于如何在Flutter中打开表情符号键盘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！