앱 개발/플러터(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] 플러터 DefaultTabController 버튼으로 index 컨트롤하기 / change index using Controller앱 개발/플러터(Flutter) 2023. 1. 8. 00:08
플러터에서 옆으로 넘길 수 있는 바를 구현할 때 AppBar가 없는 바를 만들고 싶다면, DefaultTabController를 이용할 수 있다. 오늘 이 게시글에서는 1. DefaultTabController를 이용해서 화면 중간에 옆으로 넘길 수 있는 부분 만들기 2/. DefaultTabController의 인덱스를 마음대로 조정할 수 있게 Controller 설정하기 이 두가지에 대해 알아보겠다. 1. DefaultTabController로 화면 중간에 옆으로 넘길 수 있는 부분 만들기 아래와 같이 DefaultTabController를 Column 안에 넣으면 화면 중간에 옆으로 넘길 수 있는 바를 구현할 수 있다. DefaultTabController의 child로 SizedBox를 사용했는데..
-
[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를 설정, 그 이름을 문자열로 ..
-
[flutter] 플러터 TextFormField 내용 수정할 때마다 바뀌는 Text 구현하기 / onChange 속성앱 개발/플러터(Flutter) 2022. 8. 11. 16:46
숫자를 입력하면 거기에 10퍼센트 더한 계산결과를 보여주는 실시간 게산기를 구현해보고 싶다. 첫째로, rewardCtrl라는 TextEditingController를 선언했다. 이 rewardCtrl에서부터, 사용자에게 입력받은 데이터를 뽑아올 수 있다. 아래와 같이 SizedBox 내에 TextFormField를 child로 두었다. 입력창의 크기가 고정되도록 만들었다. 아래와 같은 속성을 추가하여, 사용자가 숫자 이외에는 입력할 수 없도록 설정하자. keyboardType: TextInputType.number onChange라는 속성을 사용할건데, '내용이 바뀔 때 마다' 시행되는 함수이다. onChanged: (text){ setState(() { _rewardCalculResert = _rewa..