포스트

화면 구성 위젯 (입력)

게시 업데이트
By Sangwon Lee
31 분읽는 시간
화면 구성 위젯 (입력)

TextField

  • 텍스트를 입력하는 입력란
  • 주로 사용하는 속성
    • TextEditingController? controller
      • 편집 중인 텍스트를 제어하기 위한 컨트롤러
      • null일 경우 TextField에서 자체적으로 생성한다.
    • FocusNode? focusNode
      • 해당 TextField에 대한 포커스 노드 지정
    • InputDecoration? decoration
      • TextField에 대한 스타일
      • 기본 값 : const InputDecoration()
    • TextInputType? keyboardType
      • 키보드 유형
      • text, number, phone, datetime, emailAddress, url 등의 유형이 있다.
    • TextInputAction? textInputAction
      • 키보드에 사용할 작업 버튼 유형
      • TextInputAction.search(검색)이나 TextInputAction.done(완료) 등의 유형이 있다.
    • TextStyle? style
      • 텍스드에 대한 스타일
    • TextAlign textAlign
      • 텍스트 가로 정렬 방법
      • 기본 값 : TextAlign.start
    • TextAlignVertical? textAlignVertical
      • 텍스트의 세로 정렬 방법
    • TextDirection? textDirection
      • 텍스트의 배치 시작 위치
    • bool readOnly
      • 읽기 전용 여부
      • 기본 값 : false
    • bool? showCursor
      • 커서 노출 여부
    • String obscuringCharacter
      • password처럼 대체해서 보여줄 문자
      • 기본 값 : ‘•’
    • bool obscureText
      • 편집 중인 텍스트를 숨길지에 대한 여부
      • 비밀번호같은 경우에 해당된다.
      • true일 경우에는 필드의 텍스트는 복사 및 자르기가 불가능하다.
      • 기본 값 : false
    • int? maxLines
      • 최대 라인 수
      • 기본 값 : 1
    • int? minLines
      • 최소 라인 수
    • bool expands
      • 기본 값 : false
    • int? maxLength
      • 최대 글자 수
    • Function(String)? onChanged
      • 내부 문자열이 변경되는 경우에 동작할 기능
    • Function()? onEditingComplete
      • 완료 버튼을 눌렀을 때 동작할 기능
    • Function(String)? onSubmitted
      • 필드의 텍스트 편집 완료 시 동작할 기능
    • List<TextInputFormatter>? inputFormatters
      • 유효성 검사 및 형식 목록을 지정한다.
    • bool? enabled
      • 활성화 여부
    • ScrollController? scrollController
      • 스크롤을 컨트롤하기 위한 컨트롤러
      • null일 경우 TextField에서 자체적으로 생성한다.
    • Function(BuildContext, EditableTextState)? contextMenuBuilder
      • 커스텀된 컨텍스트 메뉴 위젯을 설정한다.
      • 기본 값 : _defaultContextMenuBuilder
  • 참고
TextField(
    decoration: InputDecoration(
        prefixIcon: Icon(Icons.search),
        suffixIcon: Icon(Icons.clear),
        labelText: 'Outlined',
        hintText: 'hint text',
        helperText: 'supporting text',
        border: OutlineInputBorder(),
    ),
)

Form

  • 사용자의 입력을 받을 수 있는 다양한 위젯들을 통해 여러 정보들을 하나의 그룹으로 묶어 처리하는 용도
  • 주로 사용하는 속성
    • Key? key
      • FormState 유형의 GlobalKey를 지정한다.
    • Widget child
      • 내부에 표시할 자식 위젯
      • Column같은 위젯을 많이 쓴다.
      • 필수
    • bool? canPop
      • false일 경우 현재 경로가 pop되는 것을 막는다.
    • void Function(bool)? onPopInvoked
      • pop이 처리된 후에 동작할 기능
    • void Function()? onChanged
      • Form 위젯 내부의 FormField 계열 위젯들의 상태가 변경되면 호출된다.
    • AutovalidateMode? autovalidateMode
      • 종류
        • AutovalidateMode.onUserInteraction
          • 컨텐츠가 변경된 후에만 자동 유효성 검사가 수행된다.
        • AutovalidateMode.always
          • 사용자 상호 작용 없이도 자동 유효성 검사가 수행된다.
        • AutovalidateMode.disabled
          • 자동 유효성 검사가 비활성화된다.
      • 기본 값 : AutovalidateMode.disabled
  • 관련 위젯 목록
    • TextFormField
    • DropdownButtonFormField
  • 참고
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

