How can i add a divider between icon and text in TextFormField in flutter

Question

I am using a TextFormField in flutter. Can i put a divider between prefixIcon and text in it? Is there an icon which looks like a divider (in any package)??. Here is my code -

Container(
                color: Colors.black45,
                width: MediaQuery.of(context).size.width,
                padding: EdgeInsets.only(left: 5.0, right: 50.0, bottom: 5.0),
                child: TextFormField(
                  textAlignVertical: TextAlignVertical.bottom,
                  style: TextStyle(
                    color: Colors.white
                  ),
                  cursorColor: Color(0xFF075E54),
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.only(bottom: 13.0),
                    prefixIcon: Icon(
                      Icons.add_photo_alternate,
                      color: Colors.white,
                      size: MediaQuery.of(context).size.width*0.07,
                    ),
                    border: InputBorder.none,
                    hintText: 'Add a caption...',
                    hintStyle: TextStyle(
                      color: Colors.grey[400],
                      fontSize: MediaQuery.of(context).size.width*0.042,
                    )
                  ),
                ),
              ),

Answer 1

You wan wrap your Icon inside a Container and applying a border to it, here is a sample code :

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black45,
      width: MediaQuery.of(context).size.width,
      padding: EdgeInsets.only(left: 5.0, right: 50.0),
      child: TextFormField(
        textAlignVertical: TextAlignVertical.bottom,
        style: TextStyle(color: Colors.white),
        cursorColor: Color(0xFF075E54),
        decoration: InputDecoration(
          contentPadding: EdgeInsets.only(bottom: 13.0),
          prefixIcon: Container(
            margin: EdgeInsets.only(right: 8),
            decoration: BoxDecoration(
              border: Border(right: BorderSide(color: Colors.white)),
            ),
            child: Icon(
              Icons.add_photo_alternate,
              color: Colors.white,
              size: MediaQuery.of(context).size.width * 0.07,
            ),
          ),
          border: InputBorder.none,
          hintText: 'Add a caption...',
          hintStyle: TextStyle(
            color: Colors.grey[400],
            fontSize: MediaQuery.of(context).size.width * 0.042,
          ),
        ),
      ),
    );
  }
}

Try the full code on DartPad

Screenshot

Answer 2

Pass desirable divider widget to prefix option of input decoration, or i believe you can wrap prefixIcon with Container with boxdecoration and one right border as divider