Flutter/Flutter Tech

[플러터] Device 설정 무시 글자 크기 고정하기

스마트폰에는 자체적으로 글자 크기를 조절하는 설정이 존재한다. Device에서 글자의 크기를 키우게 되면 앱에서도 자동적으로 글자가 커져 Overflow가 발생한다. Flutter에서 Device의 글자 크기 설정을 무시하고 임의로 고정할 수 있다. 코드 MaterialApp( builder: (context, child) { return MediaQuery( child: child, data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0), ); }, home : ... ) 정말 간단하게 최상단 MaterialApp의 build 속성 내부에 위와 같이 MediaQuery 함수를 삽입하여 글자 크기를 고정할 수 있다. Overflow로 고통 받고 싶지않다..

[플러터] 위젯 반응형으로 개발하기

ScreenUtil 스마트폰의 크기는 천차만별이다. overflow가 발생하지 않게 하기 위해 일반적으로 MediaQuery를 이용해 size를 설정하곤 한다. 하지만 더 간단하고 디자이너와 쉽게 연계할 수 있는 패키지가 존재한다. flutter_screenutil | Flutter Package A flutter plugin for adapting screen and font size.Guaranteed to look good on different models pub.dev 해당 패키지의 원리는 간단하다. 기준이 되는 스크린 사이즈를 설정해놓고 해당 함수로 위젯의 사이즈를 설정하면 비율을 계산해 앱이 동작하는 디바이스 스크린 사이즈에서 비율에 맞게 위젯 사이즈를 부여해준다. 즉, MediaQuery를..

[플러터] SVG(벡터 이미지) 불러오기

SVG 디자이너와 협업을 하거나, 이미지를 공급받는 경우 흔히 아는 PNG, JPG 타입이 아닌 SVG 형식이라는 것을 본적이 있을 것이다. SVG는 벡터 이미지의 일종으로 쉽게 코드의 형태로 된 이미지라고 말할 수 있다. 위처럼 이미지가 코드로 표현된다. 벡터 이미지에 대한 자세한 설명은 생략하겠다. 필자는 외부 디자이너에게 의뢰한 앱디자인을 어도비 XD파일로 제공받았는데 아이콘 파일들은 별도로 주지 않고, XD내에 첨부해주었다. XD에서는 아래와 같이 이미지를 SVG 코드로 변환할 수 있다. Flutter SVG flutter_svg | Flutter Package An SVG rendering and widget library for Flutter, which allows painting and d..

[플러터] 스크린샷 금지하기

Screenshot disable 은행 앱과 같은 보안 앱이나 주요한 컨텐츠가 있는 경우 앱의 스크린샷을 금지하곤 한다. 네이티브 코드와 연관된 부분이나, 이를 간단하게 할 수 있는 패키지가 존재한다. (네이티브 코드를 사용해도 동일하다) 단, IOS에서는 스크린샷을 금지하는 기능 자체가 불가능하며 스크린샷을 찍는 행위를 감지할 수는 있다. 따라서 스크린샷 금지는 안드로이드에서만 가능하다. 패키지 flutter_windowmanager | Flutter Package A Flutter plugin for manipulating Android WindowManager LayoutParams. pub.dev pubspec.yaml flutter_windowmanager: ^0.0.2 사용법 최상단 위젯의 i..

[플러터] 뒤로가기 버튼/제스쳐 금지

WillPopScope Navigator.pop이 발생함을 감지하는 위젯이다. 스크린 위젯의 최상단에 선언하여 감싸준다. WillPopScope( onWillPop: () { return Future(() => false); //뒤로가기 막음 }, child : ) onWillPop 속성에 위의 예제처럼 Future로 false를 반환하면 소프트키, 물리버튼, 제스쳐를 통한 뒤로가기가 불가능해진다. 뒤로가기 동작시 메시지를 띄우거나 특정 동작을 하고자 할 때 이 속성에 동작을 삽입하면 된다.