Search code examples
fluttertextinput

Three sides circular textinputfield with one side rectangle in flutter


I need to add a text field which has 3 sides circular shape and one top right side with normal rectangular side. I am trying to do that with OutlineInputBorder which gives me borders. However I need to achieve this design.

Since I dont have enough reputations, I am not allowed to add images. It will helpful if someone help me out.

    new Theme(
          data: new ThemeData(
            primaryColor: Colors.blue,
          ),
          child: TextFormField(
            style: new TextStyle(
              color: Color(0xff651515),
            ),
            autofocus: false,
            obscureText: false,
            keyboardType: TextInputType.text,

            decoration: InputDecoration(
              filled: true,
              border: new OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(10))
              ),
              fillColor: Colors.black12,
              labelText: TextDisplayConstants.EMAIL,
              labelStyle: TextStyle(
                color: Color(0xffa4a4a4),
                fontSize: 14,
              ),
            ),[enter image description here][1]
          ),
        ),

Solution

  • Take a try with this:

    Demo:

    Demo border

    Example code:

    OutlineInputBorder(
               borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(10),
                    bottomLeft: Radius.circular(10),
                    bottomRight: Radius.circular(10),
                    topRight: Radius.circular(0)),
              )