Don't attach Emoji to TextEditingController until call setstate

[Zeinab-Kouhkan]

When use emoji picker , I need call setstate for attach emoji to textEditingController. this is my code:

import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
import 'package:flutter/material.dart';
import 'package:universal_io/io.dart';
import 'package:zireh/base/resourceful_state.dart';
import 'package:zireh/screens/chat/provider.dart';
import 'package:zireh/utils/image.dart';
import 'package:zireh/widgets/sized_box/space.dart';

import '../../themes/colors.dart';
import '../../themes/shapes.dart';
import 'bloc.dart';

class ChatInputArea extends StatefulWidget {
  const ChatInputArea(this.onSendMessageClickCallback, {super.key});

  final Function() onSendMessageClickCallback;

  @override
  State<ChatInputArea> createState() => _ChatInputAreaState();
}

class _ChatInputAreaState extends ResourcefulState<ChatInputArea> {
  late FocusNode inputFocusNode;
  late TextEditingController inputController;
  late ChatBloc bloc;
  late bool enableSendButton;
  late ScrollController _scrollController;

  @override
  void initState() {
    super.initState();
    inputFocusNode = FocusNode();
    inputController = TextEditingController();
    _scrollController = ScrollController();
  }

  @override
  void dispose() {
    inputFocusNode.dispose();
    inputController.dispose();
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    bloc = ChatProvider.of(context);
    return Container(
        decoration: AppDecorations.boxTopLarge.copyWith(
          color: AppColors.colors.onPrimary,
          boxShadow: [
            BoxShadow(
              color: AppColors.colors.shadowChatInputBox,
              // Equivalent to #0000001A
              offset: const Offset(0, 5),
              // x and y offsets
              blurRadius: 30,
              // Blur radius
              spreadRadius: 0, // Spread radius
            ),
          ],
        ),
        margin: EdgeInsets.zero,
        padding: EdgeInsets.symmetric(vertical: 0.5.h),
        child: Column(
          children: [inputRowData(), emoji()],
        ));
  }

  Widget inputRowData() {
    return inputField();
  }

  Widget inputField() {
    return TextField(
      onChanged: (text) {

        bloc.onInputTextChanged(text);
      },
      onTap: () => bloc.onEmojiClick(showEmoji: false),
      controller: inputController,
      focusNode: inputFocusNode,
      textAlignVertical: TextAlignVertical.top,
      keyboardType: TextInputType.multiline,
      cursorColor: AppColors.colors.secondary,
      expands: false,
      minLines: 1,
      maxLines: null,
      decoration: InputDecoration(
          filled: true,
          fillColor: AppColors.colors.scaffold,
          labelText: intl.jotDownYourMessage,
          contentPadding: EdgeInsets.symmetric(horizontal: 4.w, vertical: 2.h),
          labelStyle: typography.bodySmall?.apply(
            color: AppColors.colors.subtitleText,
          ),
          isDense: true,
          floatingLabelBehavior: FloatingLabelBehavior.never,
          focusColor: AppColors.colors.onPrimary,
          focusedBorder: AppOutlineInputBorder.borderMild.copyWith(
            borderSide: BorderSide(color: AppColors.colors.onPrimary),
          ),
          enabledBorder: AppOutlineInputBorder.borderMild.copyWith(
            borderSide: BorderSide(color: AppColors.colors.onPrimary),
          ),
          prefixIcon: prefixButton(),
          suffixIcon: suffixButton(),
          suffixIconConstraints: BoxConstraints(maxWidth: 11.w),
          prefixIconConstraints: BoxConstraints(maxWidth: 20.w)),
      style: typography.titleMedium,
    );
  }

  Widget prefixButton() {
    return Padding(
      padding: EdgeInsets.only(right: 4.w),
      child: StreamBuilder<bool>(
          stream: bloc.sendButtonEnabled,
          builder: (context, snapshot) {
            return snapshot.data == true
                ? GestureDetector(
                    onTap: () {
                      inputController.clear();
                      bloc.onSendMessageClick();
                      widget.onSendMessageClickCallback();
                    },
                    //todo: If you intent to add recorder uncomment below code
                    /*        onLongPress: () {
                      bloc.record();
                      enableGlow = true;
                      setState(() {});
                    },
                    onLongPressUp: () {
                      enableGlow = false;
                      bloc.stopRecorder();
                      setState(() {});
                    },*/
                    child: ImageUtils.fromLocal(
                        'assets/icon/enable_send_button.svg',
                        width: 7.w),
                  )
                : Row(
                    children: [
                      GestureDetector(
                        onTap: () {
                          inputFocusNode.unfocus();
                          inputFocusNode.canRequestFocus = false;
                          bloc.onAttachmentClick();
                          Future.delayed(const Duration(milliseconds: 100), () {
                            inputFocusNode.canRequestFocus = true;
                          });
                        },
                        child: ImageUtils.fromLocal('assets/icon/attach1.svg',
                            width: 6.4.w, height: 6.4.w),
                      ),
                      Space(
                        width: 3.w,
                      ),
                      ImageUtils.fromLocal('assets/icon/mic1.svg',
                          width: 6.4.w, height: 6.4.w),
                    ],
                  );
          }),
    );
  }

  Widget suffixButton() {
    return Padding(
      padding: EdgeInsets.only(left: 4.w),
      child: StreamBuilder<bool>(
          stream: bloc.sendButtonEnabled,
          builder: (context, snapshot) {
            return snapshot.data != true
                ? ImageUtils.fromLocal('assets/icon/disable_send_button.svg',
                    width: 7.w)
                :  GestureDetector(
                    onTap: bloc.onEmojiClick,
                    child: StreamBuilder<bool>(
                        stream: bloc.showEmoji,
                        builder: (context, snapshot) {
                          return snapshot.data != true
                              ? ImageUtils.fromLocal('assets/icon/emoji.svg',
                                  width: 6.4.w, height: 6.4.w)
                              : ImageUtils.fromLocal(
                                  'assets/icon/close_circle_label.svg',
                                  width: 6.4.w,
                                  height: 6.4.w);
                        }),
                  ) ;
          }),
    );
  }

  Widget emoji() {
    return StreamBuilder<bool>(
        stream: bloc.showEmoji,
        builder: (context, snapshot) {
          if (snapshot.data == true) {
            FocusScope.of(context).unfocus();
          }
          return Offstage(
            offstage: snapshot.data != true,
            child: EmojiPicker(
              textEditingController: inputController,
              scrollController: _scrollController,
              config: Config(
                height: 26.h,
                checkPlatformCompatibility: true,
                emojiViewConfig: EmojiViewConfig(
                  gridPadding:
                      EdgeInsets.symmetric(horizontal: 2.w, vertical: 1.h),
                  emojiSizeMax: 28 * (Platform.isIOS ? 1 : 0.8),
                ),
                swapCategoryAndBottomBar: true,
                skinToneConfig:
                    SkinToneConfig(indicatorColor: AppColors.colors.secondary),
                categoryViewConfig: CategoryViewConfig(
                    iconColorSelected: AppColors.colors.secondary,
                    indicatorColor: AppColors.colors.secondary),
                bottomActionBarConfig: BottomActionBarConfig(
                    enabled: false,
                    showBackspaceButton: true,
                    backgroundColor: Colors.transparent,
                    buttonColor: AppColors.colors.secondary),
                searchViewConfig: const SearchViewConfig(),
              ),
            ),
          );
        });
  }
}