개요앱 개발을 하다보면 해상도 대응이 상당히 까다롭다.디자이너가 준 화면을 구현하고, 실제 기기에서 보면 뭔가 이상할 때가 많다.이는 해상도가 맞지 않아, UI 배치가 조금씩 틀어지면서 생기는 문제다. 각 기기마다 해상도가 다르기 때문에 모든 기기에 맞게 코드를 작성하는 것은 어렵다.이를 위해 iOS에선 Auto Layout과 같은 방법론이 등장했다. 하지만 Flutter에서는 어떨까? Flutter에서도 padding을 사용하여 CSS나 iOS와 같이 해상도 대응을 할 수 있다.일반적으로는 이게 정석인데, 약간의 꼼수를 사용할 수 있다. 바로 ScreenUtil 패키지를 이용하는 것이다.  ScreenUtil 이란?ScreenUtil 패키지는 해상도를 자동 대응해주는 패키지이다.기준 화면을 설정하면, ..

Spacer란? Spacer는 Row와 Column과 같은 Flex Container (이는 뒤에서 알아볼 것이다.)의 공간을 조절하는 빈 공간을 만들어주는 위젯이다. 이름 그대로 Space + er로 공간을 만들어주는 위젯이다. Spacer 위젯은 추가적인 공간을 잡는 위젯이기 때문에 Flex container안에 있는 Flex.mainAxisAlignment를 MainAxisAlignment.spaceAround, MainAxisAlignment.spaceBetween, MainAxisAlignment.spaceEvenly 로 설정하면 추가 공간을 모두 차지했으므로 재배포할 공간이 남아 있지 않아 가시적인 효과가 없다. 즉, Spacer는 MainAxisAlignment 속성을 모두 무시한다는 것이다..

개요 Flutter로 크로스 플랫폼 앱 개발을 하다보면, 아래와 같이 `const`를 붙이라는 경고메세지가 등장한다. ▼ 이는 Error가 아닌 단순 Warning이라서 지키지 않아도 프로그램이 컴파일 되는 데에는 큰 문제가 없다. 하지만 아래에 파란줄이 남은 것을 볼 때면 굉장히 찝찝해져서 const를 붙이지 않고 넘어갈 수 없다. ▼ 이쯤되면 의문이 하나 생긴다. "도대체 왜 `const` 키워드를 붙이라고 권장하는걸까?" 프로그래밍 문법을 배울 때 const는 상수라고 배운다. 그리고 상수는 변하지 않는 값을 선언할 때 사용한다고도 배우는데, Dart에는 `const`외에 `final`이라는 키워드가 존재한다. 변하지 않는 값을 선언하는 것을 권장하는 것이라면 `const`가 아니라 `final`을..

FloatingActionButton이란? FloatingActionButton은 아래의 그림과 같이 화면 위에 떠 있는 버튼을 말한다.▼ 앱마다 조금씩은 다르겠지만 보통 앱에서 제공하는 기능 중 핵심적인 기능을 접근하기 쉽게 하기 위해 FloatingActionButton 으로 배치하곤 한다. 많은 앱들에서 사용하지만 꼭 필요한 기능은 아니다. 특별히 보여줘야 할 화면이 있는데, 그 화면에서 추가적으로 핵심 기능을 사용할 수 있게 할 때 사용하는 것 같다. 사용 예시 Flutter에서의 사용예시를 예제 코드와 함께 알아보자. FloatingActionButton 그리기 지금은 FloatingActionButton에 애니메이션을 넣는 단계는 아니고 간단하게 화면에 추가하는 방법을 알아보도록 해보자. 가장..

개요 Web View 모바일 앱을 사용하다가 웹 사이트에 접근해야할 때가 있다. 이럴 때 기본 브라우저를 통해 이동하는 로직을 짜도 되지만, 이렇게 되면 사용자들이 서비스(앱)에서 쉽게 이탈하게 된다. 이런 이탈을 방지하기 위해 앱 자체에 웹 뷰를 놓기도 하고, 좀 더 편의성을 높이기 위해 앱 자체에서 웹 뷰를 배치하기도 한다. Flutter에는 이 웹 뷰가 위젯의 형태로 되어있어서 위젯을 도입하는 방식으로 쉽게 적용할 수 있다. 문제점 Dependency에 flutter_webview를 넣는 것으로 웹 뷰를 쉽게 도입할 수 있는데, 문제는 참고할 만한 정보가 굉장히 적다. Flutter 공식에서 제공하는 튜토리얼의 최종 업데이트는 2022년 1월 25일인데, webview_flutter의 업데이트는 2..

