집에서 데스크탑으로 작업을 하다가, 학교 기숙사에 오면서 노트북으로 작업을 하려고 하는 상황이었다. 노트북에는 구버전 안드로이드 스튜디오와 플러터 2.x 버전이 깔려있었다. 플러터를 3.x 버전으로 업데이트하고 실행을 하기 전 flutter doctor 를 실행시켰는데 이런 오류가 나왔다. [√] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version 10.0.19042.1348], locale en-IN) [!] Android toolchain - develop for Android devices (Android SDK version 31.0.0) X Could not determine java version [√] Chrome - develop ..

새 화면의 레이아웃을 잡으려고 하는데, scaffold 의 body 에 넣은 위젯이 앱바에 계속 가려지는 현상이 발생했다. 그런데 이상하게 ListView 위젯을 넣으면 앱바에 가려지지 않았다. 앱바 색을 반투명하게 해보니 앱바 뒤에 위젯이 위치한다. 그런데 ListView 위젯을 이용할 땐 또 멀쩡하다. 이 현상의 원인은 바로 Scaffold 의 extendBodyBehindAppBar 속성이었다. 이 속성이 true 로 설정되어 있으면 말 그대로 body 에 들어가는 위젯이 AppBar 영역과 분리되지 않고 AppBar 부분까지 확장되면서 AppBar 가 Body 위로 겹쳐져 올라오게 된다. 그렇다면 왜 ListView 위젯은 이 속성의 영향을 받지 않았던 걸까? 그 답은 ListView 공식 문서에..

SearchDelegate 로 생성하는 검색창의 디자인은 appBarTheme 메서드를 오버라이드해서 바꿀 수 있다. 이때 searchFieldLabel 의 fontSize, fontWeight 등은 textTheme 으로 수정할 수 있다. textTheme: const TextTheme( titleLarge: TextStyle( fontSize: 18, fontWeight: FontWeight.bold, color: Colors.white, ), ), 하지만 fontColor 는 바뀌지 않는다. 여기서 바꾸는 색은 TextInput 박스에 입력되는 글자 색을 바꾸게 된다. searchFieldLabel 의 글자색은 inputDecorationTheme 에서 hintStyle 을 바꾸면 적용된다. inp..

개인 프로젝트로 앱을 만들다가 문제가 한가지 발생했습니다. Wrap 위젯에 Text 위젯을 담고 있는 커스텀 위젯을 자식으로 담아 배치했는데, 각 Text 위젯들의 글자 정렬상태가 맞지 않는 것이었습니다. 예를 들면 이런 모습입니다. Text위젯 하나에 "중에" 를 넣고 그 옆의 Text위젯에 "서 하필" 을 넣었습니다. "중에" 와 "서 하필" 의 줄이 어긋나있습니다. 굉장히 보기 불편하지만, 한글로만 이루어진 가사에서는 그나마 나은 편 입니다. 한글과 영어, 일본어가 섞이니 난장판이 되었습니다. 처음에는 Flutter 버그라고 생각했습니다. 역시 cjk에 대한 지원은 아직 덜된건가 싶었죠 ㅋㅋ 검색도 뭐라고 해야할지 몰라서 text alignment in wrap widget 이런 식으로 검색도 해보..

플러터의 TextField 위젯을 기본값으로 실행시키면 다음과 같은 모습으로 나온다. 빨간색 네모로 표시한 부분을 보면 곡 제목과 그 아래 밑줄 사이의 간격이 꽤 넓다. 이 간격을 줄이는 방법을 알아내기 위해 구글을 미친듯이 검색했고, 플러터 공식 API 문서도 열심히 뒤졌다. 그리고 직접적인 답은 찾지 못했지만, 검색해서 얻은 정보들을 조합하여 답을 알아냈다... 저 간격을 조정하려면 TextField위젯의 decoration 속성에 TextInputDecoration() 객체를 설정하여 달아주어야 한다는 것을 검색을 통해 알게되었다. 그리고 안드로이드 스튜디오를 이용하여, 저 TextInputDecoration() 객체에 설정할 수 있는 모든 속성을 샅샅히 살펴본 결과 contentPadding 이라..

