[Flutter] 커서, 텍스트 핸들러 꾸미기

✍ 커서와 텍스트 핸들러

Flutter 에서 커서와 텍스트 핸들러의 색상을 바꾸려면 ThemeData 의 textSelectionTheme 값을 변경하면 된다. 각각 cursorColor 는 커서 색상, selectionColor 는 텍스트를 드래그했을 때 드래그한 영역의 색상을 뜻한다. selectionHandleColor 는 텍스트 색상을 변경할 수 있다.

 

 

runApp(
  MaterialApp(
    theme: ThemeData(
      textSelectionTheme: TextSelectionThemeData(
        selectionHandleColor: Colors.deepOrangeAccent,
        selectionColor: Colors.greenAccent.withOpacity(0.3),
        cursorColor: Colors.black
      )
    ),
    home: Scaffold(
      body: SafeArea(child: _HomeScreen()),
    ),
  ),
);

 

 

✍ TextField Widget

TextFieldWidget 에서도 커서 색상을 변경할 수 있다. ThemeData 에서 설정한 cursorColor 와 TextFieldWidget 에서 설정한 cursorColor 모두 존재한다면 TextFieldWidget 이 우선시 된다. 색상 외에도 커서 너비(cursorWidth)와 높이(cursorHeight), 모서리 둥근 정도(cursorRadius)를 따로 설정할 수 있다.

 

 

TextField(
  cursorRadius: Radius.circular(20.0),
  cursorHeight: 5.0,
  cursorWidth: 5.0,
  cursorColor: Colors.red,
  showCursor: true,
)

showCursor 가 false 이면 이 텍스트 필드에서는 커서가 보이지 않는다.