Send Message Form Field - Managing Suffix Icons

Question

I'm building a Form Field in Flutter for Sending message just like we have in WhatsApp/Insta etc. The Form looks like this.

I've added prefix Icon that emoji emotions, and Also have added one suffix Icon. that is voice note. It looks like this:

But the problem is how can we add 3 icons as suffix? That's the question.

The way I tried : There's a property in TextFormField or FormField suffix it accepts Widget and the suffixIcon also accepts Widget. I simply added a Row and added three Icons and then give them some padding for good alignment, by doing this I just got the thing I desired to get.

But There's a Bug :( . Now I'm not able to input anything in this field. I've searched out about this how can we build this but not found any good solution for this If I'm doing something wrong here please guide me I'd be thankful :).

Answer 1

Try below code.

  TextFormField(
          decoration: InputDecoration(
            border: OutlineInputBorder(),
            hintText: 'Type Message Here...',
            hintStyle: TextStyle(
              color: Colors.black12,
            ),
            prefixIcon: Icon(Icons.emoji_emotions),
            suffixIcon: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(3.0),
                  child: InkWell(
                    onTap: () {
                      print('Attachment Icon Pressed');
                    },
                    child: Icon(Icons.attachment),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(3.0),
                  child: InkWell(
                    onTap: () {
                      print('Camera Icon Pressed');
                    },
                    child: Icon(Icons.camera_alt),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(3.0),
                  child: InkWell(
                    onTap: () {
                      print('Mic Icon Pressed');
                    },
                    child: Icon(Icons.mic),
                  ),
                ),
              ],
            ),
          ),
        ),

Result Screen without Focused ->

Result Screen with Focused & Input Text ->