Study Record

✍ key? key 는 위젯 트리에서 위젯이 움직일 때마다 현 상태를 보존하는 역할을 한다. 현 스크롤의 위치를 기억하거나 수정 상태를 보존하는 것이 될 수 있다. 😶 언제 Key 를 사용해야 하나? 대부분 key 를 사용할 필요 없지만 어떤 상태를 유지하고 있는 같은 종류의 위젯 컬렉션을 더하거나, 제거하거나 정렬해야 할 때 필요하다. 무슨 말인지 모르겠으니 예를 들어, 랜덤한 색상을 가진 Container() 가 두 개 있고 버튼을 누르면 두 개의 Container 가 서로 위치가 바뀌는 앱이 있다. Container() 는 StatelessWidget 으로 설계되어 있고 titles 라는 리스트에 저장되고 플러팅 버튼을 누르면 titles 의 위젯들 위치만 서로 바뀐다. import 'dart:ma..

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

✍ MediaQuery MediaQuery 는 정의에 따르면, "미디어 쿼리가 지정된 데이터를 확인하는 하위 트리를 설정합니다." 라고 되어있다. 조금 더 쉽게 이야기하면 현재 미디어(ex. 앱 화면)에 대한 정보를 주면 데이터를 확인해주는 하위 트리를 설정해주고 우리는 그걸로 미디어에 대한 정보(MediaQueryData)를 얻을 수 있다. 현재 화면에 대한 미디어 정보는 다음과 같이 얻는다. ... Widget build(BuildContext context) { MediaQueryData mediaData = MediaQuery.of(context); } MediaQuery.of 는 BuildContext 를 기반으로 관련된 MediaQuery 를 찾을 수 없으면 예외를 발생시킨다. 이럴 경우엔 M..

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

✍ textInputAction 키보드의 엔터 버튼의 값을 바꿀 수 있다. TextField( textInputAction: TextInputAction.next, ); TextInputAction Logical meaning Android IOS none 입력 소스에 대한 관련된 액션 없음. IME_ACTION_NONE 존재하지 않음 unspecified OS별로 가장 적절한 액션을 취함. IME_ACTION_UNSPECIFIED UIReturnKeyDefault done 입력 그룹에 '입력'을 제공함. IME_ACTION_DONE UIReturnKeyDone go 이동 버튼으로 알맞은 곳으로 이동하시키기 위함. IME_ACTION_GO UIReturnKeyGo search 검색 쿼리를 실행시킴. IM..

✍ TextField (keyboardType, inputFormatters) TextField 에서 입력받을 텍스트의 타입을 keyboardType 으로 정할 수 있고 inputFormatters 에 설정된 타입 외의 입력값을 입력하면 거부된다. keyboardType 으로 핸드폰의 키보드가 올라오는 것의 종류를 정할 수 있는데 블루투스로 연결한 키보드 사용 시, 원하지 않는 타입의 텍스트를 입력하는 것을 inputFormatters 가 방지해 준다. 😶 keyboardType TextInputType.none : 키보드가 올라오지 않는다. TextInputType.visiblePassword TextInputType.url TextInputType.streetAdress TextInputType.ph..

✍ 커서와 텍스트 핸들러 Flutter 에서 커서와 텍스트 핸들러의 색상을 바꾸려면 ThemeData 의 textSelectionTheme 값을 변경하면 된다. 각각 cursorColor 는 커서 색상, selectionColor 는 텍스트를 드래그했을 때 드래그한 영역의 색상을 뜻한다. selectionHandleColor 는 텍스트 색상을 변경할 수 있다. runApp( MaterialApp( theme: ThemeData( textSelectionTheme: TextSelectionThemeData( selectionHandleColor: Colors.deepOrangeAccent, selectionColor: Colors.greenAccent.withOpacity(0.3), cursorColor:..