Study Record

✍ SingleChildScrollView Widget 가장 기본적인 스크롤 가능한 위젯이다. child 인자에 원하는 위젯(ex. Column)을 넣으면 기본 값으로 위젯이 화면 사이즈를 넘게 되면 스크롤이 가능하고 화면 사이즈를 넘지 않으면 기본 위젯으로만 작동한다. SingleChildScrollView 위젯은 child 에 있는 위젯을 한번에 그린다. 즉, child 에 Column 위젯을 넣었는데 children list 의 길이가 100이면 100개 한번에 생성된다. 따라서 들어가는 위젯이 많으면 비용 면에서 비효율적일 수 있다. SingleChildScrollView( child: Column( children: [ Colors.red, Colors.yellow, Colors.green, C..

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

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