skip to Main Content

I make chat screen. There is no send message button near the text field in the design. How can I send a message from a text field by pressing a button on the system’s keyboard (like this green button on screen)? I use TextFormField widget for entering the text.

enter image description here

3

Answers


  1. To send a message from the TextFormField on the keyboard button press, you can make use of the onFieldSubmitted property in the TextFormField widget. This triggers when the user presses the keyboard action button (like the green "send" button). Here’s a basic approach:

    TextFormField(
      decoration: InputDecoration(
        hintText: "Type a message",
      ),
      onFieldSubmitted: (message) {
        if (message.isNotEmpty) {
          // Implement the logic to send the message here
          print("Message sent: $message");
        }
      },
      textInputAction: TextInputAction.send, // Sets the button to a 'send' icon
    )
    
    Login or Signup to reply.
  2. You can achieve the Send action by using TextInputAction.send

    TextFormField(
      textInputAction: TextInputAction.send,
      onFieldSubmitted: (value) {
        // Handle the action
      },
    )
    
    Login or Signup to reply.
  3. You can use this code below. You can change the Icon using TextInputAction.done. Use onFieldSubmitted: (value){} to get value

    TextFormField(
      maxLines: 1,
      style: Theme.of(context).textTheme.displaySmall!.copyWith(
            fontSize: 12.sp,
          ),
      textAlign: TextAlign.start,
      textInputAction: TextInputAction.done,
      onChanged: (value) {
        //Handle onchange
      },
      onFieldSubmitted: (value){
       //Handle when the keyboard done Icon is clicked
       },
      autovalidateMode: AutovalidateMode.onUserInteraction,
    );
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search