[Flutter] Widgets(2) - Custom decoration

자주 사용하는 decoration 이 있다면 이런 부분을 함수처럼 처리하여 반복적으로 사용 가능하다.

 

// input_decoration.dart

InputDecoration buildInputDecoration({String? label, String? hintText}) {
  return InputDecoration(
      fillColor: Colors.white,
      focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
          borderSide: BorderSide(color: Colors.blue)),
      enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(16),
          borderSide: BorderSide(color: Color(0xff69639F), width: 2.0)),
      labelText: label,
      hintText: hintText);
}

 

TextFormField 에 적용한 경우

 

Padding(
  padding: const EdgeInsets.all(8.0),
  child: TextFormField(
    controller: _displayNameTextCtrl,
    decoration: buildInputDecoration(label: 'Your name', hintText: ''),
  ),
),

 

실제 적용한 화면 - 붉은 박스 부분.