이전 포스트가 있는 글입니다! [Swift] Swift의 메모리 관리 : ARC 1 → 개요 이전 포스트에서 Swift에서 메모리 관리를 해주는 ARC가 어떤 식으로 메모리를 관리하는 지 확인했다. Strong Reference, Weak Reference, Unowned Reference 의 세 가지 참조에 대해 알아보았고, Strong Reference Cycle을 해결하는 방법으로 Weak와 Unowned Reference에 대해 알아보았다. 메모리 누수가 왜 일어나는지와 그에 대한 기본적인 해결에 대해서 배웠다면, 이제는 우리가 많이 사용하는 문법에서 발생하는 문제에 대한 해결을 볼 것이다. Strong Reference Cycles for Closures Strong reference cycle..

개요 Swift를 공부하다보면 lambda와 비슷한 개념으로 클로져(Closure)라는게 나온다. 내용 자체는 익명 함수와 비슷한데, 초반부터 나오는 캡쳐(Capture)라는 용어가 굉장히 이해하기가 힘들었다. ▼ 공식문서에서도 이에 대해 다루기는 하지만 캡쳐를 하는 방법에 대한 내용 위주고, 이해 위주는 아니었기에 이해하기 쉽게 정리해보기로 했다. ▼ 캡쳐(Capture)가 정확히 뭐야? 캡쳐의 정의 클로져의 캡쳐는 클로져의 내용에서 주변에 있는 외부 context의 상수와 변수를 사용하기 위해 참조하는 것을 말한다. 이렇게 하면 설령 외부 context가 사라지더라도, 클로져에서는 계속해서 연산을 수행할 수 있게 된다. 공식문서의 예제를 보자. ▼ func makeIncrementer(forIncre..

개요 초기화에 관해서 전체 내용을 정리하기 전에, two phase initialization에 대해서 먼저 보고 들어가는 것이 다른 개념들을 이해하는데 도움이 될 거라고 생각이 들었다. 그래서 two phase initialization에 대해 먼저 정리를 하고 나중에 초기화에 관해 전체적으로 보기로 했다. 두 단계로 진행되는 초기화 Swift의 클래스 초기화는 두 단계로 진행이 된다. 첫번째 단계에서는 클래스에 명시된 값에 따라 각 stored property들이 초기화가 된다. 모든 stored property에 대한 초기 상태가 정해지고 나면(예를 들면 메모리 할당), 두번째 단계가 실행이 된다. 두번째 단계에서는 클래스에게 stored property들의 값을 사용자가 설정 할 수 있는 기회가 ..

개요 기본적으로 거의 모든 컴퓨터는 2가지에 데이터를 보관한다. 하나는 디스크, 다른 하나는 메모리(RAM)로 힙 이라고도 한다. 우리가 보는 메모리 관리는 사실상 힙 메모리 관리라고 볼 수 있다. 디스크에 있는 데이터를 바로 가져다 쓰기에는 데이터를 읽는 속도가 굉장히 느리기 때문에, 당장 사용할 프로그램과 데이터들을 메모리에 미리 불러 놓은 뒤에 메모리의 빠른 읽기 속도를 활용하여 프로그램을 실행시킨다. 이는 아이폰에서도 똑같이 동작을 하며, 앱이 실행되는 동안 사용되는 클래스 인스턴스들은 모두 이 메모리 안에 저장이 된다. 메모리 관리라고 하면 엄청나게 거창한 무언가를 하는 것 처럼 느껴지지만 사실 프로그램이 요구로 하는 곳에 메모리 자원을 주고, 프로그램이 더 이상 사용하지 않는 메모리를 회수하는..

Future 데이터들 다루기 너무나도 까다로운 Future 추천 정보 비동기를 잘 모른다면 간단하게 이해하고 보는걸 추천합니다. 동기와 비동기 개론 -> Dart 비동기 프로그래밍 찍먹 -> Future 변수들을 사용하여 비동기 작업을 하다보면 가장 힘든 부분이 화면에 그려주는 부분이다. 데이터가 바로 들어온다고 가정하고 화면을 그리게 되면 빨간색 에러 화면을 마주하기 쉽상이다. 데이터가 완성되는게 아무리 빠르다고 해도 화면을 그리는 부분이 별도의 장치가 없다면 선행되기 때문에 에러가 쉽게 발생한다. 데이터가 들어오는걸 기다리는 동안에… 상태관리로 전부 처리하자 그렇기에 데이터가 들어오는것을 기다리며 그 동안에는 로딩 화면을 보여주거나 빈 화면을 보여줘야 하는데, Stateful Widget이나 GetX..