Form(
    key: _formKey,
    child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
            TextFormField(
                decoration: const InputDecoration(
                    hintText: '이메일을 입력해 주세요.',
                ),
                onSaved: (value) {
                    print("이메일 :$value");
                },
                validator: (String? value) {
                        if (value == null || value.isEmpty) {
                        return '이메일이 입력되지 않았습니다.';
                    }
                    return null;
                },
            ),
            Padding(
                padding: const EdgeInsets.symmetric(vertical: 16.0),
                child: ElevatedButton(
                    onPressed: () {
                        //데이터가 유효한 경우
                        if (_formKey.currentState!.validate()) {
                            //데이터에 대한 처리
                            _formKey.currentState!.save(); //Form 저장하기
                        }
                    },
                    child: const Text('저장'),
                ),
            ),
        ],
    ),
)

TextFormField

  • 주로 사용하는 속성
    • TextEditingController? controller
      • 편집 중인 텍스트를 제어하기 위한 컨트롤러
      • null일 경우 TextFormField에서 자체적으로 생성하고
        해당 컨트롤러의 텍스트를 initialValue로 초기화한다.
    • String? initialValue
      • 초기 값
    • FocusNode? focusNode
      • 해당 TextFormField에 대한 포커스 노드 지정
    • InputDecoration? decoration
      • TextField에 대한 스타일
      • 기본 값 : const InputDecoration()
    • TextInputType? keyboardType
      • 키보드 유형
      • text, number, phone, datetime, emailAddress, url 등의 유형이 있다.
    • TextInputAction? textInputAction
      • 키보드에 사용할 작업 버튼 유형
      • TextInputAction.search(검색)이나 TextInputAction.done(완료) 등의 유형이 있다.
    • TextStyle? style
      • 텍스드에 대한 스타일
    • TextAlign textAlign
      • 텍스트 가로 정렬 방법
      • 기본 값 : TextAlign.start
    • TextAlignVertical? textAlignVertical
      • 텍스트의 세로 정렬 방법
    • TextDirection? textDirection
      • 텍스트의 배치 시작 위치
    • bool autofocus
      • 자동 포커스 여부
      • 기본 값 : false
    • bool readOnly
      • 읽기 전용 여부
      • 기본 값 : false
      • 커서 노출 여부
    • String obscuringCharacter
      • password처럼 대체해서 보여줄 문자
      • 기본 값 : ‘•’
    • bool obscureText
      • 편집 중인 텍스트를 숨길지에 대한 여부
      • 비밀번호같은 경우에 해당된다.
      • true일 경우에는 필드의 텍스트는 복사 및 자르기가 불가능하다.
      • 기본 값 : false
      • 기본 값 : true
    • int? maxLines
      • 최대 라인 수
      • 기본 값 : 1
    • int? minLines
      • 최소 라인 수
    • bool expands
      • 기본 값 : false
    • int? maxLength
    • int? maxLength
      • 최대 글자 수
    • Function(String)? onChanged
      • 내부 문자열이 변경되는 경우에 동작할 기능
    • Function()? onEditingComplete
      • 완료 버튼을 눌렀을 때 동작할 기능
    • Function(String)? onFieldSubmitted
      • 필드의 텍스트 편집 완료 시 동작할 기능
    • Function(String?)? onSaved
      • FormState나 Form을 통해서 저장됬을 때 동작할 기능
    • String? Function(String?)? validator
      • 유효성 검증을 진행하는 방법
      • 유효성에 문제가 있는 경우에는 해당 상황에 대한 오류 메시지를 반환한다.
    • List<TextInputFormatter>? inputFormatters
      • 유효성 검사 및 형식 목록을 지정한다.
    • bool? enabled
      • 활성화 여부
    • bool? enableInteractiveSelection
      • 텍스트 관련 기능 사용가능 여부
      • 잘라내기/복사/붙여넣기 등의 기능이 포함된다.
    • Widget? Function(BuildContext, {required int currentLength, required bool isFocused, required int? maxLength})? buildCounter
      • 글자 수를 나타내기 위한 위젯을 만드는 방법을 명시한다.
    • Iterable<String>? autofillHints
      • 자동 완성 서비스가 해당 TextFormField의 유형을 식별하는데 도움을 주기 위한 문자열 목록
      • AutofillHints 클래스에 관련 값들이 명시되어 있다.
    • AutovalidateMode? autovalidateMode
      • 종류
        • AutovalidateMode.onUserInteraction
          • 컨텐츠가 변경된 후에만 자동 유효성 검사가 수행된다.
        • AutovalidateMode.always
          • 사용자 상호 작용 없이도 자동 유효성 검사가 수행된다.
        • AutovalidateMode.disabled
          • 자동 유효성 검사가 비활성화된다.
    • ScrollController? scrollController
      • 스크롤을 컨트롤하기 위한 컨트롤러
      • null일 경우 TextFormField에서 자체적으로 생성한다.
    • Widget Function(BuildContext, EditableTextState)? contextMenuBuilder
      • 커스텀된 컨텍스트 메뉴 위젯을 설정한다.
      • 기본 값 : _defaultContextMenuBuilder
      • 기본 값 : DragStartBehavior.start
  • 주로 사용하는 속성
    • List<DropdownMenuItem<Object?»? items
      • 사용자가 선택할 수 있는 항목 목록
      • null 경우 해당 드롭다운 버튼은 비활성화 된다.
      • 필수
    • List<Widget> Function(BuildContext)? selectedItemBuilder
      • 항목 목록을 생성하는 빌더 메소드
    • Object? value
      • 현재 선택된 값
      • value가 null이고 버튼이 활성화된 경우는 hint가 표시된다.
      • value가 null이고 버튼이 비활성화된 경우는 disabledHint가 표시된다.
    • Widget? hint
      • placeholder 유형 위젯
      • value가 null이고 버튼이 활성화된 경우에 표시된다.
      • value가 null이고 버튼이 비활성화되고 disabledHint가 null인 경우에 표시된다.
    • Widget? disabledHint
      • placeholder 유형 위젯
      • value가 null이고 버튼이 비활성화된 경우에 표시된다.
    • Function(Object?)? onChanged
      • 항목을 선택한 경우에 동작할 기능
      • null 경우 해당 드롭다운 버튼은 비활성화 된다.
      • 필수
    • void Function()? onTap
      • 드롭다운 버튼을 선택한 경우에 동작할 기능
      • 드롭다운 버튼이 비활성화된 경우에는 호출되지 않는다.
    • int elevation
      • 드롭다운 버튼 선택 시 나올 항목 목록을 배치할 z 좌표
      • 기본 값 : 8
    • TextStyle? style
      • 드롭다운 버튼 및 드롭다운의 텍스트에 사용할 스타일
    • Widget? icon
      • 드롭다운 버튼 아이콘에 사용할 위젯
    • Color? iconDisabledColor
      • 버튼이 비활성화 된 경우의 icon 색상
    • Color? iconEnabledColor
      • 버튼이 활성화 된 경우의 icon 색상
    • double iconSize
      • icon의 크기
      • 기본 값 : 24.0
    • bool isDense
      • 드롭다운 버튼의 높이를 내부 위젯에 맞추는 것에 대한 여부
      • 기본적으로 드롭다운 버튼의 높이는 항목의 높이와 같다.
      • 기본 값 : true
    • bool isExpanded
      • 드롭다운 버튼의 내부 컨텐츠가 상위 항목을 가로로 채우도록 설정한다.
      • 기본적으로 드롭다운 버튼의 내부 너비는 해당 컨텐츠의 최소 크기이다.
      • Row에서 사용되는 Expanded 위젯의 역할과 동일하다.
      • 기본 값 : false
    • double? itemHeight
      • 각 메뉴 항목의 높이
    • Color? focusColor
      • 항목이 선택된 경우의 드롭다운 버튼의 배경 색상
    • FocusNode? focusNode
      • 해당 드롭다운 버튼에 대해 사용될 포커스 노드
    • bool autofocus
      • 자동 포커스 여부
      • 기본 값 : false
    • Color? dropdownColor
      • 드롭다운 버튼의 배경색
    • InputDecoration? decoration
      • 드롭다운 버튼에 대한 스타일
    • void Function(Object?)? onSaved
      • FormState나 Form을 통해서 저장됬을 때 동작할 기능
    • String? Function(String?)? validator
      • 유효성 검증을 진행하는 방법
      • 유효성에 문제가 있는 경우에는 해당 상황에 대한 오류 메시지를 반환한다.
    • AutovalidateMode? autovalidateMode
      • 종류
        • AutovalidateMode.onUserInteraction
          • 컨텐츠가 변경된 후에만 자동 유효성 검사가 수행된다.
        • AutovalidateMode.always
          • 사용자 상호 작용 없이도 자동 유효성 검사가 수행된다.
        • AutovalidateMode.disabled
          • 자동 유효성 검사가 비활성화된다.
    • double? menuMaxHeight
      • 메뉴의 최대 높이
      • 해당 값 설정 시 랜더링된 실제 메뉴 목록의 높이가 지정 값 보다 크다면
        설정한 값만큼의 범위 안에서 스크롤하게 한다.
    • bool? enableFeedback
      • 감지된 제스처에 대한 음향/촉각 피드백
    • AlignmentGeometry alignment
      • 힌트 또는 선택한 항목이 버튼 내에 배치되는 방식
      • 기본 값 : AlignmentDirectional.centerStart
    • BorderRadius? borderRadius
      • border의 둥근 정도
    • EdgeInsetsGeometry? padding
      • 주변 여백

