I'm new to flutter and creating a chat app similar to WhatsApp. I'm getting an overflow near the chat box when I implement the record button icon next to send Icon. how to get rid of this overflow. as I guess chat box width need to be decrease. not sure. how to overcome this. appreciate your help on this.

Container(
              
                  height: 60,
                  alignment: Alignment.center,
                  child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        SizedBox(
                          width: size.width - 55,
                          child: Card(
                            margin:
                            const EdgeInsets.only(left: 2, right: 2, bottom: 8),
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(25)),
                            child: TextField(
                              focusNode: forcusNode,
                              controller: _message,
                              keyboardType: TextInputType.multiline,
                              maxLines: 5,
                              minLines: 1,
                              textAlignVertical: TextAlignVertical.center,
                              decoration: InputDecoration(
                                border: InputBorder.none,
                                prefixIcon: IconButton(
                                    onPressed: () {
                                      forcusNode.unfocus();
                                      forcusNode.canRequestFocus = false;
                                      show = !show;
                                    },
                                    icon: Icon(
                                      Icons.emoji_emotions,
                                      color: textGrey,
                                    )),
                                suffixIcon: Row(
                                    mainAxisSize: MainAxisSize.min,
                                    children: [
                                      IconButton(
                                        icon: Icon(
                                          Icons.attach_file,
                                          color: textGrey,
                                        ),
                                        onPressed: () {
                                          // getImage();
                                          showModalBottomSheet(
                                              context: context,
                                              builder: (builder) =>
                                                  bottomsheet());
                                        },
                                      ),
                                      IconButton(
                                          onPressed: () {},
                                          icon: Icon(
                                            Icons.camera_alt,
                                            color: textGrey,
                                          ))
                                    ]),
                                hintText: 'Type Message',
                              ),
                            ),
                          ),
                        ),
                        IconButton(
                            onPressed: () {
                              onSendMessage();
                              print(_message.text);
                            },
                            icon: Icon(
                              Icons.send,
                              color: mainGreen,
                            )),

                        Container(

                          height: 30,
                          width: 30,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            color: mainGreen,

                          ),

                          child: IconButton(

                              onPressed: () async {
                                await recorder.toggleRecording();
                                final isRecording = recorder.isRecording;
                                setState(() {});
                                if (isRecording) {
                                  timerController.startTimer();
                                } else {
                                  timerController.stoptTimer();
                                }
                              },
                              icon: Icon(icon, color: Colors.white,)

                          ),


                        ),

                      ]),
                ),

CodePudding user response：

This is an example, wrap all of them in Expanded and give them different flex values:

Container(

      height: 60,
      alignment: Alignment.center,
      child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Expanded(
              flex: 5,
              child: Card(
                margin:
                const EdgeInsets.only(left: 2, right: 2, bottom: 8),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(25)),
                child: TextField(
                  focusNode: forcusNode,
                  controller: _message,
                  keyboardType: TextInputType.multiline,
                  maxLines: 5,
                  minLines: 1,
                  textAlignVertical: TextAlignVertical.center,
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    prefixIcon: IconButton(
                        onPressed: () {
                          forcusNode.unfocus();
                          forcusNode.canRequestFocus = false;
                          show = !show;
                        },
                        icon: Icon(
                          Icons.emoji_emotions,
                          color: textGrey,
                        )),
                    suffixIcon: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          IconButton(
                            icon: Icon(
                              Icons.attach_file,
                              color: textGrey,
                            ),
                            onPressed: () {
                              // getImage();
                              showModalBottomSheet(
                                  context: context,
                                  builder: (builder) =>
                                      bottomsheet());
                            },
                          ),
                          IconButton(
                              onPressed: () {},
                              icon: Icon(
                                Icons.camera_alt,
                                color: textGrey,
                              ))
                        ]),
                    hintText: 'Type Message',
                  ),
                ),
              ),
            ),
            Expanded(
              flex: 1,
              child: IconButton(
                  onPressed: () {
                    onSendMessage();
                    print(_message.text);
                  },
                  icon: Icon(
                    Icons.send,
                    color: mainGreen,
                  )),
            ),
            Expanded(
              flex: 1,
              child: Container(

                height: 30,
                width: 30,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: mainGreen,

                ),

                child: IconButton(

                    onPressed: () async {
                      await recorder.toggleRecording();
                      final isRecording = recorder.isRecording;
                      setState(() {});
                      if (isRecording) {
                        timerController.startTimer();
                      } else {
                        timerController.stoptTimer();
                      }
                    },
                    icon: Icon(icon, color: Colors.white,)

                ),


              ),
            ),

          ]),
    ),