본 글을 해당 영상을 참고하였습니다. https://www.youtube.com/watch?v=Dh-cTQJgM-Q 들어가며 플러터로 토이프로젝트를 진행하다보니 점점 내가 익숙한 방식으로만 코드를 작성한다는 느낌이 들었다. 그리고 내가 하는 방식이 옳은 방식인지에 대한 의문도 종종 들곤하였다. 그래서 나보다 더 개발을 잘하고, 플러터라는 프레임워크에 익숙한 사람들은 어떤 방식으로 코드를 작성하는지 배워보고자, 유튜브에 있는 Modern Login Ui 튜토리얼을 따라해보기로 하였다. 오늘은 이 튜토리얼을 진행하면서 새로웠던 부분을 간략하게 정리해보고자 한다. 글로 안써놓으면 또 까먹으니까.. 구현 화면 튜토리얼에서 구현한 로그인 UI이다. 이번에는 로그인 기능 자체보다, UI나 프로젝트를 구성하는 방식..

HTML 삽입 미리보기할 수 없는 소스 Dart의 기본적인 함수 선언 방법 기본적인 함수 선언 방식은 다음과 같다. String toUpperCase(String s){ return s.toUpperCase(); } 이처럼 함수의 형태는 반환형 함수이름(매개변수형 매개변수이름) { (함수 내용) return 반환값; } 과 같은 형태로 이루어져 있다. 함수의 Named Parameter 클래스에서 Named Parameter를 사용하는 것처럼, 함수에서도 같은 방식으로 사용이 가능하다. 다음은 Named Parameter를 사용하는 함수의 예시이다. // --- Named parameter --- // Named parameter를 사용하면 함수의 매개변수를 순서에 따라 작성할 필요가 없다. // 함수를..

오류 예시 Vertical viewport was given unbounded height. RenderBox was not laid out. Cannot hit test a render box that has never been laid out. Flutter로 UI를 작성하다보면 위의 오류들과 같거나 또는 거의 비슷한 에러들이 종종 발생한다. 나의 경우 위의 세가지 에러가 동시에 발생했다. 그래서 오늘은 이 오류들의 원인과 해결법에 대해서 알아보고자 한다. 원인 먼저, Vertical viewport was given unbounded height 오류 밑의 설명을 읽어보자. Viewports expand in the scrolling direction to fill their container. I..

오류 효빈이와 진행하는 사이드 프로젝트 도중에 마주한 오류이다. 위 오류를 대충 해석해보자면, initState() 메소드가 끝나기 전에 특정 Inherited 객체를 호출해서 오류가 발생했다.. 정도로 해석이 가능하다. 원인 결론부터 말하자면, initState()안에서 Provider을 사용하기 위해 context를 호출 한 것이 문제가 되었다. 일반적으로 Flutter에서는 initState()가 종료된 이후 context를 사용할 수 있기 때문에 오류가 발생한 것으로 보인다. 해결법 나는 우선 context 뒤에 “listen: fasle” 옵션을 추가해 오류를 해결했다. 다만, 이런식으로 initState() 안에서 context를 사용하는 것이 바람직하지는 않은 것 같다. 추후에 다른 방식으로..

오류 Flutter로 사이드 프로젝트를 진행하며 기존의 버튼 위젯에 Provider 패턴을 적용해 보고 있었다. ChangeNotifier을 Mixin하고 ChangeNotifierProvider을 이용하여 데이터를 생성, 사용 할 Container를 감싸주었다. 그 다음, ChangeNotifierProvider의 child에서 Provider.of(context)와 같은 형식으로 전달받은 데이터를 이용하려 하였는데, 다음과 같은 오류가 발생했다. Error: Could not find the correct Provider above this HomeScreen Widget 원인 위 오류의 원인은 디버그 콘솔에 나타난 오류 메세지에서 쉽게 찾을 수 있었다. 먼저, 코드를 보면서 어떤식으로 Provide..

HTML 삽입 미리보기할 수 없는 소스 본 글은 아래의 영상을 참고하였습니다. https://www.youtube.com/watch?v=wE7khGHVkYY&list=PLOU2XLYxmsIJyiwUPCou_OVTpRIn_8UMd&index=2 개요 본 글에서는 Flutter가 어떤 방식으로 Stateless widget을 작동시키는지 알아보고자 합니다. 먼저, widget은 Flutter 앱의 기본 단위가 되는 객체이며, 각각의 위젯들은 유저 인터페이스에 대한 불변 객체와도 같습니다. 위젯은 버튼이나 메뉴, 폰트나 색상에 대한 스타일 요소, padding과 같은 레이아웃 요소 등이 될 수 있습니다. 또한, 우리는 기존의 위젯들로부터 새로운 위젯을 만들어 낼 수도 있습니다. 위젯과 위젯을 합쳐서 새로운 위..