Flutter
-
[Flutter] 플러터 반응형 디자인을 위한 글씨 크기 조절 Fitted Box, AutoSizeText, screenutil (Adjust font size for Flutter responsive design)앱 개발/플러터(Flutter) 2023. 8. 10. 00:43
플러터에서 반응형 디자인을 위해 최적화된 글씨크기를 적용하는 코드를 작성해보자. 총 두 가지 방법을 준비했다. Let's write a code that applies optimized font size for reactive design in platters. I prepared a total of two methods. 특히, 해당 포스팅은 flutter screenutil 라이브러리와 함께 사용하는 방법을 알려줄 것이다. In particular, the posting will tell you how to use it with the flutter screenutil library. flutter_screenutil: screenutil은 디바이스의 가로와 세로에 대해 상대적인 크기를 지정할 수 있..
-
[Flutter] 플러터 Svg 그림 넣기 / SVG 그림이 검정색으로 뜨는 오류 / SvgPicture.asset()앱 개발/플러터(Flutter) 2023. 3. 27. 01:33
오늘은 플러터로 SVG 그림을 넣는 방법에 대해 알아보자. 아래와 같이, 일러스트레이터 파일을 SVG로 저장하면 SVG 파일을 얻을 수 있다. 내보내기 형식에서 SVG를 선택해주면 아래와 같은 창이 뜬다. 그런데 여기서 주의할 점은 스타일을 프레젠테이션 속성으로 해야한다는 것이다. 그렇게 설정하지 않으면 플러터에서 SVG 파일을 그림으로 띄웠을 때 검정색으로 보이게 된다. 그러므로 프레젠테이션 속성으로의 추출이 끝났다면, 라이브러리를 설치해야한다. 이후 pubspec.yaml에서 사진의 위치를 설정해주는 것은 동일하다. 라이브러리와 사진 주소 모두 pubget까지 끝났다면 다음 코드를 넣어주자. SvgPicture.asset("파일주소"), 그러면 SVG 파일이 정상적으로 뜰 것이다 !!
-
[Flutter] 플러터 시작 - 플러터란 무엇인가, 플러터 설치하기앱 개발/플러터(Flutter) 2023. 3. 20. 14:37
플러터(Flutter)란? Flutter은 구글에서 개발한 크로스 플랫폼 개발 프레임워크이다. 한 번의 코딩으로 IOS 및 안드로이드 앱을 개발할 수 있다는 장점을 갖고 있다. 네이티브(JAVA, Kotlin 등)와 차이가 있을 수 있으나, 눈에 띄는 큰 차이는 없다. 배우기 쉽고 IOS, 안드로이드가 동시에 호환되므로, 빠른 시장 검증이 필요한 스타트업 등에서 자주 사용된다. (경험상) But, 비교적 레퍼런스가 적고, 복잡한 앱을 만들수록 참고할 수 있는 레퍼런스가 극도로 적어진다. 프론트와 백앤드 구분을 잘 지어야하는 등 누가 코드를 짜느냐에 따라 리소스 분리 정도가 달라질 수 있다. 네이티브에서 아주 구현이 쉬운 기능들도 돌고 돌아 구현해야하는 등 불편함이 따르는 기능이 몇가지 있다. ※ 1) 크..
-
[Flutter] 플러터 실행(Run) 시 자세한 로그(log)를 출력하는 코드 / flutter run --build -vv앱 개발/오류모음 - Flutter 2023. 3. 11. 23:46
플러터 실행(Run) 시 자세한 로그(log)를 출력하는 코드는 아래와 같다. flutter run --build -vv 실행을 시키게 되면 아래와 같이 긴 로그와 함께 출력을 해볼 수 있고, 그냥 run을 했을 때 간단하게 뜨는 오류 대신 긴 오류를 마주할 수 있다. 그러면 더 자세히 어디서부터 어떻게 잘못된지 알 수 있고, 도움을 요청할 때에도 더 정확한 질문을 할 수 있게 된다. 정보에 오류가 있을 경우 댓글 부탁드립니다 ! 감사합니다 :)
-
[Flutter] release 시 에러 메세지 출력 / null safety 에러 / flutter build appbundle --no-sound-null-safety --release -vvgit 2023. 1. 5. 17:58
플러터로 어플리케이션을 출시하려고 할 때, 번들로 릴리스 시 에러가 발생할 때가 있다. 그런데 에러 메세지를 자세히 보여주지 않는 경우, 막막하다. 에러 메세지를 보여는 줘야지 ! 그토록 보기 싫던 에러가 갑자기 엄청 보고싶다. flutter build appbundle --release -vv 터미널창에 위와 같이 입력하면 엄청나게 많은 정보가 프린트된다. 여기서 빨간색 에러가 처음 생길 때 즈음, 핵심 에러를 확인할 수 있다. 여기서 null safety에 대한 에러 문구를 발견할 때가 많다. 라이브러리가 여러개 null safety에 대한 릴리스 에러를 뱉어낸다면, 아래와 같이 빌드시키면 해결할 수 있다 ! flutter build appbundle --no-sound-null-safety --re..
-
[flutter] 플러터 버튼의 애니메이션 효과 제거하기 / textbutton splash color flutter앱 개발/플러터(Flutter) 2022. 8. 24. 01:30
플러터에서 버튼을 누르면 자동적으로 애니메이션을 갖게 된다. 이를 제거하기 위한 코드를 알아보자. 핵심 코드는 아래와 같다. overlayColor: MaterialStateColor.resolveWith((states) => Colors.transparent), 코드는 MaterialApp 내 theme에 해당 속성을 추가해주면 된다. 그러면 버튼을 눌렀을 때 잠시 회색으로 변한다던가, 누른 게 티가 난다거나, 회색이 사선으로 움직이는 등 '터치를 알아챌만한 애니메이션이나 효과'가 없어진다.
-
[flutter] 플러터 drawer의 아이콘 색깔 변경하기 / drawer icon color change flutter앱 개발/플러터(Flutter) 2022. 8. 23. 23:44
플러터의 drawer 아이콘 색깔을 어떻게 변경하는지 알아보자. 원래 기본값은 흰색으로, 배경이 흰색이라면 눈에 보이지 않을 수 있다. 아래와 같이 appBar 속성 안에 IconThemeData를 특정 색으로 설정해주면 아래 화면과 같이 icon 색상이 변경된 것을 확인할 수 있다. 핵심 코드는 다음과 같다. iconTheme: IconThemeData(color: Colors.black),
-
[flutter] 플러터에서 커스텀 폰트(글씨체) 적용하기 / pubspec 파일 fontfamily 설정앱 개발/플러터(Flutter) 2022. 8. 19. 15:42
이미지를 넣을 때와 비슷하다. assets 폴더 내부에, 다른 이미지 등과 구분하여 관리하기 위해 폴더를 생성하고, 그 하위에 글씨체 파일을 넣어준다. 그리고 pubspec.yaml에 들어가서 flutter 하위의 fonts에 아래 Tab 칸을 잘 지켜 넣도록 한다. family 앞에 짓고 싶은 이름을 넣어주고, 그 다음주에 fonts를 넣어 글씨체 묶음을 정의해준다. - assets 줄에는 글씨체의 주소를 넣는다. fonts : 이 flutter : 의 하위에 있음에 주의한다. pubspec.yaml 파일에서 수정한 항목이 생기면 Pub get 도는 Upgrade를 해주는 것을 잊지 말자. 실제 dart파일에는 아래와 같이, TextStyle의 속성으로 fontFamily를 설정, 그 이름을 문자열로 ..