Radio

  • 상호 배타적인 여러 값 중에서 하나의 선택할 때 주로 사용된다.
  • 주로 사용하는 속성
    • dynamic value
      • 해당 라디오 버튼을 선택하는 경우에 대한 값
      • 필수
    • dynamic groupValue
      • 라디오 버튼 그룹에 대해서 현재 선택된 값
      • groupValue의 값이 value의 값과 일치하면 선택된 것으로 간주한다.
      • 필수
    • void Function(dynamic)? onChanged
      • 라디오 버튼 선택 시 동작할 기능
      • 필수
    • bool toggleable
      • 토글 가능 여부
      • 기본 값 : false
    • Color? activeColor
      • 라디오 버튼이 선택된 경우의 색상
      • 외곽선과 내부의 원 도형의 색상이 바뀐다.
    • Color? focusColor
      • 버튼에 입력 포커스가 있는 경우의 배경색
    • Color? hoverColor
      • 버튼 위에 포인터가 있는 경우의 배경색
    • double? splashRadius
      • 스플래시 범위
    • FocusNode? focusNode
      • 해당 드롭다운 버튼에 대해 사용될 포커스 노드
    • bool autofocus
      • 자동 포커스 여부
      • 기본 값 : false
  • 참고
List<String> list = <String>["RED", "ORANGE", "YELLOW", "GREEN", "BLUE", "INDIGO", "VIOLET"];

