defaultTypingArea function

Widget defaultTypingArea(bool showMicButton, bool showImagePicker)

Implementation

Widget defaultTypingArea(bool showMicButton, bool showImagePicker) {
  return Consumer<ChatViewModel>(
    builder: (context, model, child) {
      return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
        //margin: EdgeInsets.only(bottom: 32, left: 32),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Expanded(
                  child: Container(
                    padding:
                        const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                    decoration: BoxDecoration(
                      color: Colors.grey.withOpacity(0.2),
                      borderRadius: BorderRadius.circular(40),
                    ),
                    child: Row(
                      children: [
                        if (model.micButtonPressed)
                          GestureDetector(
                            onTap: model.cancelVoiceMessage,
                            child: Container(
                              padding:
                                  const EdgeInsets.symmetric(horizontal: 6),
                              child: const Icon(
                                Icons.delete,
                                color: Colors.red,
                                size: 27,
                              ),
                            ),
                          )
                        else
                          IconButton(
                            onPressed: () {
                              FocusScope.of(context).unfocus();
                              model.showEmojiPicker = !model.showEmojiPicker;
                              model.update();
                            },
                            icon: Icon(
                              Icons.emoji_emotions_outlined,
                              color: !model.showEmojiPicker
                                  ? const Color.fromARGB(255, 121, 120, 120)
                                  : Colors.blue,
                            ),
                          ),
                        const SizedBox(width: 10),
                        Expanded(
                          child: model.micButtonPressed
                              ? AudioWaveforms(
                                  recorderController: model.recorderController,
                                  size: Size(
                                      MediaQuery.of(context).size.width * 0.55,
                                      40),
                                  waveStyle: WaveStyle(
                                    extendWaveform: true,
                                    backgroundColor: Colors.black,
                                    middleLineColor: Colors.transparent,
                                    durationLinesColor:
                                        Theme.of(context).colorScheme.primary,
                                  ),
                                )
                              : TextField(
                                  onTap: () {
                                    model.showEmojiPicker = false;
                                    model.update();
                                  },
                                  style: const TextStyle(
                                    fontSize: 16,
                                  ),
                                  controller: model.messageController,
                                  maxLines: 4,
                                  minLines: 1,
                                  decoration: const InputDecoration(
                                    border: InputBorder.none,
                                    hintText: "Type a message",
                                  ),
                                  onChanged: (value) {
                                    if (value.isNotEmpty) {
                                      model.showSendButton = true;
                                    } else {
                                      model.showSendButton = false;
                                    }
                                    model.update();
                                  },
                                ),
                        ),
                        if (showImagePicker)
                          IconButton(
                            onPressed: () async {
                              FocusScope.of(context).unfocus();
                              model.showEmojiPicker = false;
                              File? image = await model.pickMedia();
                              if (image != null) {
                                model.sendMedia(image);
                              }
                              model.update();
                            },
                            icon: const Icon(
                              Icons.camera_alt,
                              color: Color.fromARGB(255, 121, 120, 120),
                            ),
                          ),
                      ],
                    ),
                  ),
                ),
                const SizedBox(width: 10),
                Visibility(
                  visible: model.showSendButton,
                  child: InkWell(
                    onTap: model.sendTextMessage,
                    child: Container(
                      padding: const EdgeInsets.all(12),
                      decoration: const BoxDecoration(
                        color: Colors.blue,
                        shape: BoxShape.circle,
                      ),
                      child: const Icon(
                        Icons.send,
                        color: Colors.white,
                      ),
                    ),
                  ),
                  replacement: !showMicButton
                      ? const SizedBox.shrink()
                      : model.micButtonPressed
                          ? GestureDetector(
                              onTap: model.sendVoiceMessage,
                              child: CustomAnimation(
                                child: Container(
                                  padding: const EdgeInsets.all(8),
                                  decoration: const BoxDecoration(
                                    color: Colors.blue,
                                    shape: BoxShape.circle,
                                  ),
                                  child: const Icon(
                                    Icons.send,
                                    color: Colors.white,
                                  ),
                                ),
                              ),
                            )
                          : GestureDetector(
                              onLongPress: model.startRecording,
                              child: Container(
                                padding: const EdgeInsets.all(12),
                                decoration: const BoxDecoration(
                                  color: Colors.blue,
                                  shape: BoxShape.circle,
                                ),
                                child: const Icon(
                                  Icons.mic,
                                  color: Colors.white,
                                ),
                              ),
                            ),
                ),
              ],
            ),
            Offstage(
              offstage: !model.showEmojiPicker,
              child: Container(
                margin: const EdgeInsets.only(top: 10),
                height: 250,
                child: EmojiPickerSheet(
                  textEditingController: model.messageController,
                  model: model,
                ),
              ),
            ),
          ],
        ),
      );
    },
  );
}