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

발단이것저것 테스트 해보며 필요한 부분을 만들던 도중, 기기에서 사진을 불러오는 기능이 필요했다.ImagePicker를 사용하면 쉽게 해결이 되는데(쉽다고는 했지만 iOS에서 권한 설정이 필요해서 시간이 좀 걸리긴 했다...) 패키지를 추가하고 나니 `MissingPulginException`이라는 에러 메세지가 나왔다.  해결해결은 굉장히 쉬웠다.앱 디버깅을 종료하고 다시 빌드를 하면 해결이 된다. 처음 이 에러를 마주했을 때는 뭐가 문제인지 몰라서 import를 잘못한건지, 아니면 패키지에서 사용하는 클래스와 같은 이름을 사용하는 클래스가 있는건지 계속 찾아 헤맸다.스택오버플로우와 다른 글들을 찾아보고나서 너무나도 쉽게 해결이 되어 조금은 허무했지만, 마주했을 당시에는 상당히 당황스럽긴 했다. 만약에..

발단 실시간 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 삼아 사용하려고 했는데, 그렇게 되면 추가로 생각해야할게 많아져서 단순한 프로젝트인 만큼 단순하게 잡았다. 그런데 더미데이터를 넣는 함수를 실행시키자 시뮬레이터 내부에서 앱이 바로 종료되어버렸다. 보통..

개요 프로젝트에서 사용하는 DB로 Firebase firestore를 사용하려고 했다. 사용하기 간편하고 팀에 백엔드가 없는 상황에서 가장 사용하기 쉽기에 firestore를 사용할 계획이었다. 그러나 플랫폼의 특징을 띠고 있는 현재의 프로젝트 특성상 종속성이 없는 firestore는 문제가 있다고 판단이 되었다. 그리고 아래와 같이 프로젝트 방향성도 바뀌게 되면서 DB를 바꿔야 하는 상황이 되어버렸다. 바뀐 프로젝트 방향성 더보기 노인의 todos를 추가하자 장점) 1. 로그인 할때 노인의 정보를 가져올때 투두 정보를 전부 가져올 수 있다 2. 보호자가 구독중인 노인들 투두 정보를 가져올 때, 정보를 같이 가져오지 못해서 노인의 정보를 가져오려면 한 명 한명 일일이 쿼리를 또 날려야한다. 합치면 한 번..

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