Flutter textfield set prefix icon alignment to bottom

Viewed 694

At the moment i try to build a chat bar.

Similar like this example:

enter image description here

My problem is, if i add some line text the icons are not on button.

My example:

enter image description here

I try to change align to button but it's not work.

Here my first example:

//chat bar
class BuildAppChatBar extends StatefulWidget {
  BuildAppChatBar();

  @override
  _BuildAppChatBar createState() => _BuildAppChatBar();
}

//chat bar
class _BuildAppChatBar extends State<BuildAppChatBar> {
  _BuildAppChatBar();

  TextEditingController _controller_text_field = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: Card(
            color: Colors.white60,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(36.0),
            ),
            child: TextField(
              //keyboardType: TextInputType.,
              //disable underline
              keyboardType: TextInputType.multiline,
              maxLines: null,
              decoration: new InputDecoration(
                  border: InputBorder.none,
                  focusedBorder: InputBorder.none,
                  enabledBorder: InputBorder.none,
                  errorBorder: InputBorder.none,
                  disabledBorder: InputBorder.none,

                  //emoji
                  //alignment: Alignment.bottomCenter,
                  prefixIcon: Padding(
                    padding: const EdgeInsets.only(
                        left: 0, top: 0, right: 0, bottom: 100),
                    child: IconButton(
                      icon: Icon(
                        Icons.tag_faces,
                        color: Colors.black45,
                      ),
                      onPressed: () {},
                    ),
                  ),

                  //attachment / camera
                  suffixIcon: Container(
                    width: MediaQuery.of(context).size.width * 0.26,
                    child: Row(
                      children: [
                        //attachment
                        IconButton(
                          onPressed: () {
                            print('add button pressed');
                            _loadLocalFile();
                          },
                          icon: Icon(
                            Icons.attachment,
                            color: Colors.black45,
                          ),
                        ),
                        //camera
                        IconButton(
                          onPressed: () async {
                            //take image from camera
                            var image_camera = await _takeImageCamera(context);

                            setState(() {
                              //take image filde
                              var image_file = File(image_camera!.path);
                            });
                          },
                          icon: Icon(
                            Icons.camera_alt_rounded,
                            color: Colors.black45,
                          ),
                        ),
                      ],
                    ),
                  ),

                  //hint text
                  hintStyle: TextStyle(
                    color: Colors.black45,
                  ),
                  contentPadding: EdgeInsets.only(
                      left: MediaQuery.of(context).size.width * 0.07,
                      top: MediaQuery.of(context).size.height * 0.022),
                  hintText: "Message"),
            ),
          ),
        ),
        //voice recorder
        Container(
          width: MediaQuery.of(context).size.width * 0.12,
          height: MediaQuery.of(context).size.height * 0.07,
          //decorations
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.greenAccent.shade200,
          ),
          //icon
          child: IconButton(
            onPressed: () {
              setState(() {});
            },
            icon: Icon(
              Icons.keyboard_voice_sharp,
              color: Colors.black45,
            ),
          ),
        ),
      ],
    );
  }
}

Here my second example:

//chat bar
class BuildAppChatBarNew extends StatefulWidget {
  BuildAppChatBarNew();

  @override
  _BuildAppChatBarNew createState() => _BuildAppChatBarNew();
}

//chat bar
class _BuildAppChatBarNew extends State<BuildAppChatBarNew> {
  TextEditingController _controller_text_field = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        //text field
        Expanded(
          child: Card(
            color: Colors.white60,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(36.0),
            ),
            child: Row(
              children: [
                //emoji
                Container(
                  child: IconButton(
                    icon: Icon(
                      Icons.tag_faces,
                      color: Colors.black45,
                    ),
                    onPressed: () {},
                  ),
                ),

                //text field
                Expanded(
                  child: TextField(
                    keyboardType: TextInputType.multiline,
                    maxLines: null,
                    decoration: new InputDecoration(
                        border: InputBorder.none,
                        focusedBorder: InputBorder.none,
                        enabledBorder: InputBorder.none,
                        errorBorder: InputBorder.none,
                        disabledBorder: InputBorder.none,

                        //hint text
                        hintStyle: TextStyle(
                          color: Colors.black45,
                        ),
                        hintText: "Message"),
                  ),
                ),

                //attachment / camera
                Container(
                  width: MediaQuery.of(context).size.width * 0.26,
                  child: Row(
                    children: [
                      //attachment
                      IconButton(
                        onPressed: () {
                          print('add button pressed');
                          _loadLocalFile();
                        },
                        icon: Icon(
                          Icons.attachment,
                          color: Colors.black45,
                        ),
                      ),
                      //camera
                      IconButton(
                        onPressed: () async {
                          //take image from camera
                          var image_camera = await _takeImageCamera(context);

                          setState(() {
                            //take image filde
                            var image_file = File(image_camera!.path);
                          });
                        },
                        icon: Icon(
                          Icons.camera_alt_rounded,
                          color: Colors.black45,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),

        //voice recorder
        Container(
          width: MediaQuery.of(context).size.width * 0.12,
          height: MediaQuery.of(context).size.height * 0.07,
          //decorations
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.greenAccent.shade200,
          ),
          //icon
          child: IconButton(
            onPressed: () {
              setState(() {});
            },
            icon: Icon(
              Icons.keyboard_voice_sharp,
              color: Colors.black45,
            ),
          ),
        ),
      ],
    );
  }
}

Anyone have a idea how i can set the align for icons to bottom? Is that possible?

1 Answers

there is property name "alignment" as part of "IconButton", i take your above example and modify it like below

    IconButton(
          onPressed: () {
              print('add button pressed');
              _loadLocalFile();
         },
         alignment : Alignment.bottomCenter,
         icon: Icon(
             Icons.attachment,
             color: Colors.black45,
         ),
    ),
Related