emoji_picker_flutter is not showing

Question

我有一个问题。我想用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,
),
);
}
}

Answer 1

您需要像这样为emojiSelect设置height:

SizedBox(height: 300, child: emojiSelect()),

Answer 2

因此，当您尝试运行代码时，会显示多个错误。如果你滚动到顶部，有很多迹象表明视图的高度有问题。

如果您检查库中提供的示例，您可以看到作者使用SizedBox包装了EmojiPicker。

如果你做类似的事情:child: SizedBox(height: 250, child: EmojiPicker(...),)这应该有帮助。