개요 Flutter에서는 상당히 많은 기본 위젯들을 제공해준다. Container, Column, Row, Stack, ListView 등등... 많은 기본 위젯들을 제공해준다. 기본 위젯들을 잘 조합하여 새로운 위젯을 만들 수 있지만, 때로는 기본 위젯의 조합으로도 만들 수 없는 위젯들을 만들어야할 때가 있다. ▼ 이럴 때는 우리가 따로 정의하여 사용을 해야하는데, 이를 도와주는 것이 `CustomPaint`다. CustomPaint를 통해 직접 위젯의 모양을 정의하여 새로운 형태의 위젯을 만들 수 있다. 들어가기 앞서 : 기본적인 좌표계에 대해서 들어가기 앞서 좌표계에 대해 알아야 한다. 이는 `CustomPaint`에서만 사용되는 것은 아니고 앱 전반적으로 다 사용되는 내용이다. 우리가 배웠던 좌표..

개요 Flutter에서 하나의 위젯을 배치하는 것은 굉장히 쉽다. 오버라이드된 `build` 메소드의 `return`에 위젯 클래스를 반환해주면 위젯을 쉽게 렌더링할 수 있다. (물론 그 과정은 굉장히 추상적이고 복잡하겠지만...) "그렇다면 여러 개의 위젯을 배치하고 싶을 때는 어떻게 해야하지?" `return` 에는 하나의 위젯만 반환시킬 수 있고, 반환 타입마저도 `List`이 아니라서 여러 개의 위젯을 반환하는 것은 사실상 불가능하다. "그럼 뭐 불가능하다는거야 뭐야?" 불가능했다면 Flutter는 이 세상에 나오지 못햇을 것이다... 당연히 가능하며, 이를 도와주는 것은 Multichild-Layout Widget들이다. Multichild-Layout Widget에는 `Row`, `Column..

개요 특정 영역에 위젯을 배치할 때 그냥 위젯을 배치하는 것이 아니라 어느 영역을 설정한 후 위젯을 배치한다. 그럴 때 Flutter에서는 단일 위젯을 배치할 때 `Container` 위젯과 `SizedBox` 위젯을 사용하여 그 영역을 설정하곤 한다. 이번 포스트에서는 `Container` 위젯에 대해 알아볼 것이다. Container Container란? `Container`의 의미는 용기, 담을 수 있는 무언가라는 의미로 정석적인 의미와 상당히 사용하는게 비슷한 위젯이다. UI요소를 감싸고, 다양한 형태를 취할 수 있는 위젯이다. 위의 설명은 `SizedBox`와 굉장히 비슷한데, `SizedBox`와의 결정적인 차이점은 `Container`위젯은 그 자체를 꾸밀 수 있다는 것이다. 사용예시 Con..

개요 글자를 보여준다는 것은 프로그램의 가장 기초적인 부분이다. Flutter에서는 Text 라는 위젯을 통해 이를 보여준다. Text 외의 다른 위젯도 있지만, 이번 포스트에서는 가장 기초적인 위젯인 Text위젯을 볼 것이다. Text란? `Text`는 이름 그대로 문자를 보여주는 위젯으로 원하는 문자열을 화면에 그려준다. Text 사용예시 Text("안녕하세요 노근입니다.") `Text` 위젯은 위와 같이 간단하게 사용할 수 있다. `Text("원하는 문자열")`의 형태로 가볍게 사용할 수 있다. ▼ style 프로퍼티 (TextStyle) "근데 폰트 크기가 더 크거나, 색이 달랐으면 좋겠는데?" 그럴 때는 `style` 프로퍼티에 `TextStyle` 에 필요한 프로퍼티들을 채운뒤 넣어주면 된다...

개요 : Step Slider가 있는데 왜 구현한거지? 만들게 된 계기 프로그램에서 예약 페이지를 개발할 때, 디자이너의 의도가 아래와 같았다. ▼ 인디케이터가 5분 단위로 이동해야하며, 아래 선택된 시간만큼 인디케이터 뒷부분의 공간을 색칠해줘야한다. 여기서 가장 중요한 것은 5분 단위로 끊어서 이동해야한다는 것이다. 예약은 5분 단위로 진행되기 때문에 끊어서 이동하지 않으면 매 분, 매 초단위로 예약할 수 있다고 유저가 혼동할 수 있기 때문이다. 그렇기에 5분이라는 Step을 두어 구현을 해야하는 상황이 발생한 것이다. 근데 왜 slider를 수정하지 않은것? Flutter에서 기본적으로 Slider 위젯을 제공해준다. ▼ Slider class - material library - Dart API A..

개요 앱 개발을 하다보면 해상도 대응이 상당히 까다롭다. 디자이너가 준 화면을 구현하고, 실제 기기에서 보면 뭔가 이상할 때가 많다. 이는 해상도가 맞지 않아, 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 속성을 모두 무시한다는 것이다..

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

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