flutter/dart: How to create circular Text Field with one side border

Question

I need the login screen with the shared images text field look so I am stock if anyone have idea so kindly share with me. thanks:

Answer 1

You can use Container and InputDecoration:

Container(
     clipBehavior: Clip.antiAlias,
     decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
             color: Colors.black.withOpacity(0.1),
             blurRadius: 10,
             offset: Offset(1, -1),
          ),
        ],
     ),
     child: TextField(
         decoration: InputDecoration(
             fillColor: Colors.white,
             filled: true,
             disabledBorder: UnderlineInputBorder(
                 borderSide: BorderSide(
                     color: Colors.blue, width: 4, style: BorderStyle.solid),
                 ),
                 enabledBorder: UnderlineInputBorder(
                    borderSide: BorderSide(
                        color: Colors.blue, width: 4, style: BorderStyle.solid),
                 ),
                 focusedBorder: UnderlineInputBorder(
                    borderSide: BorderSide(
                        color: Colors.blue, width: 4, style: BorderStyle.solid),
                 ),
                 errorBorder: UnderlineInputBorder(
                    borderSide: BorderSide(width: 4, style: BorderStyle.solid),
                 ),
            ),
         ),
     )