Search code examples
androidtextflutter

Rounded corner Textfiled without border color

I need a rounded corner TextField, I'm able to do this but it is showing the default border color. I tried changing borderSide but was unable to change the color (it was still black):

       TextFormField(
                decoration: InputDecoration(
                    prefixIcon: Icon(
                      Icons.person,
                      color: Colors.white,
                    ),
                    border: OutlineInputBorder(
                      // width: 0.0 produces a thin "hairline" border
                      borderRadius: BorderRadius.all(Radius.circular(90.0)),
                      borderSide: BorderSide(color: Colors.white24)
                      //borderSide: const BorderSide(),
                    ),

                    hintStyle: TextStyle(color: Colors.white,fontFamily: "WorkSansLight"),
                    filled: true,
                    fillColor: Colors.white24,
                    hintText: 'Password'),
              ),

I need this and I don't want the focus line but the cursor should be white. I tried to change everything in border parameter but still no change.

I want:

enter image description here

I'm getting this:

enter image description here

Solution

  • Create a transparent border:

          final border = OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(90.0)),
            borderSide: BorderSide(
              color: Colors.transparent,
            )
            );

    Another option is using :

    borderSide: BorderSide.none

    And use it in focusedBorder and border properties, also add a Theme to set the cursor and hint Colors:

        Theme(
                  data: Theme.of(context).copyWith(
                    cursorColor: Colors.red,
                    hintColor: Colors.transparent,
                  ),
                  child: TextFormField(
                    decoration: InputDecoration(
                        focusedBorder: border,
                        border: border,
                        prefixIcon: Icon(
                          Icons.person,
                          color: Colors.white,
                        ),
                        hintStyle: TextStyle(
                            color: Colors.white, fontFamily: "WorkSansLight"),
                        filled: true,
                        fillColor: Colors.white24,
                        hintText: 'Password'),
                  ),
                ),