String? _groupValue = list.first;

Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
        for(String item in list)
        ListTile(
            title: Text(item),
            leading: Radio<String>(
                value: item,
                groupValue: _groupValue,
                onChanged: (String? value) {
                    setState(() {
                        _groupValue = value;
                    });
                },
            ),
        )
    ],
)

Checkbox

  • 체크박스를 만드는 위젯
  • 주로 사용하는 속성
    • bool? value
      • 해당 체크박스의 값
      • true일 때 활성화된다.
      • 필수
    • bool tristate
      • true일 경우 해당 체크박스에 대시 아이콘 표시된다.
      • 해당 값이 true일 경우 value의 값은 true → null → false 순으로 변경된다.
      • 기본 값 : false
    • Function(bool?)? onChanged
      • value의 값이 변경되었을 때 동작할 기능
      • 필수
    • Color? activeColor
      • 체크박스가 선택된 경우의 체크 아이콘의 색상
    • Color? checkColor
      • 체크박스가 선택된 경우의 내부 배경색
    • Color? focusColor
      • 체크박스에 입력 포커스가 있는 경우의 배경색
    • Color? hoverColor
      • 체크박스 위에 포인터가 있는 경우의 배경색
    • double? splashRadius
      • 스플래시 범위
    • FocusNode? focusNode
      • 해당 체크박스에 대해 사용될 포커스 노드
    • bool autofocus
      • 자동 포커스 여부
      • 기본 값 : false
    • OutlinedBorder? shape
      • 체크박스의 모양
    • BorderSide? side
      • 외곽선에 대한 스타일 지정
    • bool isError
      • true일 경우 해당 체크박스가 오류 상태임을 나타낸다.
      • 기본 값 : false
  • 참고
