![[Flutter][Widget] CustomPaint로 나만의 위젯 만들기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FTt30V%2FbtsGq2cXGK3%2FytICij7o9hJLhmshdCKzVk%2Fimg.png)
개요 Flutter에서는 상당히 많은 기본 위젯들을 제공해준다. Container, Column, Row, Stack, ListView 등등... 많은 기본 위젯들을 제공해준다. 기본 위젯들을 잘 조합하여 새로운 위젯을 만들 수 있지만, 때로는 기본 위젯의 조합으로도 만들 수 없는 위젯들을 만들어야할 때가 있다. ▼ 이럴 때는 우리가 따로 정의하여 사용을 해야하는데, 이를 도와주는 것이 `CustomPaint`다. CustomPaint를 통해 직접 위젯의 모양을 정의하여 새로운 형태의 위젯을 만들 수 있다. 들어가기 앞서 : 기본적인 좌표계에 대해서 들어가기 앞서 좌표계에 대해 알아야 한다. 이는 `CustomPaint`에서만 사용되는 것은 아니고 앱 전반적으로 다 사용되는 내용이다. 우리가 배웠던 좌표..
![[Flutter] 패키지 사용법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbHteGf%2FbtsGgztJuHB%2FHQFVqw6hpPFNvH16uQIHX1%2Fimg.png)
개요 개발을 하다보면 기본적으로 제공하는 함수나 기능들 외의 기능들이 필요할 때가 많다. 스스로, 혹은 개발 팀에서 이를 직접 구현할 수 있고, 그러기로 결정이 났다면 다행이지만, 그럴 여유가 없어서 그 기능을 구현할 수 없을 때가 있다. 그럴 때는 보통 라이브러리를 받아와서 해결한다. ▼ Flutter는 이를 패키지라고 부르며, 빠른 개발을 위해서라면 패키지를 사용하는 것은 필수다. 패키지 혹은 플러그인이라고도 부르는데 엄연히 따지자면 패키지가 조금 더 큰 개념이다. 굳이 구별을 하자면 Dart코드로만 이루어진 것을 패키지라고 하고, JAVA, Swift, Kotlin과 같은 다른 언어를 포함하고 있는 것을 플러그인이라고 한다. 어쨌든 이번 포스트에서는 패키지 사용법에 대해 알아볼 것이다. 패키지 검색..
![[Flutter][Widget] Row, Column 위젯](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcRQoHB%2FbtsF2FusC1X%2F9Cuc0uaUcScUsPkl7PCfdK%2Fimg.png)
개요 Flutter에서 하나의 위젯을 배치하는 것은 굉장히 쉽다. 오버라이드된 `build` 메소드의 `return`에 위젯 클래스를 반환해주면 위젯을 쉽게 렌더링할 수 있다. (물론 그 과정은 굉장히 추상적이고 복잡하겠지만...) "그렇다면 여러 개의 위젯을 배치하고 싶을 때는 어떻게 해야하지?" `return` 에는 하나의 위젯만 반환시킬 수 있고, 반환 타입마저도 `List`이 아니라서 여러 개의 위젯을 반환하는 것은 사실상 불가능하다. "그럼 뭐 불가능하다는거야 뭐야?" 불가능했다면 Flutter는 이 세상에 나오지 못햇을 것이다... 당연히 가능하며, 이를 도와주는 것은 Multichild-Layout Widget들이다. Multichild-Layout Widget에는 `Row`, `Column..
![[Flutter][Widget] Container 위젯 그리고 Container의 크기 설정](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdfGAss%2FbtsFXZ0BO4X%2FNf8Tk8qmB7IPZFutxp6TK1%2Fimg.png)
개요특정 영역에 위젯을 배치할 때 그냥 위젯을 배치하는 것이 아니라 어느 영역을 설정한 후 위젯을 배치한다.그럴 때 Flutter에서는 단일 위젯을 배치할 때 `Container` 위젯과 `SizedBox` 위젯을 사용하여 그 영역을 설정하곤 한다.이번 포스트에서는 `Container` 위젯에 대해 알아볼 것이다. Container Container란?`Container`의 의미는 용기, 담을 수 있는 무언가라는 의미로 정석적인 의미와 상당히 사용하는게 비슷한 위젯이다.UI요소를 감싸고, 다양한 형태를 취할 수 있는 위젯이다.위의 설명은 `SizedBox`와 굉장히 비슷한데, `SizedBox`와의 결정적인 차이점은 `Container`위젯은 그 자체를 꾸밀 수 있다는 것이다. 사용예시Container..
![[Flutter][Widget] Text 위젯](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbgBL9w%2FbtsFUZUhITI%2FnQqok5G5GKmhiTQnyOuTrK%2Fimg.png)
개요 글자를 보여준다는 것은 프로그램의 가장 기초적인 부분이다. Flutter에서는 Text 라는 위젯을 통해 이를 보여준다. Text 외의 다른 위젯도 있지만, 이번 포스트에서는 가장 기초적인 위젯인 Text위젯을 볼 것이다. Text란? `Text`는 이름 그대로 문자를 보여주는 위젯으로 원하는 문자열을 화면에 그려준다. Text 사용예시 Text("안녕하세요 노근입니다.") `Text` 위젯은 위와 같이 간단하게 사용할 수 있다. `Text("원하는 문자열")`의 형태로 가볍게 사용할 수 있다. ▼ style 프로퍼티 (TextStyle) "근데 폰트 크기가 더 크거나, 색이 달랐으면 좋겠는데?" 그럴 때는 `style` 프로퍼티에 `TextStyle` 에 필요한 프로퍼티들을 채운뒤 넣어주면 된다...
![[Unity2D] Input 시스템](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FUlzVz%2FbtsFwAM9T2V%2FK85z7xYYopesqEtDKSD6c0%2Fimg.png)
시작 게임은 영상이나 음악이란 요소도 중요하지만, 영화나 다른 시각 매체와 큰 차이점을 두는 것은 바로 조작이다. 우리가 게임을 조작하기 위해서는 여러가지 것들을 이용할 수 있다. PC게임이라면 키보드, 콘솔 게임이라면 게임패드, 모바일 게임이라면 터치UI 등등이 될 수 있다. 우리가 게임을 조작하는 것은 물리적인 조작 장치가 게임에 신호를 보내는 것이라고 할 수 있다. 이 조작을 위한 신호는 Input 시스템이 담당하고 있기에 우리는 Input 시스템을 어떻게 이용할 수 있는지에 대해 알아야한다. Input System 게임 엔진에 대해 전문적이고 체계적으로 개발한 Unity는 그동안 입력에 관해 여러가지 시스템들을 도입하고 발전 시켰다. 그 결과 두 형태의 Input 시스템이 존재하는데, 각각 old..

시작 저번 글에 이어 자동차를 조종하는 것을 마저 만들어볼 것이다. 이전 글 내용이 기억나지 않는다면 아래의 링크로 들어가면 볼 수 있다.▼ [Unity2D] Object와 Sprite 시작 간단하게 캡슐 모양의 오브젝트를 자동차처럼 조종하는 것을 만들어볼 것이다. (유니티 에디터 버전: 2020.3.30f1 Intel) 아래의 자동차를 조종해 볼 것이다.▼ 아래의 이미지는 코딩고라니가 noguen.com C# 스크립트 생성 키보드로 자동차를 조종하기 전에 우선은 입력없이 자동차 스스로 움직이게 해보자. 그러기 위해서는 자동차 오브젝트의 위치나 각도를 바꿔줄 코드가 필요한데, 그 코드를 Unity에서는 스크립트(Script)라고 부른다. 기본적으로 스크립트는 C# 문법을 따른다. 우선은 C# 스크립트를 ..
![[Flutter][Widget] Step Indicator 구현](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F6Nykq%2FbtsFkHt8SC0%2FAMYS92P4yDAuqdcKtvX5I1%2Fimg.png)
개요 : Step Slider가 있는데 왜 구현한거지? 만들게 된 계기 프로그램에서 예약 페이지를 개발할 때, 디자이너의 의도가 아래와 같았다. ▼ 인디케이터가 5분 단위로 이동해야하며, 아래 선택된 시간만큼 인디케이터 뒷부분의 공간을 색칠해줘야한다. 여기서 가장 중요한 것은 5분 단위로 끊어서 이동해야한다는 것이다. 예약은 5분 단위로 진행되기 때문에 끊어서 이동하지 않으면 매 분, 매 초단위로 예약할 수 있다고 유저가 혼동할 수 있기 때문이다. 그렇기에 5분이라는 Step을 두어 구현을 해야하는 상황이 발생한 것이다. 근데 왜 slider를 수정하지 않은것? Flutter에서 기본적으로 Slider 위젯을 제공해준다. ▼ Slider class - material library - Dart API A..
![[Flutter][Error] Unhandled Exception: MissingPluginException](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcLBiQg%2FbtsFkJypi9e%2F7KamSj221CG0lkEHC4rr6K%2Fimg.png)
발단이것저것 테스트 해보며 필요한 부분을 만들던 도중, 기기에서 사진을 불러오는 기능이 필요했다.ImagePicker를 사용하면 쉽게 해결이 되는데(쉽다고는 했지만 iOS에서 권한 설정이 필요해서 시간이 좀 걸리긴 했다...) 패키지를 추가하고 나니 `MissingPulginException`이라는 에러 메세지가 나왔다. 해결해결은 굉장히 쉬웠다.앱 디버깅을 종료하고 다시 빌드를 하면 해결이 된다. 처음 이 에러를 마주했을 때는 뭐가 문제인지 몰라서 import를 잘못한건지, 아니면 패키지에서 사용하는 클래스와 같은 이름을 사용하는 클래스가 있는건지 계속 찾아 헤맸다.스택오버플로우와 다른 글들을 찾아보고나서 너무나도 쉽게 해결이 되어 조금은 허무했지만, 마주했을 당시에는 상당히 당황스럽긴 했다. 만약에..
![[Flutter][Error] Firebase Realtime DB 이름 규칙 오류](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fcr4RM1%2FbtsFimuZR2Z%2Fzuoj1OtvmA6068CkLlocV1%2Fimg.png)
발단 실시간 DB로 옮기고 DB구조를 어느정도 정한 후에 테스트를 위해 더미 데이터를 넣어보았다. 현 프로젝트에는 DB구조가 아래와 같다. String todoid; DateTime date; String title; List repeat; String user; String creator; bool alarm; String description; bool complete; 이때 todoid는 현재 DateTime으로 나온 값을 String으로 변환 시킨 값을 사용한다. 번호나 일정 규칙이 있는 값을 id 삼아 사용하려고 했는데, 그렇게 되면 추가로 생각해야할게 많아져서 단순한 프로젝트인 만큼 단순하게 잡았다. 그런데 더미데이터를 넣는 함수를 실행시키자 시뮬레이터 내부에서 앱이 바로 종료되어버렸다. 보통..