emoji_picker_flutter未显示

ldxq2e6h  于 2022-11-17  发布在  Flutter
关注(0)|答案(2)|浏览(212)

我遇到了一个问题。我想使用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,
      ),
    );
  }
}
f4t66c6m

f4t66c6m1#

您需要为emojiSelect设置height,如下所示:

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

nsc4cvqm2#

所以当你试图运行你的代码时会显示多个错误。如果你滚动到顶部,会有很多指示器表明视图的高度有问题。
如果检查库中提供的the example,可以看到作者用SizedBox Package 了EmojiPicker。
如果执行类似于以下操作:child: SizedBox(height: 250, child: EmojiPicker(...),)应该会有帮助。

相关问题