(Flutter-기초 강의) 10. Input Widgets (TextField, CheckBox, Radio, Slider)

사용자와의 상호작용은 어떤 앱에서도 중요한 부분이며, Flutter에서는 다양한 Input Widget을 통해 이를 손쉽게 구현할 수 있습니다.

이번 포스팅에서는 Flutter의 주요 Input Widget들에 대해 자세히 알아보겠습니다.

Table of Contents

Input Widget 개요

Input Widget은 사용자로부터 데이터를 입력받는 데 사용됩니다.

텍스트 입력, 스위치, 체크박스 등 다양한 방법을 제공하여 사용자의 선택이나 입력을 받을 수 있습니다.

주요 Input Widget

TextField

개요

텍스트 입력을 받기 위한 기본적인 Widget입니다.

속성

controller: TextEditingController를 통해 텍스트 필드의 현재 텍스트를 관리할 수 있습니다.
keyboardType: 텍스트 필드에 표시될 키보드 타입을 지정합니다. TextInputType을 사용할 수 있습니다.
obscureText: 비밀번호 등 개인정보를 입력받을 때 텍스트를 가리기 위해 사용합니다.
이 값을 true로 설정하면, 입력된 텍스트가 별표(*)나 점(.)으로 표시됩니다.
onChanged: 텍스트 필드의 내용이 변경될 때마다 호출될 콜백 함수를 설정합니다.
사용자 입력을 실시간으로 처리하고 싶을 때 유용합니다.

예제

TextField의 입력된 값은 final myController = TextEditingController();에 의해 생성된 TextEditingController에 의해 관리됩니다.

(전체 코드는 My Git Repository를 확인해주세요.)

          TextField(
            controller: myController,
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Put your text here',
            ),
            keyboardType: TextInputType.text,
            obscureText: false,
            onChanged: (text) {
              print("text field is changed: $text");
            },
          ),

결과

Checkbox

개요

사용자가 항목을 선택할 수 있게 하는 체크박스입니다.

속성

value (bool?): 체크박스의 현재 상태를 나타냅니다. 이 속성은 null도 될 수 있습니다.
onChanged (ValueChanged<bool?>?): 체크박스의 상태가 변경될 때 호출되는 콜백 함수입니다.
activeColor (Color?): 체크박스가 체크된 상태일 때의 색상을 지정합니다.
checkColor (Color?): 체크 표시의 색상을 지정합니다.
focusColor (Color?): 체크박스가 포커스를 받았을 때의 배경 색상을 지정합니다.
hoverColor (Color?): 마우스 포인터가 위에 올라갔을 때 체크박스의 배경 색상을 지정합니다.
materialTapTargetSize (MaterialTapTargetSize?): 체크박스의 탭 가능 영역의 크기를 지정합니다.
tristate (bool): 체크박스가 세 가지 상태를 가질 수 있게 할 것인지를 결정합니다. 기본값은 false이며, 이 경우 체크박스는 두 가지 상태(체크됨/체크되지 않음)만 가집니다. true로 설정하면 null 상태도 허용되어 체크박스가 ‘불확실’ 또는 ‘부분적’ 상태를 표현할 수 있습니다.
mouseCursor (MouseCursor?): 마우스 포인터가 체크박스 위에 있을 때 표시될 커서의 스타일을 지정합니다.

예제

bool 타입의 isChecked 값을 업데이트 합니다.

isChecked 상태에 따른 상태 값을 Text로 표시합니다.

        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Checkbox(
              value: isChecked,
              onChanged: (bool? value) {
                // Update Check State
                setState(() {
                  isChecked = value!;
                });
              },
            ),
            Text(isChecked ? 'Checked' : 'Unchecked'),
          ],
        ),

결과

Radio

개요

사용자가 여러 옵션 중 하나를 선택할 수 있게 하는 라디오 버튼입니다.

속성

