Rounded TextField With Outline in flutter

  1. It sets a padding of 30 pixels all around the text field.
  2. It sets the decoration of the text field to be an InputDecoration.
  3. It sets the border of the text field to be an OutlineInputBorder.
  4. It sets the borderSide of the text field to be a BorderSide.
  5. It sets the border width of the text field to be 2 pixels.
  6. It sets the style of the text field to be BorderStyle.none.
  7. It sets the borderRadius of the text field to be 10 pixels.
  8. It sets the filled of the text field to be true.
  9. It sets the hintStyle of the text field to be TextStyle(color: Colors.white30).
  10. It sets the hintText of the text field to beType in your text“.

 

Padding(
     padding: const EdgeInsets.all(30.0),
     child: TextField(
       decoration: new InputDecoration(
           border: new OutlineInputBorder(
             borderSide: BorderSide(
               width: 2,
               style: BorderStyle.none,
             ),
             borderRadius: const BorderRadius.all(
               const Radius.circular(10.0),
             ),
           ),
           filled: true,
           hintStyle: new TextStyle(color: Colors.white30),
           hintText: "Type in your text"),
     ),
   );

Rounded TextField With Outline in flutter

Leave a Comment