如何在Flutter中打开表情符号键盘

如何在Flutter中打开表情符号键盘

本文介绍了如何在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中打开表情符号键盘的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-31 20:06