我遇到了一个问题。我想使用emoji_picker_flutter。它应该显示在TextInputField下面,但是没有显示。这是什么原因?我必须以不同的方式实现它吗?或者是什么原因?我尝试添加Config
,但是它没有改变任何东西。
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
import 'package:flutter/foundation.dart' as foundation;
import '../Model/ChatModel.dart';
class IndidivdualPage extends StatefulWidget {
final ChatModel chatModel;
const IndidivdualPage({Key? key, required this.chatModel}) : super(key: key);
@override
_IndividualPageState createState() => _IndividualPageState();
}
class _IndividualPageState extends State<IndidivdualPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
appBar: AppBar(
leadingWidth: 70,
titleSpacing: 0,
leading: InkWell(
onTap: () {
Navigator.pop(context);
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.arrow_back, size: 24,),
CircleAvatar(
child: SvgPicture.asset(widget.chatModel.isGroup ? "assets/account-group.svg" : "assets/account.svg",
color: Colors.white, height: 34, width: 34),
radius: 20,
backgroundColor: Colors.lightBlue,
),
],
),
),
title: InkWell(
onTap: () {},
child: Container(
margin: EdgeInsets.all(6),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(widget.chatModel.name, style: TextStyle(
fontSize: 18.5,
fontWeight: FontWeight.bold
),),
Text("last seend today at 15:03", style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.normal
),)
],
),
),
),
actions: [
IconButton(onPressed: () {}, icon: Icon(Icons.videocam)),
IconButton(onPressed: () {}, icon: Icon(Icons.call)),
PopupMenuButton<String>(
onSelected: (value){
print(value);
},
itemBuilder: (BuildContext context){
return [
PopupMenuItem(child: Text("View Contact"), value:"View Contact",),
];
})
],
),
body: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Stack(
children: [
ListView(),
Align(
alignment: Alignment.bottomCenter,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Row(
children: [
Container(
width: MediaQuery.of(context).size.width - 60,
child:
Card(
margin: EdgeInsets.only(left: 2, right: 2, bottom: 8),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
child: TextFormField(
textAlignVertical: TextAlignVertical.center,
keyboardType: TextInputType.multiline,
maxLines: 5,
minLines: 1,
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Send a message",
prefixIcon: IconButton(icon: Icon(Icons.emoji_emotions), onPressed: () { },),
suffixIcon: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(onPressed: () {}, icon: Icon(Icons.attach_file)),
IconButton(onPressed: () {}, icon: Icon(Icons.camera_alt)),
],
),
contentPadding: EdgeInsets.all(5),
),
),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 8, right: 5, left: 2),
child: CircleAvatar(
radius: 25,
backgroundColor: Colors.lightBlue,
child: IconButton(icon: Icon(Icons.mic),color: Colors.white, onPressed: () {},),
),
),
],
),
emojiSelect(),
],
)
)
],
),
),
);
}
Widget emojiSelect() {
return EmojiPicker(
onEmojiSelected: (Category? category, Emoji? emoji) {
print(emoji);
},
onBackspacePressed: () {
// Do something when the user taps the backspace button (optional)
}, // pass here the same [TextEditingController] that is connected to your input field, usually a [TextFormField]
config: Config(
columns: 7,
emojiSizeMax: 32 * (Platform.isIOS ? 1.30 : 1.0), // Issue: https://github.com/flutter/flutter/issues/28894
verticalSpacing: 0,
horizontalSpacing: 0,
gridPadding: EdgeInsets.zero,
initCategory: Category.RECENT,
bgColor: Color(0xFFF2F2F2),
indicatorColor: Colors.blue,
iconColor: Colors.grey,
iconColorSelected: Colors.blue,
backspaceColor: Colors.blue,
skinToneDialogBgColor: Colors.white,
skinToneIndicatorColor: Colors.grey,
enableSkinTones: true,
showRecentsTab: true,
recentsLimit: 28,
noRecents: const Text(
'No Recents',
style: TextStyle(fontSize: 20, color: Colors.black26),
textAlign: TextAlign.center,
), // Needs to be const Widget
loadingIndicator: const SizedBox.shrink(), // Needs to be const Widget
tabIndicatorAnimDuration: kTabScrollDuration,
categoryIcons: const CategoryIcons(),
buttonMode: ButtonMode.MATERIAL,
),
);
}
}
2条答案
按热度按时间f4t66c6m1#
您需要为
emojiSelect
设置height
,如下所示:nsc4cvqm2#
所以当你试图运行你的代码时会显示多个错误。如果你滚动到顶部,会有很多指示器表明视图的高度有问题。
如果检查库中提供的the example,可以看到作者用
SizedBox
Package 了EmojiPicker。如果执行类似于以下操作:
child: SizedBox(height: 250, child: EmojiPicker(...),)
应该会有帮助。