* 플러터를 원문 공식 문서 (https://flutter.dev/docs)를 읽으면서 공부하는 과정에서 정리하고자 작성하는 포스팅으로 저는 플러터 실무 개발 경력이 없는 대학생인 점을 미리 밝힙니다. * 추가로 오준석의 플러터 생존코딩 및 제 개인 경험을 참고하여 작성하고 있습니다. * 오역, 오탈자, 잘못된 내용의 지적은 항상 감사히 받겠습니다 :) 이번에는 TextField 위젯의 입력값의 유효성을 검사해보겠습니다. 먼저 TextField 위젯은 사용자로부터 키보드 입력을 받는 기본적인 위젯입니다. 제가 진행중인 프로젝트에서 TextField 위젯을 사용한 모습입니다. 몇가지 설정을 해주어서 기본 모습과는 다른 디자인이지만 이렇게 입력을 받는 위젯입니다. 곡제목, 가수를 입력받는 곳에 사용된 위젯이..

* 플러터를 원문 공식 문서 (https://flutter.dev/docs)를 읽으면서 공부하는 과정에서 정리하고자 작성하는 포스팅으로 저는 플러터 실무 개발 경력이 없는 대학생인 점을 미리 밝힙니다. * 추가로 오준석의 플러터 생존코딩 및 제 개인 경험을 참고하여 작성하고 있습니다. * 오역, 오탈자, 잘못된 내용의 지적은 항상 감사히 받겠습니다 :) 이번 포스팅부터는 플러터에 대해 근본적인 부분부터 공부해보고자 합니다. 그 시작으로 '위젯'에 대해 공부한 내용을 정리하고자 합니다. 원본 문서는 아래와 같습니다. https://flutter.dev/docs/development/ui/widgets-intro Introduction to widgets Learn about Flutter's widgets..

* 플러터를 원문 공식 문서 (https://flutter.dev/docs)를 읽으면서 공부하는 과정에서 정리하고자 작성하는 포스팅으로 저는 플러터 실무 개발 경력이 없는 대학생인 점을 미리 밝힙니다. * 추가로 오준석의 플러터 생존코딩 및 제 개인 경험을 참고하여 작성하고 있습니다. * 오역, 오탈자, 잘못된 내용의 지적은 항상 감사히 받겠습니다 :) 이 포스팅 역시, 아래 게시글의 내용을 기본으로 합니다. https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2#5 첫 Flutter 앱 작성, 2부 | Google Codelabs Flutter는 하나의 코드베이스를 사용해 모바일, 웹, 데스크톱을 대상으로 아름다운 네이티브 컴파일 애..

* 플러터를 원문 공식 문서 (https://flutter.dev/docs)를 읽으면서 공부하는 과정에서 정리하고자 작성하는 포스팅으로 저는 플러터 실무 개발 경력이 없는 대학생인 점을 미리 밝힙니다. * 추가로 오준석의 플러터 생존코딩 및 제 개인 경험을 참고하여 작성하고 있습니다. * 오역, 오탈자, 잘못된 내용의 지적은 항상 감사히 받겠습니다 :) 이 문서의 내용은 https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2#3 첫 Flutter 앱 작성, 2부 | Google Codelabs Flutter는 하나의 코드베이스를 사용해 모바일, 웹, 데스크톱을 대상으로 아름다운 네이티브 컴파일 애플리케이션을 개발하기 위한 Google의..

* 플러터를 원문 공식 문서 (https://flutter.dev/docs)를 읽으면서 공부하는 과정에서 정리하고자 작성하는 포스팅으로 저는 플러터 실무 개발 경력이 없는 대학생인 점을 미리 밝힙니다. * 추가로 오준석의 플러터 생존코딩 및 제 개인 경험을 참고하여 작성하고 있습니다. * 오역, 오탈자, 잘못된 내용의 지적은 항상 감사히 받겠습니다 :) 지난 포스팅에서 이어, import한 모듈을 사용합니다. Text 위젯에 들어갈 문자열을 import한 모듈을 이용해 넣어보겠습니다. build 메소드에 final 키워드를 넣어 wordPair 인스턴스 변수를 만들고, WordPair.random() 객체를 생성합니다. final은 상수를 만드는 키워드 입니다. Scaffold의 body 인자에 있는 C..