bool isChecked = false;

Checkbox(
    checkColor: Colors.white,
    value: isChecked,
    onChanged: (bool? value) {
        setState(() {
            isChecked = value!;
        });
    },
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(50)
    ),
)

Switch

  • 스위치를 만드는 위젯
  • 단일 설정의 켜기/끄기 상태를 전환하는 데 사용된다.
  • ThemeData.useMaterial3의 값을 true로 설정하면
    사용자는 Switch.thumbIcon을 사용하여
    Switch의 다양한 MaterialState를 기반으로
    토글 버튼에 아이콘을 추가 할 수 있다.
    • theme 속성에 ThemeData(useMaterial3: true)를 적용해야 한다.
  • 주로 사용하는 속성
    • bool value
      • 해당 스위치의 값
      • true일 때 활성화된다.
      • 필수
    • Function(bool)? onChanged
      • value의 값이 변경되었을 때 동작할 기능
      • 필수
    • Color? activeColor
      • 스위치가 활성화된 경우의 토글 버튼의 색상
    • Color? activeTrackColor
      • 스위치가 활성화된 경우의 트랙의 색상
    • Color? inactiveThumbColor
      • 스위치가 비활성화된 경우의 토글 버튼의 색상
      • Switch.adaptive로 생성되면 해당 속성을 무시한다.
    • Color? inactiveTrackColor
      • 스위치가 비활성화된 경우의 트랙의 색상
    • ImageProvider<Object>? activeThumbImage
      • 스위치가 활성화된 경우의 토글 버튼에 적용할 이미지
      • Switch.adaptive로 생성되면 해당 속성을 무시한다.
    • Function(Object, StackTrace?)? onActiveThumbImageError
      • activeThumbImage 로드 시 오류가 발생한 경우에 동작할 기능
    • ImageProvider<Object>? inactiveThumbImage
      • 스위치가 비활성화된 경우의 토글 버튼에 적용할 이미지
    • Function(Object, StackTrace?)? onInactiveThumbImageError
      • inactiveThumbImage 로드 시 오류가 발생한 경우에 동작할 기능
    • DragStartBehavior dragStartBehavior
      • 기본 값 : DragStartBehavior.start
    • Color? focusColor
      • 토글 버튼에 입력 포커스가 있는 경우의 배경색
    • Color? hoverColor
      • 토글 버튼 위에 포인터가 있는 경우의 배경색
    • MaterialStateProperty<Color?>? overlayColor
    • double? splashRadius
      • 스플래시 범위
    • FocusNode? focusNode
      • 해당 스위치에 대해 사용될 포커스 노드
    • bool autofocus
      • 자동 포커스 여부
      • 기본 값 : false
  • 참고
bool _isChecked = false;

Switch(
    value: _isChecked,
    activeColor: Colors.red,
    activeTrackColor: Colors.blue,
    inactiveThumbColor: Colors.yellow,
    inactiveTrackColor: Colors.green,
    onChanged: (bool value) {
        setState(() {
            _isChecked = value;
        });
    },
)
bool _isChecked = false;
final MaterialStateProperty<Icon?> thumbIcon =
MaterialStateProperty.resolveWith<Icon?>(
    (Set<MaterialState> states) {
        if (states.contains(MaterialState.selected)) {
            return const Icon(Icons.check);
        }
        return const Icon(Icons.close);
    },
);