value (T): 이 라디오 버튼의 값입니다.
사용자가 이 라디오 버튼을 선택하면, 이 값이 groupValue와 일치하게 됩니다.
groupValue (T?): 현재 그룹에서 선택된 라디오 버튼의 값을 나타냅니다.
value와 groupValue가 같을 때, 해당 라디오 버튼은 선택된 것으로 표시됩니다.
onChanged (ValueChanged<T?>?): 라디오 버튼의 값이 변경될 때 호출되는 콜백 함수입니다.
만약 이 함수가 null로 설정되면, 라디오 버튼은 비활성화됩니다.
activeColor (Color?): 라디오 버튼이 선택될 때의 색상을 지정합니다.
fillColor (MaterialStateProperty<Color?>?): 라디오 버튼의 채워진 부분의 색상을 지정합니다.
materialTapTargetSize (MaterialTapTargetSize?): 라디오 버튼의 탭 가능 영역의 크기를 지정합니다.
visualDensity (VisualDensity?): 위젯의 시각적 밀도를 조정합니다. 이 속성을 사용하여 라디오 버튼의 크기와 공간을 조절할 수 있습니다.
focusColor (Color?): 라디오 버튼이 포커스를 받았을 때의 색상을 지정합니다.
hoverColor (Color?): 마우스 포인터가 위에 올라갔을 때 라디오 버튼의 배경 색상을 지정합니다.
overlayColor (MaterialStateProperty<Color?>?): 라디오 버튼을 눌렀을 때 나타나는 잉크 스플래시의 색상을 지정합니다.
splashRadius (double?): 잉크 스플래시의 반경을 지정합니다. 이 값은 라디오 버튼을 눌렀을 때 나타나는 효과의 크기를 결정합니다.

예제

_setSelectedRadioValue()는 다음과 같이 구현되어 있습니다.

  void _setSelectedRadioValue(int? value) {
    setState(() {
      _selectedRadioValue = value!;
    });
  }

3가지 옵션을 Radio 버튼을 통해 선택할 수 있습니다.

        Column(
          children: <Widget>[
            ListTile(
              title: const Text('Option 1'),
              leading: Radio(
                value: 1,
                groupValue: _selectedRadioValue,
                onChanged: _setSelectedRadioValue,
              ),
            ),
            ListTile(
              title: const Text('Option 2'),
              leading: Radio(
                value: 2,
                groupValue: _selectedRadioValue,
                onChanged: _setSelectedRadioValue,
              ),
            ),
            ListTile(
              title: const Text('Option 3'),
              leading: Radio(
                value: 3,
                groupValue: _selectedRadioValue,
                onChanged: _setSelectedRadioValue,
              ),
            ),
            // Display the selected option
            Text('Selected Option: $_selectedRadioValue'),
          ],
        ),

결과

Slider

개요

사용자가 주어진 범위 안에서 값을 선택할 수 있게 하는 슬라이더입니다.

속성

value (double): 슬라이더의 현재 값을 나타냅니다. 이 값은 min과 max 사이에서 설정해야 합니다.
onChanged (ValueChanged<double>?): 슬라이더의 값을 변경할 때 호출되는 콜백 함수입니다.
min (double): 슬라이더의 최소값을 정의합니다. 기본값은 0.0입니다.
max (double): 슬라이더의 최대값을 정의합니다. 기본값은 1.0입니다.
divisions (int?): 슬라이더를 몇 개의 동등한 부분으로 나눌지 정의합니다.
label (String?): 현재 선택된 값의 레이블을 표시합니다.
activeColor (Color?): 활성화된 슬라이더의 색상을 지정합니다. 사용자가 선택한 부분의 색상을 나타냅니다.
inactiveColor (Color?): 비활성화된 슬라이더의 색상을 지정합니다. 사용자가 아직 선택하지 않은 부분의 색상을 나타냅니다.
thumbColor (Color?): 슬라이더의 조절점(Thumb)의 색상을 지정합니다.
overlayColor (Color?): 사용자가 조절점을 누르고 있을 때 나타나는 색상의 오버레이를 정의합니다.
trackHeight (double?): 슬라이더 트랙의 높이를 지정합니다.
mouseCursor (MouseCursor?): 마우스 커서가 슬라이더 위에 있을 때 표시할 커서의 스타일을 지정합니다.
focusNode (FocusNode?): 슬라이더에 포커스를 관리할 FocusNode를 할당합니다.
autofocus (bool): 슬라이더가 화면에 표시될 때 자동으로 포커스를 받을지 여부를 결정합니다.

예제

0에서 100 사이의 값을 선택할 수 있는 Slider 위젯을 구현합니다.

슬라이더는 5개의 구분점을 가지며, 사용자가 슬라이더를 움직일 때마다 _currentSliderValue가 업데이트되어 현재 선택된 값을 화면에 표시합니다.

        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Slider(
              value: _currentSliderValue,
              min: 0,
              max: 100,
              divisions: 5,
              label: _currentSliderValue.round().toString(),
              onChanged: (double value) {
                setState(() {
                  _currentSliderValue = value;
                });
              },
            ),
            Text('Current value: ${_currentSliderValue.round()}'),
          ],
        ),