emoji_picker_flutter is not showing - flutter

Question

I have a problem. I would like to use emoji_picker_flutter. This should be displayed under the TextInputField but is not displayed. What is the reason for this? Do I have to implement it differently or what is the reason? I tried to add the Config, but it did not change anything.
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

you need to set height for your emojiSelect like this:
SizedBox(height: 300, child: emojiSelect()),

Answer 2

So there are multiple errors shown when you try to run your code. If you scroll to the top there are a lot of indicators that something is wrong with the height of the view.
If you check the example provided within the library, you can see that the author wrapped the EmojiPicker with SizedBox.
If you do something similar to:
child: SizedBox(height: 250, child: EmojiPicker(...),)
it should help.