Switch(
    thumbIcon: thumbIcon,
    value: _isChecked,
    onChanged: (bool value) {
        setState(() {
            _isChecked = value;
        });
    },
)
  • 사용자가 여러 항목 중에서 선택할 수 있게 하는 유형의 버튼
  • 속성 목록
    • List<DropdownMenuItem>? items
      • 사용자가 선택할 수 있는 항목 목록
      • null 경우 해당 드롭다운 버튼은 비활성화 된다.
      • 필수
    • Function(BuildContext)? selectedItemBuilder
      • 항목 목록을 생성하는 빌더 메소드
    • dynamic value
      • 현재 선택된 값
      • value가 null이고 버튼이 활성화된 경우는 hint가 표시된다.
      • value가 null이고 버튼이 비활성화된 경우는 disabledHint가 표시된다.
    • Widget? hint
      • placeholder 유형 위젯
      • value가 null이고 버튼이 활성화된 경우에 표시된다.
      • value가 null이고 버튼이 비활성화되고 disabledHint가 null인 경우에 표시된다.
    • Widget? disabledHint
      • placeholder 유형 위젯
      • value가 null이고 버튼이 비활성화된 경우에 표시된다.
    • Function(dynamic)? onChanged
      • 항목을 선택한 경우에 동작할 기능
      • null 경우 해당 드롭다운 버튼은 비활성화 된다.
      • 필수
    • Function()? onTap
      • 드롭다운 버튼을 선택한 경우에 동작할 기능
      • 드롭다운 버튼이 비활성화된 경우에는 호출되지 않는다.
    • int elevation
      • 드롭다운 버튼 선택 시 나올 항목 목록을 배치할 z 좌표
      • 기본 값 : 8
    • TextStyle? style
      • 드롭다운 버튼 및 드롭다운의 텍스트에 사용할 스타일
    • Widget? underline
      • 드롭다운 버튼의 밑줄을 그리는 데 사용할 위젯
    • Widget? icon
      • 드롭다운 버튼 아이콘에 사용할 위젯
    • Color? iconDisabledColor
      • 버튼이 비활성화 된 경우의 icon 색상
    • Color? iconEnabledColor
      • 버튼이 활성화 된 경우의 icon 색상
    • double iconSize
      • icon의 크기
      • 기본 값 : 24.0
    • bool isDense
      • 드롭다운 버튼의 높이를 내부 위젯에 맞추는 것에 대한 여부
      • 기본적으로 드롭다운 버튼의 높이는 항목의 높이와 같다.
      • 기본 값 : false
    • bool isExpanded
      • 드롭다운 버튼의 내부 컨텐츠가 상위 항목을 가로로 채우도록 설정한다.
      • 기본적으로 드롭다운 버튼의 내부 너비는 해당 컨텐츠의 최소 크기이다.
      • Row에서 사용되는 Expanded 위젯의 역할과 동일하다.
      • 기본 값 : false
    • double? itemHeight
      • 각 메뉴 항목의 높이
      • 기본 값 : kMinInteractiveDimension
    • Color? focusColor
      • 항목이 선택된 경우의 드롭다운 버튼의 배경 색상
    • FocusNode? focusNode
      • 해당 드롭다운 버튼에 대해 사용될 포커스 노드
    • bool autofocus
      • 자동 포커스 여부
      • 기본 값 : false
    • Color? dropdownColor
      • 드롭다운 버튼의 배경색
    • double? menuMaxHeight
      • 메뉴의 최대 높이
      • 해당 값 설정 시 랜더링된 실제 메뉴 목록의 높이가 지정 값 보다 크다면
        설정한 값만큼의 범위 안에서 스크롤하게 한다.
    • bool? enableFeedback
      • 감지된 제스처에 대한 음향/촉각 피드백
    • AlignmentGeometry alignment
      • 힌트 또는 선택한 항목이 버튼 내에 배치되는 방식
      • 기본 값 : AlignmentDirectional.centerStart
    • BorderRadius? borderRadius
      • border의 둥근 정도
    • EdgeInsetsGeometry? padding
      • 주변 여백
  • 참고
List<String> list = <String>['One', 'Two', 'Three', 'Four'];

String dropdownValue = list.first;

