문제 상황 TabBar를 이용하여 한 페이지에 여러 개의 뷰를 보여주는 UI는 거의 대부분의 앱에서 사용될 정도로 흔하다. 일반적으로는 고정된 개수의 TabBar를 사용하기에 스크롤 할 일이 없는데, 때로는 여러 개의 TabBar를 두어 스크롤이 들어가기도 한다. 그런데 스크롤을 넣기 위해 `isScrollable`을 `true`로 바꾸면 사진과 같이 왼쪽에 의문의 Padding이 들어가게 된다. ▼ 왜 이 빈 공간이 생기는 것이고, 어떻게 하면 제거할 수 있을까?  원인과 해결원인 원인은 `TabAlignment`에 있다. 사진의 설명에 나와있듯, 만약 TabBar의 `isScrollable`이 `true`가 되면 TabBar는 기본적으로 52pixel의 offset을 갖게 된다.  정확히는 `isSc..

개요 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`위젯은 그 자체를 꾸밀 수 있다는 것이다. 사용예시Container..

개요 글자를 보여준다는 것은 프로그램의 가장 기초적인 부분이다. 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..

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

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

보일러플레이트 코드를 피하자 보일러 플레이트 Flutter로 코드를 짜다보면 반복적인 코드가 등장하게 된다. 이런 반복적인 코드를 프로그래머들은 보일러플레이트 코드라고 부른다. 보일러플레이트 코드? 보일러 플레이트(Boilerplate)는 신문사업에서 납 대신 강철로 인쇄물을 찍기 시작하면서 나온 그 강철을 말한다. 보일러 플레이트 코드는 최소한의 변경으로 여러 곳에서 재사용 되며, 반복되는 형태를 띄는 코드를 말한다. 역사적으로 이런 반복되는 코드를 피하기 위해 함수란 개념이 나왔는데, 이 함수 조차도 반복될 수 있다는 것이다. 보일러플레이트 코드는 없어져야 한다 최소한의 변경으로 반복되는 코드는 실용적이지도 않고, 코드의 길이는 길어지며, 길어진 코드는 가독성을 해치게 된다. 개발자는 이런 상황을 막..