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..

Future 데이터들 다루기 너무나도 까다로운 Future 추천 정보 비동기를 잘 모른다면 간단하게 이해하고 보는걸 추천합니다. 동기와 비동기 개론 -> Dart 비동기 프로그래밍 찍먹 -> Future 변수들을 사용하여 비동기 작업을 하다보면 가장 힘든 부분이 화면에 그려주는 부분이다. 데이터가 바로 들어온다고 가정하고 화면을 그리게 되면 빨간색 에러 화면을 마주하기 쉽상이다. 데이터가 완성되는게 아무리 빠르다고 해도 화면을 그리는 부분이 별도의 장치가 없다면 선행되기 때문에 에러가 쉽게 발생한다. 데이터가 들어오는걸 기다리는 동안에… 상태관리로 전부 처리하자 그렇기에 데이터가 들어오는것을 기다리며 그 동안에는 로딩 화면을 보여주거나 빈 화면을 보여줘야 하는데, Stateful Widget이나 GetX..

Dart의 String 문법 다른 언어들은 안이러는데 Flutter는 Dart언어를 사용하기에 대부분 Dart를 사용하지 않다가 Flutter를 사용하기 위해 사용하게 되었을 것이다. 조금 범용적으로 사용되는 JAVA나 Python, C++ 와 같은 언어들에 익숙해져있다가 Dart로 오게 되면 한가지 의문점이 생기게 된다. 바로 문자열을 “”(큰 따옴표, Double quote) 로 감싸는게 아니라 ‘’ (작은 따옴표, Single quote) 로 감싸기 때문이다. Dart의 String 문법 Dart에서는 아래와 같이 문자열을 작성할 수 있다. String singleQuote = '안녕하세요. 고라니입니다.'; String doubleQuote = "안녕하세요. 고라니입니다."; 두 문자열에 차이가 ..

발단 (개요) 파이어베이스의 이상한 인증 순서 지나가던 사람을 붙잡고 회원가입을 할 때 물어본 것들을 말해보라고 하면 아마 대부분 아이디, 비밀번호, 이메일, 전화번호 등등을 이야기할 것이다. 그렇다면 이메일과 전화번호를 물어봤다면, 그게 정말 당신이 사용하고 있는 이메일과 전화번호가 맞는지도 물어봤다고 대답할 것이다. 위의 대답을 하고 회원가입 순서를 생각하면 일반적으로는 아래와 같이 생각하게 된다. 아이디, 비밀번호, 이메일, 전화번호 등등을 입력. 입력한 이메일과 전화번호가 정말 사용자의 것이 맞는지 인증. 인증이 완료되었다면 계정이 서버에 등록. 이게 대부분이 생각하는 회원가입과 인증 절차다. 하지만 파이어베이스에서는 이런 흐름과는 전혀 다르게 동작한다. 파이어베이스에서 제공하는 인증은 이미 등록..

들어가기 앞서 동기와 비동기에 대해 잘 모른다면 아래의 글을 먼저 읽고 오시는걸 추천드립니다! 동기와 비동기 개론 개요 동기와 비동기, 프로그래밍을 공부하다보면 항상 등장하는 개념이다. 중요한 개념이고 꼭 알아야한다고 하지만 이게 왜 중요한 개념인지 잘 이해하지 못하고 넘어간 적이 많다.▼ 하지만 noguen.tistory.com 개론 비동기 프로그래밍은 다른 작업이 끝나기를 기다리는 것이 아니라 그 동안에 다른 작업을 수행하게 해준다. 보통 아래의 작업들을 비동기로 수행하곤 한다. 네트워크를 통해 데이터 가져오기 데이터베이스에 데이터 쓰기 파일에서 데이터 읽어오기 이런 작업들은 읽어오거나 가져온 결과를 Future, 만약 여러개의 부분으로 나누어져 있는 결과라면 Stream으로 가져온다. 만약에 한 함..

발단 Cloud_Firestore 패키지를 설치하고 나서 데이터베이스에 생각한 대로 데이터가 잘 들어가는지 확인하기 위해 디버깅을 했는데 아래와 같이 에러 문구가 나왔다. Log (스크롤 주의) 더보기 LoadError - dlopen(/Library/Ruby/Gems/2.6.0/gems/ffi-1.15.5/lib/ffi_c.bundle, 0x0009): tried: '/Library/Ruby/Gems/2.6.0/gems/ffi-1.15.5/lib/ffi_c.bundle' (mach-o file, but is an incompatible architecture (have 'x86_64', need 'arm64')), '/System/Volumes/Preboot/Cryptexes/OS/Library/Rub..

개요 동기와 비동기, 프로그래밍을 공부하다보면 항상 등장하는 개념이다. 중요한 개념이고 꼭 알아야한다고 하지만 이게 왜 중요한 개념인지 잘 이해하지 못하고 넘어간 적이 많다.▼ 하지만 동기, 비동기라는 것은 사실 엄청나게 거창한 것은 아니고 우리의 상식 선에서 충분히 생각해 볼 수 있는 개념이다. 컴퓨터 공학과 학생이라면 아마 CS수업 중에서 이미 이와 비슷한 이야기를 듣기도 했을 것이다. 컴퓨터 전반에서 사용되고 있는 개념이면서 이해하고 보면 아주 당연한 이야기이기에 쉽게 이해할 수 있을 것이다. 동기(Synchronous) 동기란? 동기는 영어로 Synchronous이고, 다르게 번역하면 동시에라는 의미이다. 그렇다면 무엇을 동시에 수행하는 것이길래 `동기`라고 부르는 것일까? 그 답은 요청과 결과가..