Study Record

[Flutter] 입력 받기 (TextField) 본문

Flutter/widget_TextField

[Flutter] 입력 받기 (TextField)

초코초코초코 2023. 2. 25. 17:33
728x90

✍ TextField Widget

하드웨어 키보드 또는 화면 키보드를 사용하여 텍스트를 입력할 수 있다.

TextField({   
  Key? key,  
  TextEditingController? controller,
  FocusNode? focusNode, 
  InputDecoration? decoration = const InputDecoration(),  
  TextInputType? keyboardType,  
  TextInputAction? textInputAction,  
  TextCapitalization textCapitalization = TextCapitalization.none, 
  TextStyle? style, 
  StrutStyle? strutStyle,
  TextAlign textAlign = TextAlign.start, 
  TextAlignVertical? textAlignVertical,  
  TextDirection? textDirection,   
  bool readOnly = false, 
  ToolbarOptions? toolbarOptions, 
  bool? showCursor,
  bool autofocus = false,
  String obscuringCharacter = '•',
  bool obscureText = false,  
  bool autocorrect = true,  
  SmartDashesType? smartDashesType,
  SmartQuotesType? smartQuotesType,
  bool enableSuggestions = true, 
  int? maxLines = 1, 
  int? minLines, 
  bool expands = false,
  int? maxLength, 
  MaxLengthEnforcement? maxLengthEnforcement,  
  void Function(String)? onChanged,
  void Function()? onEditingComplete,  
  void Function(String)? onSubmitted, 
  void Function(String, Map )? onAppPrivateCommand,   
  List ? inputFormatters,   
  bool? enabled,  
  double cursorWidth = 2.0, 
  double? cursorHeight, 
  Radius? cursorRadius,   
  Color? cursorColor, 
  BoxHeightStyle selectionHeightStyle = ui.BoxHeightStyle.tight,   
  BoxWidthStyle selectionWidthStyle = ui.BoxWidthStyle.tight,
  Brightness? keyboardAppearance,   
  EdgeInsets scrollPadding = const EdgeInsets.all(20.0),
  DragStartBehavior dragStartBehavior = DragStartBehavior.start, 
  bool? enableInteractiveSelection,  
  TextSelectionControls? selectionControls,  
  void Function()? onTap,  
  MouseCursor? mouseCursor,  
  Widget? Function(BuildContext, {required int currentLength, required bool isFocused, required int? maxLength})? buildCounter,   
  ScrollController? scrollController,  
  ScrollPhysics? scrollPhysics, 
  Iterable ? autofillHints = const  [], 
  Clip clipBehavior = Clip.hardEdge, 
  String? restorationId,  
  bool scribbleEnabled = true,
  bool enableIMEPersonalizedLearning = true,
})

 

 

예시) 기본 TextField()

import 'package:flutter/material.dart';

void main() =>
    runApp(MaterialApp(home: Scaffold(body: SafeArea(child: _HomeScreen()))));

class _HomeScreen extends StatelessWidget {
  const _HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: TextField(),
    );
  }
}

 

 

 

😶 onChanged, onSubmitted 이벤트

onChanged 는 사용자가 키보드를 입력할 때마다 호출되고 onSubmitted 는 엔터키를 눌렀을 때 호출된다.

TextField(
  onChanged: (value){
    print("onChanged $value");
  },
  onSubmitted: (value){
    print("onSubmitted : $value");
  },
)

 

 

나어지 TextField 와 관련된 설정은 다음 글에서 확인해볼 수 있다.

 

 

[Flutter/TextField] decoration, text, hint

✍ TextField - Text decoration TextField 에서 텍스트 폰트, 색상 등 스타일을 지정하는 것은 style 인자의 TextStyle() 를 참고한다. [Flutter] Text() ✍ Text Class 단일 스타일의 텍스트를 보여준다. Text( String this.da

laustudy.tistory.com

 

 

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

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

laustudy.tistory.com

 

 

[Flutter/TextField] keyboardType, 입력값 필터(inputFormatters)

✍ TextField (keyboardType, inputFormatters) TextField 에서 입력받을 텍스트의 타입을 keyboardType 으로 정할 수 있고 inputFormatters 에 설정된 타입 외의 입력값을 입력하면 거부된다. keyboardType 으로 핸드폰의

laustudy.tistory.com

 

 

[Flutter/TextField] 키보드 액션 버튼 값 바꾸기 (textInputAction)

✍ textInputAction 키보드의 엔터 버튼의 값을 바꿀 수 있다. TextField( textInputAction: TextInputAction.next, ); TextInputAction Logical meaning Android IOS none 입력 소스에 대한 관련된 액션 없음. IME_ACTION_NONE 존재하지

laustudy.tistory.com

 

 

[Flutter] focus 해제/요청하기, 키보드 내리기 (TextField)

✍ TextField 에서 Focus 다루기 TextField 의 autoFocus 를 true 로 하면 그 TextField 에 focus가 잡히면서 키보드가 자동으로 올라간다. TextField( autoFocus: true ) 😶 코드로 Focus 요청하기 사용자가 TextField 를 클

laustudy.tistory.com

 

728x90

'Flutter > widget_TextField' 카테고리의 다른 글

[Flutter/TextField] 입력 폼 border  (0) 2023.03.31
[Flutter] Form + TextFormField - 한번에 입력 값 관리하기, errorText, border  (0) 2023.03.03
[Flutter/TextField] 키보드 액션 버튼 값 바꾸기 (textInputAction)  (0) 2023.02.25
[Flutter/TextField] decoration, text, hint  (0) 2023.02.24
[Flutter/TextField] keyboardType, 입력값 필터(inputFormatters)  (0) 2023.02.24
'Flutter/widget_TextField' Related Articles more