CODEWITHSUNDEEP
flutterflutter-layout
Pullat Junaid
Pullat Junaid

Reputation: 3384

How can i make text field with border radius in flutter ???

I want to add border radius to this text field in flutter. My code is 

 new Container(
            padding: const EdgeInsets.only(bottom: 10.0, top: 20.0),
            child: new Opacity(
                opacity: 0.7,
                child: new TextField(
                  style: new TextStyle(
                      fontSize: 18.0,
                      height: 1.1,
                      color: Colors.white,
                      fontFamily: 'Akrobat-Bold'),
                  decoration: InputDecoration(
                      filled: true,
                      fillColor: const Color(0xFF808285),
                      hintStyle: TextStyle(
                          color: Colors.white, fontFamily: 'Akrobat-Bold'),
                      border: InputBorder.none,
                      hintText: 'User ID'),
                )),
          ),

Thanks in advance.

Upvotes: 6

Views: 22734

Answers (2)

Suresh B B
Suresh B B

Reputation: 1420

To add borderRadius to textFormField in Flutter

decoration: InputDecoration(
  border: OutlineInputBorder(
    borderRadius: BorderRadius.all(Radius.circular(20.0)),
      borderSide: BorderSide(color: Colors.white), 
  ),
  enabledBorder: OutlineInputBorder(
    borderRadius: BorderRadius.all(Radius.circular(20.0)),
    borderSide: BorderSide(color: Colors.white),
  )
)

Upvotes: 5

Raouf Rahiche
Raouf Rahiche

Reputation: 31406

you can use OutlineInputBorder class 

TextField(
  decoration: InputDecoration(
    border: UnderlineInputBorder(
    borderRadius:BorderRadius.circular(5.0)),
    hintText: 'Please enter a search term'
  ),
);

Upvotes: 12

Related Questions