Study Record

✍ 입력 폼이 포함된 화면 입력 폼(TextField, TextFormField 등)이 포함된 화면은 키보드가 올라와 화면을 가리면서 overflowed 가 날 수 있다. 이럴 경우 SingleChildScrollView 를 최상단에 위젯 상단에 배치하면 키보드가 올라와도 스크롤이 가능하기 때문에 overflowed 문제가 생기지 않는다. 😶 예시) import 'package:flutter/material.dart'; void main() => runApp(MaterialApp(home: ScrollControlView())); class ScrollControlView extends StatelessWidget { const ScrollControlView({Key? key}) : super(key:..

✍ TextField 에서 비밀번호 입력 설정 입력 폼 중 비밀번호를 입력하는 형식이면 글자를 입력할 때 작은 원으로 보이는 기능은 TextField 의 obscureText 를 true 로 해주면 된다. TextField( obscureText: true, )

✍ 입력 폼 border TextField(TextFormField) 의 border 에는 여러 가지 종류가 있는데 여러 가지 상황에서 border 값을 따로 설정할 수 있다. 종류는 다음 표와 같다. border 인자만 설정했을 때 기본 border 값이지만 실제로 시작하고 focus가 없는 처음 상태에서 기본 border 로 적용이 안될 때가 있다. 이때는 enabledBorder 값을 설정해 주면 enabledBorder 값으로 적용된다. 인자 설명 border 기본 border focusBorder focus 가 있는 상태 errorBorder error 상태에서 focus 가 없는 상태 focusErrorBorder error 상태에서 focus 가 있는 상태 enabledBorder 사용 가능..

✍ TextFormField Widget TextFormField 위젯은 TextField 에서 몇개의 기능이 추가된 위젯이다. 따라서, TextField 에서 사용하는 인자값을 거의 그대로 사용할 수 있다. 또한, TextFormField 에는 사용자가 입력한 입력 값을 검증해 정해진 오류에 맞는 text를 보여줄 수 있다.(validator) TextFormField 와 Form 위젯을 함께 사용하면 여러개의 입력값을 한번에 관리할 수 있다. 바로 예시를 들면, import 'package:flutter/material.dart'; void main() => runApp(MaterialApp(home: HomeScreen())); class HomeScreen extends StatefulWidget..

✍ 키보드가 차지하는 영역 키보드가 차지하는 영역은 MediaQuery.of(context).viewInsets 에서 가져올 수 있다. [Flutter] MediaQuery , MediaQueryData ✍ MediaQuery MediaQuery 는 정의에 따르면, "미디어 쿼리가 지정된 데이터를 확인하는 하위 트리를 설정합니다." 라고 되어있다. 조금 더 쉽게 이야기하면 현재 미디어(ex. 앱 화면)에 대한 정보를 주 laustudy.tistory.com ✍ 바텀 시트에서 입력받기 바텀 시트 위젯에 전체적으로 높이를 (기본 높이 + 키보드가 차지하는 영역) 으로 하고 bottom padding 값을 (기본 bottom padding + 키보드가 차지하는 영역) 으로 하면 키보드에 따라 자연스럽게 늘어났..

✍ TextField 에서 Focus 다루기 TextField 의 autoFocus 를 true 로 하면 그 TextField 에 focus가 잡히면서 키보드가 자동으로 올라간다. TextField( autoFocus: true ) 😶 코드로 Focus 요청하기 사용자가 TextField 를 클릭하거나 액션 버튼을 눌렀을 때 다음 TextField 로 focus 가 넘어가는 등 이외에도 코드로 포커스를 잡거나 해제할 수 있다. 바로 FocusNode 를 사용한다. FocusNode = myFocusNode = FocusNode(); // TextField 에 focusNode 연결 TextField( focusNode: myFocusNode; ); // 연결된 TextField 에 포커스 주기 myFoc..

✍ 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.sta..

✍ TextField - Text decoration TextField 에서 텍스트 폰트, 색상 등 스타일을 지정하는 것은 style 인자의 TextStyle() 를 참고한다. [Flutter] Text() ✍ Text Class 단일 스타일의 텍스트를 보여준다. Text( String this.data, { super.key, this.style, this.strutStyle, this.textAlign, this.textDirection, this.locale, this.softWrap, this.overflow, this.textScaleFactor, this.maxLines, this.semanti laustudy.tistory.com 😶 텍스트 방향 (textDirection) 언어마다 읽는 방..