Set Rounded Corner Border Around TextField Text Input in Flutter

TextField widget comes with decoration prop method. The decoration method is used to show decoration around TextField widget. The decoration method has borderRadius: BorderRadius.all(Radius.circular(double)) method with Radius parameter which enables the rounded corner radius border on Text Input widget. So in this tutorial we would Add Set Rounded Corner Border Around TextField Text Input in Flutter Android iOS App.

Contents in this project Set Rounded Corner Border Around TextField Text Input in Flutter Android iOS App:

1. Import material.dart package in your main.dart file.

2. Call our main MyApp class using void main runApp() method.

3. Create our main MyApp class extends with State less widget.

4. Create Widget build area in MyApp class and make Scaffold widget -> SafeArea widget -> Center widget.

5. Create Container widget in Center widget. We would put TextField widget in Container widget because TextField widget directly dose not support width.

6. Creating TextField widget in Container widget.

  1. autocorrect : Enables autocorrection.
  2. decoration : To set decoration around TextField widget.
  3. hintText : To set hint text.
  4. hintStyle : To set hint text style.
  5. fillColor : To set filled color inside TextField widget.
  6. borderRadius : Used to set border rounded radius.
  7. borderSide : Used to set border color and width.
  8. focusedBorder : Used to set border radius and color on TextField focus event.

7. Complete source code for main.dart file:

Screenshots:

Set Rounded Corner Border Around TextField Text Input in Flutter

Leave a Reply

Your email address will not be published.