새 화면의 레이아웃을 잡으려고 하는데, 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 이런 식으로 검색도 해보..
* 플러터를 원문 공식 문서 (https://flutter.dev/docs)를 읽으면서 공부하는 과정에서 정리하고자 작성하는 포스팅으로 저는 플러터 실무 개발 경력이 없는 대학생인 점을 미리 밝힙니다. * 추가로 오준석의 플러터 생존코딩 및 제 개인 경험을 참고하여 작성하고 있습니다. * 오역, 오탈자, 잘못된 내용의 지적은 항상 감사히 받겠습니다 :) 이번에는 TextField 위젯의 입력값의 유효성을 검사해보겠습니다. 먼저 TextField 위젯은 사용자로부터 키보드 입력을 받는 기본적인 위젯입니다. 제가 진행중인 프로젝트에서 TextField 위젯을 사용한 모습입니다. 몇가지 설정을 해주어서 기본 모습과는 다른 디자인이지만 이렇게 입력을 받는 위젯입니다. 곡제목, 가수를 입력받는 곳에 사용된 위젯이..
* 플러터를 원문 공식 문서 (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..
* 이 포스팅은 기본적으로 플러터 공식 문서 https://flutter.dev/docs 를 번역하여 작성하고 있습니다. * 추가로 오준석의 플러터 생존코딩 및 제 개인 경험을 참고하여 작성하고 있습니다. * 플러터를 원문 공식 문서를 읽으면서 공부하는 과정에서 정리하고자 작성하는 포스팅으로 저는 플러터 실무 개발 경력이 없는 대학생인 점을 미리 밝힙니다. * 오역, 오탈자, 잘못된 내용의 지적은 항상 감사히 받겠습니다 :) 본 포스팅은 https://flutter.dev/docs/get-started/test-drive https://flutter.dev/docs/get-started/codelab Write your first Flutter app, part 1 How to write a web-ba..
*플러터 공식 document을 기준으로 보고, 오준석의 플러터 생존 코딩 내용을 참고하여 작성하였습니다. 플러터를 설치하기 위해 아래 사이트로 들어갑니다. https://flutter.dev/ Flutter - Beautiful native apps in record time Flutter SDK is Google's UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. flutter.dev 우측 상단의 Get Started를 클릭합니다. 운영체제를 선택합니다. 저는 윈도우에서 설치를 진행하였기 때문에 윈도우를 선택하였습니다. 파란 버튼을 눌러 ..