DropdownButton<String>(
    value: dropdownValue,
    icon: const Icon(Icons.arrow_downward),
    elevation: 16,
    style: const TextStyle(color: Colors.deepPurple),
    underline: Container(
        height: 2,
        color: Colors.deepPurpleAccent,
    ),
    onChanged: (String? value) {
        setState(() {
            dropdownValue = value!;
        });
    },
    items: list.map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
            value: value,
            child: Text(value),
        );
    }).toList(),
)
  • TextField 에서 열 수 있는 드롭다운 메뉴
  • 선택한 메뉴 항목이 해당 필드에 표시된다.
  • DropdownButton의 Material 3 버전
  • 주로 사용하는 속성
    • bool enabled
      • 사용 가능 여부
      • 기본 값 : true
    • double? width
      • 드롭다운 메뉴의 가로 길이
    • double? menuHeight
      • 각 메뉴 항목마다의 세로 길이
    • Widget? leadingIcon
      • 드롭다운 메뉴 좌측에 추가될 아이콘
    • Widget? trailingIcon
      • 드롭다운 메뉴 우측에 추가될 아이콘
      • 드롭다운 메뉴에 포커스가 없을 때 노출된다.
    • Widget? label
      • 안내를 위한 위젯
    • String? hintText
      • 해당 드롭다운 메뉴에 대한 placeholder
    • String? helperText
      • 해당 드롭다운 메뉴에 대한 안내 문구
    • String? errorText
      • 오류가 발생한 경우에 대한 안내 문구
      • errorText가 null이 아니면 helperText 대신에 노출된다.
    • Widget? selectedTrailingIcon
      • 드롭다운 메뉴 우측에 추가될 아이콘
      • 드롭다운 메뉴에 포커스가 있을 때 노출된다.
    • bool enableFilter
      • 텍스트 입력으로 메뉴 목록을 필터링할 수 있는지에 대한 여부
      • 기본 값 : false
    • bool enableSearch
      • 텍스트 입력과 일치하는 첫 번째 항목을 강조할 것인지에 대한 여부
      • 기본 값 : true
    • TextStyle? textStyle - 드롭다운 메뉴 및 드롭다운의 텍스트에 사용할 스타일
    • InputDecorationTheme? inputDecorationTheme
      • 입력란의 스타일을 지정
    • MenuStyle? MenuStyle
      • 각 메뉴 항목의 스타일을 지정
    • TextEditingController? controller - 편집 중인 텍스트를 제어하기 위한 컨트롤러 - null일 경우 DropdownMenu에서 자체적으로 생성한다.
    • dynamic initialSelection
      • 초기 값
    • Function(dynamic)? onSelected
      • 각 메뉴 항목을 선택했을 때 동작할 기능
    • bool? requestFocusOnTap
      • 가상 키보드 노출 여부
    • List<DropdownMenuEntry<dynamic» dropdownMenuEntries
      • 드롭다운 메뉴의 항목 목록
      • 필수
  • 참고
enum ColorLabel {
    blue('Blue', Colors.blue),
    pink('Pink', Colors.pink),
    green('Green', Colors.green),
    yellow('Orange', Colors.orange),
    grey('Grey', Colors.grey);

    const ColorLabel(this.label, this.color);
    final String label;
    final Color color;
}

final TextEditingController colorController = TextEditingController();
ColorLabel? selectedColor;

DropdownMenu<ColorLabel>(
initialSelection: ColorLabel.green,
controller: colorController,
requestFocusOnTap: true,
label: const Text('Color'),
onSelected: (ColorLabel? color) {
    setState(() {
        selectedColor = color;
    });
},
dropdownMenuEntries: ColorLabel.values
    .map<DropdownMenuEntry<ColorLabel>>(
        (ColorLabel color) {
            return DropdownMenuEntry<ColorLabel>(
                value: color,
                label: color.label,
                enabled: color.label != 'Grey',
                style: MenuItemButton.styleFrom(
                foregroundColor: color.color,
                ),
            );
        }).toList(),
)

