이번에는 플러터를 다루기전에 알아두면 좋은 여러가지 기초 지식에 대해서 다뤄보고 그에 대한 내용을 정리하고자 한다. 프로젝트 디렉토리 구성 일단 플러터 프로젝트를 만들게 되면 수많은 디렉토리가 추가가 된다. 이 중에서 우리가 자주 다루는 부분은 lib폴더 안에 있는 main.dart라는 파일이고 나머지 andriod, ios는 우리가 만든 main.dart 라는 파일을 안드로이도나, IOS로 변환 시켜 줄때 어떻게 설정해야 하는지에 대한 부분으로, 그 외의 부분은 따로 설정해주지 않아도 된다. 만약에 웹뷰를 포함한 패키지가 필요할 경우에는 pubspec.yaml에 패키지의 정보가 담기게 되니 이를 참고하자. 위젯 위젯이란 화면에 보이게 하는 모든 요소를 의미한다. 우리는 이제 main.dart에서 코드..
이번에는 WillPopScope을 통해 뒤로가기를 누르면 전 화면으로 넘어가도록 하는 방법에 대해 정리한다. 흔히 아이폰이나 현재 나오고 있는 안드로이드 폰 같은 경우 뒤로가기 버튼이나 홈 버튼 없이 제스쳐를 통해 해당 행동을 제어하고 있다. 하지만 그 반대의 경우로 홈, 뒤로가기 버튼이 존재한다면 해당 버튼을 눌렀을 때, 재 역활을 할 수 있도록 설정하여야 한다. WillPopScope willPopScope 위젯은 주로 Scffold 위젯을 감싸서 뒤로가기 버튼을 제어할때 자주 사용한다. 사용 방법은 리턴하는 Scaffold 부분을 willPopScope로 감싸고, onWillPop을 통해 이를 제어한다. 현재 여기서 사용하고 있는 컨트롤러는 https://jheaon.tistory.com/220 여..
이번에는 플러터를 통해 웹뷰를 어떻에 실행시킬 수 있는지에 대해 정리하고자 한다. 웹 뷰 (Web View) 패키지 설치 플러터에서 웹 뷰를 사용하기 위해서는 패키지를 설치하여야 한다. 일반적으로 Dart 언어에서 다루는 패키지는 pub.dev에서 확인 할 수 있으므로 해당 사이트에서 적절한 패키지를 찾아 설치하고, 패키지를 어떻에 사용하는지에 대해서 설명이 있으므로 이를 활용하여 사용하는 방법을 익혀나가는 것을 추천한다. https://pub.dev/ Dart packages Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter and general D..
상황 Flutter 설치 후, 환경 변수 설정을 했었는데 맥의 iterms 터미널에서는 flutter 명령어가 잘 먹히는데, 안드로이드 스튜디오에서 연 터미널에서는 flutter 명령어를 수행하지 못하는 상황이었다. 해결 처음에 플러터 영상을 보고 Flutter 환경 변수를 지정하는 과정에서 아래 명령어를 통해 zshrc 파일에 들어간 뒤, 아래 구문을 추가하였다. # 터미널에서 code ~/.zshrc 입력 export PATH="$PATH:`pwd`/flutter/bin" 하지만 이는 안드로이드 스튜디오에 연결되어 있는 터미널에서는 인식을 하지 못해서, 경로를 아래와 다시 수정했다. # 터미널에서 code ~/.zshrc 입력 export PATH="$PATH:$HOME/flutter/bin" # 적..
이번에는 맥에서 플러터를 설치하고, 환경 설정을 하는 방법에 대해 소개하고자 한다. 플러터 설치 플러터 설치를 위해서 공식 홈페이지에 들어간다. 공식 홈페이지 : https://flutter.dev/ Flutter - Build apps for any screen Flutter transforms the entire app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase. flutter.dev 맥 유저 같은 경우에는 intel 버전 맥에서 설치할껀지 애플 실리콘 버전 맥을 설치 할껀지 물어보는데 이는 자신의 맥 종류에 따라 다르므로 확인 후 다..
이번에는 tailwind를 작성하면서 사용했던 단축키나 여러 팁들을 저장하고자 한다. 해당 내용은 추후 tailwind을 사용하고 배우면서 하나씩 채워 나가는 용도로 사용하고자 한다. html 기본 골격 만들기 일단 html 문서를 건들일때는, , 클래스가 담긴 태그 만들기 일반적으로 태그안에 클래스를 만들려고 하면 태그를 적어둔 뒤, 뒤에 class="" 을 붙여 처리한다. 하지만 이 시간 마저 아깝다면 해당 방법을 사용해보자. .p-2.m-2.justify-center.items-center. + Tap 해당 방법을 이용하게 되면 태그가 새롭게 만들어 진다. 만약에 div 태그가 아닌 다른 태그를 쓰고 싶다면 첫 온점 앞에 자신이 사용하고자 하는 태그를 적어두면 된다. - index.html 태그 반..
이번에는 tailwind을 이용한 트랜스폼, 애니메이션 기능에 대해서 알아보고자 한다. 트랜스폼 tailwind에서 transform이란 변환을 제어하는 클래스를 의미 한다. 크기 변환, 위치 변환, 등등 여러 움직임에 대한 변환을 제어 할 수 있다. 만약 움직임에 대한 시간을 부여하고 싶다면 duration 옵션을 통해 제어하면 된다. -index.html Click me Click me Click me 애니메이션 요소에 애니메이션적 요소를 추가하기 위한 클래스이다. 주로 아래 3가지가 자주 사용된다. animate-spin : 회전 animate-ping : 핑 animate-bounce : 바운스 animate-pulse : 펄스 애니메이션을 추가하거나, 원래 있던 속성을 변경하려고 한다면, 다음과..
이번에는 tailwind을 이용한 플렉스, 그리드를 조절하는 방법에 대해서 소개하고자 한다. 플렉스 tailwind에서 flex는 하나의 공간을 의미하며, 공간의 크기를 조절하기 위해서 사용 한다. 일반적인 flex는 가로로 아이템이 쌓이며 flex-col을 통해 세로로 아이템들을 세울 수 있다. 만약 아이템이 flex박스를 넘어갈 때, 줄바꿈이 되길 원한다면 flex flex-wrap 클래스를 사용하면 된다. 항상 flex를 사용하다 보면, items와 justify에 대해서도 같이 나오는데 이에 대해서 알아본다. justify와 items 간단하게 설명하면 justfiy와 items는 정렬을 하기 위한 클래스이다. 아이템들을 위, 아래로 정렬하기 위해서는 items, 좌, 우로 정렬하기 위해서는 ju..
이번에는 tailwind을 이용한 테두리, 필터, 상호작용을 조절하는 방법에 대해서 소개하고자 한다. 테두리 일반적으로 테두리를 표현하기 위해서 border을 사용한다. 만약에 테두리를 상, 하, 좌, 우 이렇게만 표현하고 싶다면, border-t, border-b, border-l, boder-r 처럼 표현이 가능하며 굵기는 뒤에 숫자를 붙여 boder-y-2 처럼 표현이 가능하다. 가끔 테두리의 각진 부분을 깎고 싶은 경우도 있는데 이는 rounded을 이용하여 처리한다. rounded-lg ~ full 까지 이용하여 깍임의 정도를 조절할 수 있다. 물론 상, 하 처럼 깎고 싶은 부분을 조절 할때는 rounded-t-xl, rounded-b-xl 처럼 중간에 방향만 추가하면 된다. 마지막으로 테두리의..
