TextField 텍스트를 입력하는 입력란 주로 사용하는 속성TextEditingController? controller편집 중인 텍스트를 제어하기 위한 컨트롤러 null일 경우 TextField에서 자체적으로 생성한다. FocusNode? focusNode해당 TextField에 대한 포커스 노드 지정 InputDecoration? decorationTextField에 대한 스타일 기본 값 : 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 bool? showCursor String obscuringCharacterpassword처럼 대체해서 보여줄 문자 기본 값 : ‘•’ bool obscureText편집 중인 텍스트를 숨길지에 대한 여부 비밀번호같은 경우에 해당된다. true일 경우에는 필드의 텍스트는 복사 및 자르기가 불가능하다. 기본 값 : false int? maxLines int? minLines bool expands 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 (),
),
) 사용자의 입력을 받을 수 있는 다양한 위젯들을 통해 여러 정보들을 하나의 그룹으로 묶어 처리하는 용도 주로 사용하는 속성Key? keyFormState 유형의 GlobalKey를 지정한다. Widget child내부에 표시할 자식 위젯 Column같은 위젯을 많이 쓴다. 필수 bool? canPopfalse일 경우 현재 경로가 pop되는 것을 막는다. void Function(bool)? onPopInvoked void Function()? onChangedForm 위젯 내부의 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에서 자체적으로 생성하고 String? initialValue FocusNode? focusNode해당 TextFormField에 대한 포커스 노드 지정 InputDecoration? decorationTextField에 대한 스타일 기본 값 : 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 bool readOnly읽기 전용 여부 기본 값 : false 커서 노출 여부 String obscuringCharacterpassword처럼 대체해서 보여줄 문자 기본 값 : ‘•’ bool obscureText편집 중인 텍스트를 숨길지에 대한 여부 비밀번호같은 경우에 해당된다. true일 경우에는 필드의 텍스트는 복사 및 자르기가 불가능하다. 기본 값 : false 기본 값 : true int? maxLines int? minLines bool expands int? maxLength int? maxLength Function(String)? onChanged Function()? onEditingComplete Function(String)? onFieldSubmitted Function(String?)? onSavedFormState나 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? hintplaceholder 유형 위젯 value가 null이고 버튼이 활성화된 경우에 표시된다. value가 null이고 버튼이 비활성화되고 disabledHint가 null인 경우에 표시된다. Widget? disabledHintplaceholder 유형 위젯 value가 null이고 버튼이 비활성화된 경우에 표시된다. Function(Object?)? onChanged항목을 선택한 경우에 동작할 기능 null 경우 해당 드롭다운 버튼은 비활성화 된다. 필수 void Function()? onTap드롭다운 버튼을 선택한 경우에 동작할 기능 드롭다운 버튼이 비활성화된 경우에는 호출되지 않는다. int elevation드롭다운 버튼 선택 시 나올 항목 목록을 배치할 z 좌표 기본 값 : 8 TextStyle? style드롭다운 버튼 및 드롭다운의 텍스트에 사용할 스타일 Widget? icon Color? iconDisabledColor Color? iconEnabledColor double iconSize bool isDense드롭다운 버튼의 높이를 내부 위젯에 맞추는 것에 대한 여부 기본적으로 드롭다운 버튼의 높이는 항목의 높이와 같다. 기본 값 : true bool isExpanded드롭다운 버튼의 내부 컨텐츠가 상위 항목을 가로로 채우도록 설정한다. 기본적으로 드롭다운 버튼의 내부 너비는 해당 컨텐츠의 최소 크기이다. Row에서 사용되는 Expanded 위젯의 역할과 동일하다. 기본 값 : false double? itemHeight Color? focusColor항목이 선택된 경우의 드롭다운 버튼의 배경 색상 FocusNode? focusNode해당 드롭다운 버튼에 대해 사용될 포커스 노드 bool autofocus Color? dropdownColor InputDecoration? decoration void Function(Object?)? onSavedFormState나 Form을 통해서 저장됬을 때 동작할 기능 String? Function(String?)? validator유효성 검증을 진행하는 방법 유효성에 문제가 있는 경우에는 해당 상황에 대한 오류 메시지를 반환한다. AutovalidateMode? autovalidateMode종류AutovalidateMode.onUserInteraction컨텐츠가 변경된 후에만 자동 유효성 검사가 수행된다. AutovalidateMode.always사용자 상호 작용 없이도 자동 유효성 검사가 수행된다. AutovalidateMode.disabled double? menuMaxHeight메뉴의 최대 높이 해당 값 설정 시 랜더링된 실제 메뉴 목록의 높이가 지정 값 보다 크다면 bool? enableFeedback AlignmentGeometry alignment힌트 또는 선택한 항목이 버튼 내에 배치되는 방식 기본 값 : AlignmentDirectional.centerStart BorderRadius? borderRadius EdgeInsetsGeometry? padding Radio 상호 배타적인 여러 값 중에서 하나의 선택할 때 주로 사용된다. 주로 사용하는 속성dynamic value해당 라디오 버튼을 선택하는 경우에 대한 값 필수 dynamic groupValue라디오 버튼 그룹에 대해서 현재 선택된 값 groupValue의 값이 value의 값과 일치하면 선택된 것으로 간주한다. 필수 void Function(dynamic)? onChanged bool toggleable Color? activeColor라디오 버튼이 선택된 경우의 색상 외곽선과 내부의 원 도형의 색상이 바뀐다. Color? focusColor Color? hoverColor double? splashRadius FocusNode? focusNode해당 드롭다운 버튼에 대해 사용될 포커스 노드 bool autofocus 참고 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 tristatetrue일 경우 해당 체크박스에 대시 아이콘 표시된다. 해당 값이 true일 경우 value의 값은 true → null → false 순으로 변경된다. 기본 값 : false Function(bool?)? onChangedvalue의 값이 변경되었을 때 동작할 기능 필수 Color? activeColor Color? checkColor Color? focusColor Color? hoverColor double? splashRadius FocusNode? focusNode bool autofocus OutlinedBorder? shape BorderSide? side bool isErrortrue일 경우 해당 체크박스가 오류 상태임을 나타낸다. 기본 값 : 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로 설정하면theme 속성에 ThemeData(useMaterial3: true)를 적용해야 한다. 주로 사용하는 속성bool value해당 스위치의 값 true일 때 활성화된다. 필수 Function(bool)? onChangedvalue의 값이 변경되었을 때 동작할 기능 필수 Color? activeColor Color? activeTrackColor Color? inactiveThumbColor스위치가 비활성화된 경우의 토글 버튼의 색상 Switch.adaptive로 생성되면 해당 속성을 무시한다. Color? inactiveTrackColor ImageProvider<Object>? activeThumbImage스위치가 활성화된 경우의 토글 버튼에 적용할 이미지 Switch.adaptive로 생성되면 해당 속성을 무시한다. Function(Object, StackTrace?)? onActiveThumbImageErroractiveThumbImage 로드 시 오류가 발생한 경우에 동작할 기능 ImageProvider<Object>? inactiveThumbImage스위치가 비활성화된 경우의 토글 버튼에 적용할 이미지 Function(Object, StackTrace?)? onInactiveThumbImageErrorinactiveThumbImage 로드 시 오류가 발생한 경우에 동작할 기능 DragStartBehavior dragStartBehavior기본 값 : DragStartBehavior.start Color? focusColor토글 버튼에 입력 포커스가 있는 경우의 배경색 Color? hoverColor MaterialStateProperty<Color?>? overlayColor double? splashRadius FocusNode? focusNode bool autofocus 참고 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? hintplaceholder 유형 위젯 value가 null이고 버튼이 활성화된 경우에 표시된다. value가 null이고 버튼이 비활성화되고 disabledHint가 null인 경우에 표시된다. Widget? disabledHintplaceholder 유형 위젯 value가 null이고 버튼이 비활성화된 경우에 표시된다. Function(dynamic)? onChanged항목을 선택한 경우에 동작할 기능 null 경우 해당 드롭다운 버튼은 비활성화 된다. 필수 Function()? onTap드롭다운 버튼을 선택한 경우에 동작할 기능 드롭다운 버튼이 비활성화된 경우에는 호출되지 않는다. int elevation드롭다운 버튼 선택 시 나올 항목 목록을 배치할 z 좌표 기본 값 : 8 TextStyle? style드롭다운 버튼 및 드롭다운의 텍스트에 사용할 스타일 Widget? underline드롭다운 버튼의 밑줄을 그리는 데 사용할 위젯 Widget? icon Color? iconDisabledColor Color? iconEnabledColor double iconSize bool isDense드롭다운 버튼의 높이를 내부 위젯에 맞추는 것에 대한 여부 기본적으로 드롭다운 버튼의 높이는 항목의 높이와 같다. 기본 값 : false bool isExpanded드롭다운 버튼의 내부 컨텐츠가 상위 항목을 가로로 채우도록 설정한다. 기본적으로 드롭다운 버튼의 내부 너비는 해당 컨텐츠의 최소 크기이다. Row에서 사용되는 Expanded 위젯의 역할과 동일하다. 기본 값 : false double? itemHeight각 메뉴 항목의 높이 기본 값 : kMinInteractiveDimension Color? focusColor항목이 선택된 경우의 드롭다운 버튼의 배경 색상 FocusNode? focusNode해당 드롭다운 버튼에 대해 사용될 포커스 노드 bool autofocus Color? dropdownColor double? menuMaxHeight메뉴의 최대 높이 해당 값 설정 시 랜더링된 실제 메뉴 목록의 높이가 지정 값 보다 크다면 bool? enableFeedback AlignmentGeometry alignment힌트 또는 선택한 항목이 버튼 내에 배치되는 방식 기본 값 : AlignmentDirectional.centerStart BorderRadius? borderRadius 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 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 double max int? divisions전체 범위를 나눌 단위 수 만약 min이 0이고 max가 100이며 divisions가 5일 경우 슬라이더의 범위는 20씩 나눠진다. String? label Color? activeColor메인 트랙의 색상 thumbColor가 null일 경우에는 슬라이드 버튼의 색상이 된다. Color? inactiveColor Color? secondaryActiveColor Color? thumbColor FocusNode? focusNode bool autofocus 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>)? optionsViewBuilderAutocomplete 위젯의 형태를 만드는 메소드 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 ' );
},
) 