Slider

  • 지정한 범위 내에서 특정한 값을 선택하는 위젯
  • 주로 사용하는 속성
    • double value
      • 슬라이더의 메인 트랙 값
      • 필수
    • double? secondaryTrackValue
      • 슬라이더의 보조 트랙 값
      • value 속성의 값보다 작으면 보조 트랙은 표시되지 않는다.
      • 재생 진행율과 버퍼링을 함께 표시하는 경우에 사용하면 좋다.
    • Function(double)? onChanged
      • 슬라이드가 움직이는 도중에 동작할 기능
      • 필수
    • Function(double)? onChangeStart
      • 슬라이드의 이동이 시작했을 때 동작할 기능
    • Function(double)? onChangeEnd
      • 슬라이드의 이동이 끝났을 때 동작할 기능
    • double min
      • 최솟값
      • 기본 값 : 0.0
    • double max
      • 최댓값
      • 기본 값 : 1.0
    • int? divisions
      • 전체 범위를 나눌 단위 수
      • 만약 min이 0이고 max가 100이며 divisions가 5일 경우 슬라이더의 범위는 20씩 나눠진다.
    • String? label
      • onChanged 진행 중에 보여질 문구
    • Color? activeColor
      • 메인 트랙의 색상
      • thumbColor가 null일 경우에는 슬라이드 버튼의 색상이 된다.
    • Color? inactiveColor
      • 슬라이더가 비활성화된 경우의 색상
    • Color? secondaryActiveColor
      • 보조 트랙의 색상
    • Color? thumbColor
      • 슬라이드 버튼의 색상
    • FocusNode? focusNode
      • 해당 슬라이더에 대해 사용될 포커스 노드
    • bool autofocus
      • 자동 포커스 여부
      • 기본 값 : false
    • SliderInteraction? allowedInteraction
      • 슬라이더와 상호작용하는 방법을 지정한다.
  • 참고
double _currentSliderValue = 20;

Slider(
    value: _currentSliderValue,
    secondaryTrackValue: 50,
    max: 100,
    divisions: 5,
    label: _currentSliderValue.round().toString(),
    activeColor: Colors.orange,
    inactiveColor: Colors.grey,
    secondaryActiveColor: Colors.orange.withOpacity(0.5),
    onChanged: (double value) {
        print("onChanged : $value");
        setState(() {
        _currentSliderValue = value;
        });
    },
    onChangeStart: (value) {
        print("onChangeStart : $value");
    },
    onChangeEnd: (value) {
        print("onChangeEnd : $value");
    },
)

Autocomplete

  • 텍스트를 입력하고 옵션 목록 중에서 선택하여 사용자의 선택을 돕는 위젯
  • 주로 사용하는 속성
    • FutureOr<Iterable<Object» Function(TextEditingValue) optionsBuilder
      • 입력된 텍스트 존재 시 현재 선택가능한 옵션 개체 목록을 반환하는 메소드
      • 필수
    • Widget Function(BuildContext, TextEditingController, FocusNode, void Function()) fieldViewBuilder
      • 기본 값 : _defaultFieldViewBuilder
    • void Function(Object)? onSelected
      • 항목 선택 시 동작할 기능
    • double optionsMaxHeight
      • 각 항목의 최대 세로 길이
      • 기본 값 : 200.0
    • Function(BuildContext, void Function(Object), Iterable<Object>)? optionsViewBuilder
      • Autocomplete 위젯의 형태를 만드는 메소드
    • OptionsViewOpenDirection optionsViewOpenDirection
      • 기본 값 : OptionsViewOpenDirection.down
    • TextEditingValue? initialValue
      • 항목 목록이 열리는 방향
      • 종류
        • OptionsViewOpenDirection.down
          • 하단 방향으로 열린다.
        • OptionsViewOpenDirection.up
          • 상단 방향으로 열린다.
      • 기본 값 : OptionsViewOpenDirection.down
  • 참고
List<String> _wordList = <String>[ 'Lion', 'Tiger', 'Cat', ];

Autocomplete<String>(
    optionsBuilder: (TextEditingValue textEditingValue) {
        if (textEditingValue.text == '') {
            return const Iterable<String>.empty();
        }
        return _wordList.where((String option) {
            return option.contains(textEditingValue.text.toLowerCase());
        });
    },
    onSelected: (String selection) {
        debugPrint('You just selected $selection');
    },
)
Dart, Flutter
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.