기본적으로 Flutter 프로젝트를 처음 생성했을 때 portrait 모드와 landscape 모드를 둘다 가능하게 되어 있다. 여기에서 landscape 모드를 비활성화 하기 위해서는 아래와 같이 하면 된다. 먼저 main.dart에 package:flutter/services.dart 를 import 해준다. import 'package:flutter/services.dart'; 그 다음 main 메소드에 코드를 추가해준다. // main.dart ... // disable landscape void main() { WidgetsFlutterBinding.ensureInitialized(); SystemChrome.setPreferredOrientations( [ DeviceOrientation.po..

Flutter의 BottomNavigationBar은 무조건 2개 이상의 item을 추가해야 하며 3개까지는 별다른 옵션을 추가해주지 않아도 상관이 없다. 하지만 4개 이상의 item을 추가할 시 첫 item만 icon과 label이 제대로 나타나고 그 이후 항목에 대해서는 label이 제대로 나타나지 않아 위치가 이상하게 보이는 문제가 발생을 한다. 위와 같이 홈 item 만 icon과 label이 정상적으로 나타나고 그 뒤로는 label이 보이지 않아 홈만 위로 올라가있게 나온다. 이 문제를 해결하는 방법은 BottomNavigationBar에 type: BottomNavigationBarType.fixed을 추가해주면 된다 ... bottomNavigationBar: BottomNavigationB..

오늘의 포스팅은 Figma Auto layout을 이용한 Material Card를 만들어 보겠습니다. 아래의 예시는 Angular material card 예제에 나와있는 보기입니다. 아래와 똑같이 만들어 보도록 하겠습니다. 기본 Material Card 내부에는 Padding이 16px이 적용되어 있습니다. 먼저 Frame을 그려주고 Auto layout을 설정한 후에 내부 여백을 16px로 적용을 해주도록 하겠습니다. 그리고 제일 상단에 Card Header 부분을 만들어 보겠습니다. 자세히 보면 3개의 항목으로 구성이 되어 있는것을 볼수 있습니다. 썸네일 이미지와 이름, 종류가 표시 되어 있습니다. 헤더의 내용을 넣을 Frame을 생성하고 썸네일을 표시할 원과 이름, 종류를 표시할 텍스트를 그려줍..

Figma에서 AutoLayout은 손쉽게 레이아웃이나 버튼을 만들수 있게 도와주는 기능이라고 생각을 했습니다. 이번 포스팅에서는 안에 텍스트에 따라서 가변하는 버튼을 만들어 보겠습니다. 먼저 Figma의 Rect와 Text를 이용해서 직사각형 버튼을 만들어 보겠습니다. 1. Figma Rect를 이용해서 직사각형을 그려줍니다. 2. Figma Text를 이용해서 텍스트를 입력해줍니다. 3. Text 크기에 맞춰서 버튼의 크기를 조절해줍니다. 여기서는 좌우 여백 16px에 높이 36px인 버튼을 만들어 보겠습니다. 임의로 그린 크기 사각형과 텍스트를 보면 좌우 여백이 17px, 22px 높이가 58px인 것을 확인 할수 있습니다. Rect의 크기와 Text의 위치를 조정해서 원하는 크기와 위치를 맞춰줍니..

아래의 플러그인들은 제가 직접 사용해보고 유용했던 플러그인들입니다. 계속해서 업데이트 할 예정입니다. 1. Figma Walker 피그마 Frame을 쉽게 찾을 수 있도록 도와주는 플러그인입니다. 검색하고 선택을 하면 해당 Frame의 위치로 이동을 하고 화면 중앙에 보여줍니다. [Figma Walker Plugin] Figma - Figma Walker | Figma Walker is a new launcher for Figma. You can take any actions you want from a single input ... Figma Community plugin — Figma Walker is a new launcher for Figma. You can take any actions you ..

Bitbucket은 Atlassian에서 운영하는 Git 버전 관리 저장소입니다. Github에는 CI/CD를 위한 Action이 존재하고 Bitbucket에는 pipeline이 있습니다. 아래에서 확인 할 수 있다시피 무료 버전의 경우 한달에 50분이라는 build 시간이 주어집니다. 추가로 시간이 더 필요한 경우에는 업그레이드를 통해서 build 시간을 늘릴수 있습니다. Standard의 경우에는 한달에 2,500분, Premium의 경우에는 한달에 3,500분이 주어집니다. Bitbucket - Pricing | Atlassian Bitbucket is the Git solution for professional teams. Bitbucket Cloud is free for teams of 5. B..