![[Flutter][Widget] Row, Column 위젯](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FcRQoHB%2FbtsF2FusC1X%2FAAAAAAAAAAAAAAAAAAAAAGGGjaf6a2tHm_Q45WO_two42D_00n9EZx9Lfd-Vjj6x%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1759244399%26allow_ip%3D%26allow_referer%3D%26signature%3DwTs2KZN99QoQA0t7Zy8QGTcYCcU%253D)
개요 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%2Fdna%2FdfGAss%2FbtsFXZ0BO4X%2FAAAAAAAAAAAAAAAAAAAAACKF6z_vokl4X-kAvOXy8JetYrF3_IAVZVrbNuTFK1bT%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1759244399%26allow_ip%3D%26allow_referer%3D%26signature%3D5Gmn%252FO3PXvfrtcYj0eNGnik8AUQ%253D)
개요특정 영역에 위젯을 배치할 때 그냥 위젯을 배치하는 것이 아니라 어느 영역을 설정한 후 위젯을 배치한다.그럴 때 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%2Fdna%2FbgBL9w%2FbtsFUZUhITI%2FAAAAAAAAAAAAAAAAAAAAAKYm5afHWA3A_A0edB8cjeCv2g7l2P-o9WP4T3mbKre-%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1759244399%26allow_ip%3D%26allow_referer%3D%26signature%3DThLDmlZ0dbQKPaj%252FQcpwmA49zt0%253D)
개요 글자를 보여준다는 것은 프로그램의 가장 기초적인 부분이다. 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%2Fdna%2FUlzVz%2FbtsFwAM9T2V%2FAAAAAAAAAAAAAAAAAAAAAF4MZyNgbpIVVLTxbW_n9ynFKxRWejzbtRxstCH9T8Zl%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1759244399%26allow_ip%3D%26allow_referer%3D%26signature%3DWZfd2htYbvLhpbfvMKqI3xSiENA%253D)
시작 게임은 영상이나 음악이란 요소도 중요하지만, 영화나 다른 시각 매체와 큰 차이점을 두는 것은 바로 조작이다. 우리가 게임을 조작하기 위해서는 여러가지 것들을 이용할 수 있다. 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%2Fdna%2F6Nykq%2FbtsFkHt8SC0%2FAAAAAAAAAAAAAAAAAAAAAJTlcvmKzadX7gZ4oaoy-romc1NkUf8SIsnvzg1Q65-z%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1759244399%26allow_ip%3D%26allow_referer%3D%26signature%3DfnEsBQYWhZzNxYV2QqgjkQftsjQ%253D)
개요 : 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%2Fdna%2FcLBiQg%2FbtsFkJypi9e%2FAAAAAAAAAAAAAAAAAAAAAD0AqOXhSJvg70UrMoiYbkV9IknDKmC4hJ6XvkMWU2lX%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1759244399%26allow_ip%3D%26allow_referer%3D%26signature%3Dp%252BVhnXJ7L9tV3F7Sr1XYBPW00So%253D)
발단이것저것 테스트 해보며 필요한 부분을 만들던 도중, 기기에서 사진을 불러오는 기능이 필요했다.ImagePicker를 사용하면 쉽게 해결이 되는데(쉽다고는 했지만 iOS에서 권한 설정이 필요해서 시간이 좀 걸리긴 했다...) 패키지를 추가하고 나니 `MissingPulginException`이라는 에러 메세지가 나왔다. 해결해결은 굉장히 쉬웠다.앱 디버깅을 종료하고 다시 빌드를 하면 해결이 된다. 처음 이 에러를 마주했을 때는 뭐가 문제인지 몰라서 import를 잘못한건지, 아니면 패키지에서 사용하는 클래스와 같은 이름을 사용하는 클래스가 있는건지 계속 찾아 헤맸다.스택오버플로우와 다른 글들을 찾아보고나서 너무나도 쉽게 해결이 되어 조금은 허무했지만, 마주했을 당시에는 상당히 당황스럽긴 했다. 만약에..
![[Flutter][Error] Firebase Realtime DB 이름 규칙 오류](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fcr4RM1%2FbtsFimuZR2Z%2FAAAAAAAAAAAAAAAAAAAAADaTHrmEU_7caYLrFWecUrdyJTXBcHOOGtdSrquFNU1w%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1759244399%26allow_ip%3D%26allow_referer%3D%26signature%3DufMD9FmcQaPUMgmeJT4LXQSHL9g%253D)
발단 실시간 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 삼아 사용하려고 했는데, 그렇게 되면 추가로 생각해야할게 많아져서 단순한 프로젝트인 만큼 단순하게 잡았다. 그런데 더미데이터를 넣는 함수를 실행시키자 시뮬레이터 내부에서 앱이 바로 종료되어버렸다. 보통..
![[Swift] 모음 타입들](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbMZmKr%2FbtsFg4HNEfV%2FAAAAAAAAAAAAAAAAAAAAACZiH-6-zZF0FnnylhC8Oa5-g_v5sV4MEEw9t6F3M2XE%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1759244399%26allow_ip%3D%26allow_referer%3D%26signature%3D%252B4MgZp3x4R2h5JneiQeIiRZlg04%253D)
모음 타입들Swift는 여러 값들을 저장하기 위해 Array, Set, Dictionary라는 Collection Type(컬렉션 타입)을 제공한다.Array(배열)은 순서대로 값을 모은 것이고,Set(집합)은 순서가 없는 값들을 모은 것이다.Dictionary는 Key-Value 쌍을 순서 없이 모은 것이다. Swift의 Array, Set, Dictionary에 저장되는 값은 항상 명확한 타입을 가지고 있어야 한다.만약 Int자료형을 저장하는 Array에 String 타입의 값을 넣으려고 하면 오류가 발생한다. Mutability of Collections개발자가 Array, Set, Dictionary를 만들어 변수에 할당하면 해당 컬렉션들은 모두 변경 가능하다.즉, 값을 추가, 제거, 변경할 ..
![[Unity2D] Object와 Sprite](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fbu5sYQ%2FbtsFesIHU2M%2FAAAAAAAAAAAAAAAAAAAAAHdK76kvJNl_2Mb_BHSb4pznavH5LjMBUfAh87DGDVCo%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1759244399%26allow_ip%3D%26allow_referer%3D%26signature%3DxEWQkj%252BIksNbHD%252FmjrkwQLE50UQ%253D)
시작 간단하게 캡슐 모양의 오브젝트를 자동차처럼 조종하는 것을 만들어볼 것이다. (유니티 에디터 버전: 2020.3.30f1 Intel) 아래의 자동차를 조종해 볼 것이다.▼ 아래의 이미지는 코딩고라니가 만들었고, 이미지를 연습용으로 사용하는데는 아무 제약이 없습니다. 마음에 들지 않는다면, 다른 파일로 해도 괜찮습니다. 자동차 오브젝트 생성 가장 먼저 해야할 것은 조종할 오브젝트를 만드는 것이다. 일단 유니티 프로젝트를 만들어준다. (2D 프로젝트로 만드는 것을 잊지 말자)▼ Hierarchy 탭의 빈공간을 눌러서 캡슐 모양 스프라이트를 가진 2D 오브젝트를 하나 만들어주자. 사실 어떤 오브젝트인지는 상관 없다. 어차피 square, circle, capsule의 차이는 스프라이트의 차이인데 우리는 자..