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,
      ),
    );
  }
}

CodePudding user response：

you need to set height for your emojiSelect like this:

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

CodePudding user response：

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.