Archive/Flutter (11) 썸네일형 리스트형 Flutter copyWith Method * 개인적인 공부 내용을 기록하기 위해 작성한 포스팅이기에 잘못된 내용을 포함하고 있을 수 있습니다. * Flutter FrameWork의 copyWith 메서드와 사용법에 대한 내용에 대해 정리한 글입니다.What is copyWith?copyWith method는 주로 immutable object(불변객체)에서 사용되는 메서드로, 변경하고자 하는 객체를 복사해 특정 필드만 변경할 수 있도록 도와주는 메서드이다. 플러터는 상태를 관리할 때 기존 객체를 직접 수정하는 방식이 아닌 새로운 객체를 생성한 뒤 객체의 필드를 수정하는 방식으로 동작한다. 이때 copyWith method를 사용하면 보다 편리하게 객체의 필드를 변경할 수 있다. copyWith method Usage Example Code_.. Flutter Constraint 자식 위젯 크기 규칙 HTML 같은 마크다운 언어나 안드로이드 개발 시 사용되는 XML로 페이지를 명시하는 경우에는 화면에 표시될 UI의 위치를 어느정도 예측하고 명시할 수 있다. 그러나 플러터의 레이아웃은 "Constraints Go Down" 이라는 원칙을 따르기에 위젯이 위치할 위치를 직접 명시해 주어야만 한다. #Constraints Go DownConstraints Go Down 이란? 플러터에서 자식 위젯의 크기는 부모 위젯에 의해서 결정되며, 자식 위젯의 크기가 결정되면 부모 위젯에게 자식의 크기를 명시해 주어야 하는 원칙. 다음 코드는 Container Widget의 위치 제약을 별도로 명시해주지 않았기에 좌측 상단에 배치된다.import 'package:bloggingtest/firstPage.dart';im.. Flutter Navigator 페이지 간 데이터 주고 받기 #1 Navigator를 이용해 페이지 전환하기Navigator는 Stack 구조로 동작합니다.예를들어 firstPage.dart 파일에서 sceondPage.dart 파일로 화면을 전환할 경우 firstPage 위에 secondPage가 쌓이는 구조입니다.다음은 firstPage 위에 secondPage를 push 하는 부분입니다.builder 파라미터의 반환부에 추가할 페이지 클래스 인스턴스를 할당해 주면 됩니다. Navigator.of(context).push( MaterialPageRoute( builder: (BuildContext context) { return SecondPage.. Flutter TextFieldWidget 키보드 자판 OverFlow 현상 해결 방법 SingleChildScrollView 위젯을 이용해 오버플로우 방지 TextField Widget 이란 텍스트 정보를 입력받고자 할 때 사용하는 텍스트 입력 위젯이다. TextField Widget 클릭시 시뮬레이터 하단에서 키보드 자판이 올라오게 되는데, 이 때 올라오는 키보드 자판은 화면 절반의 크기를 차지하게 된다. 이 때 텍스트 필드 위젯을 사용하는 스크린 내부의 위젯들이 전체 화면 절반 이상의 크기를 차지하고 있다면 다음과 같이 OverFlow 현상이 발생하여 화면 잘림 에러를 발생시키게 된다. 해결 방안은 간단한데, 페이지를 스크롤 가능하도록 SingleChildScrollView Widget으로 감싸 주는 것이다. 그러면 다음과 같이 화면이 스크롤 가능 하도록 변경되어, 키보드 자판이 올라.. Flutter Intl 다국어화 패키지 캘린더 언어 설정 * 다음 포스팅은 intl 패키지를 이용해 table_calendar 패키지의 언어를 한국어로 설정하는 방법에 대해서 다룹니다. table_calendar 패키지의 사용방법에 대한 내용은 포함하고 있지 않으니 다음 포스팅을 참고해 주세요. related : Table_Calendar 패키지 사용법 정리 Intl Package 쉽게 다른 패키지의 언어를 다른 언어로 업데이트 하도록 해주는 편리한 패키지이다. 앞서 정리한 table_calendar 패키지는 기본적으로 언어가 영어로 설정되어 있기에 (달/월/날짜 정보 등..) intl 패키지를 이용해 한국어로 업데이트 해 주어야 한다. https://pub.dev/packages/intl intl | Dart Package Contains code to de.. Flutter Table_Calendar Package 사용법 정리 List #0 사전작업 #1 기본 사용법 #1.1 필수 파라미터 #1.2 스타일 관련 파라미터 #1.2.1 Header Style Parameter #1.2.2 Calendar Style Parameter #2 이벤트 헨들링 #2.1 캘린더 날짜 클릭 인식 개인적인 공부 기록 용도로 Flutter Table_Calendar Package 사용법에 관련한 내용에 대해 정리한 글 입니다. _related : intl 패키지로 캘린더 한국어화 하는 방법 Table_Calendar Package https://pub.dev/packages/table_calendar table_calendar | Flutter Package Highly customizable, feature-packed calendar widg.. Flutter Row & Column Widget 사용법 총 정리 Flutter FrameWork는 Row, Column 위젯을 사용해 UI를 구성합니다. 이번 포스팅에서는 Row, Column 위젯의 정의 및 사용법 그리고 Row, Column 위젯과 관련된 다양한 속성들 mainAxisAlignment, CrossAxisAlignment, mainAxisSize 의 사용법에 대해 정리할 예정입니다. #0 Row & Column Widget #0.1 Row Widget #0.2 Column Widget 💡 Row, Column Widget은 주축을 화면 최대의 크기를 차지한다. #1 MainAxisAlignment & CrossAixsAlignment #1.1 MainAxisAlignment #1.2 CrossAxisAlignment #2 mainAxisSize #0.. Android Studio 에뮬레이터 분리 및 항상 맨 앞으로 오도록 설정 Android Studio에서 처음으로 가상 환경 에뮬레이터를 실행하면 다음과 같이 Device Manager Tap 에 고정되어 출력됩니다. 이번 포스팅 에서는 에뮬레이터를 Device Manager Tab에서 분리하는 방법과, 안드로이드 스튜디오를 클릭해도 에뮬레이터가 화면에서 뒤로 사라지는 현상을 방지하기 위한 방법에 대해서 소개해 드리도록 하겠습니다. #1 에뮬레이터 분리하기 File → Settings... 혹은 Ctrl + Alt + S 단축키를 클릭합니다. Settings 화면이 출력되면, Emulator 탭을 클릭한 뒤, Launch in a tool Window 항목의 체크를 해제하고 Apply를 눌러 줍니다. Android Studio를 재부팅 해 주시면 에뮬레이터가 분리된 것을 확인할.. 이전 1 2 다음
