InputDecortion -Flutter

Nov 12, 2020

Introduction

Input Decoration is used to decorate a material design in the TextField. The decoration involves borders, labels, icons, and styles.

styling the hint text

Styling the hint text can be done by using hintStyle and followed by the normal TextStyle.

TextField(
      decoration: InputDecoration(
        icon: Icon(Icons.send),
        hintText: 'Text',
       hintStyle:TextStyle(
       color:Colors.deepPurpleAccent,
       fontWeight: FontWeight.w400,
       fontStyle: FontStyle.italic,
       fontSize: 25
),
      
      ),

Prefix and Suffix

prefix displays the widget before the textFormField and suffix display the widget after the textFormField.

TextFormField(
      decoration: const InputDecoration(
        prefix: Icon(Icons.message_outlined),
        suffix: Icon(Icons.send),
      ),
    );

enabledBorder

enabledBorder, The border to display when the inputDecoration is enabled and is not showing an error.

TextFormField(
      decoration: const InputDecoration(
        enabledBorder: UnderlineInputBorder(
        borderSide: BorderSide(
        color: Colors.red
        ), 
        ),
    ),
    );

underlineInputBorder shows a underline border for the TextFormField.

TextFormField(
      decoration: const InputDecoration(
        enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(
        color: Colors.red
        ), 
        ),
    ),
    );

outlineInputBorder Creates a rounded rectangle outline border

focusedBorder

The border to display when the inputDecoration has the focus and is not showing an error.

TextFormField(
  decoration: InputDecoration(
    focusedBorder: UnderlineInputBorder(
      borderSide: BorderSide(
        color: Colors.orange
      )
    )
  ),
)

SuffixText and prefixText

suffix text

TextFormField(
  decoration: InputDecoration(
      hintText: "text",
      hintStyle: TextStyle(color: Colors.white),
      suffixText: "suffixText",
    suffixStyle: TextStyle(
      color: Colors.purple
    )
  )),

prefix text

TextFormField(
  decoration: InputDecoration(
      hintText: "text",
      hintStyle: TextStyle(color: Colors.white),
      prefixText: "suffixText  ",
    prefixStyle: TextStyle(
      color: Colors.purple
    )
  )),

Thank you!