Flutter

[플러터] 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..

[플러터/다트] 삼항연산자와 nullish coalescing

삼항연산자 int value1 = 5; bool value2 = false; value2 = value ? 100 : 200; ?는 자바에서도 볼 수 있는 삼항연산자입니다. ? 앞의 수식이 true면 :의 앞쪽을 반환하고 false면 :의 뒤쪽을 반환합니다. 플러터에서 굉장히 자주 사용하게 되는데, widget내에서는 if문을 사용하지 못하기 때문입니다. isSignIn ? RaisedButton( child: Text('SingUP') onPressed:(){} ) : SizedBox(), 예시처럼 조건에 맞게 widget이 랜더되야하는 경우에는 삼항연산자를 사용해야합니다. 또, 크기나 기타 위젯의 속성들을 조건에 맞추는 경우도 마찬가지입니다. 그리고 삼항연산자는 반드시 true와 false 두가지 반..

[플러터/다트] where 함수 (JS의 Filter)

Filter 자바스크립트의 배열 타입의 변수에서 Filter()를 사용하곤한다. 하지만 왜 다트에는 없을까? 찾아보았더니 where이라는 함수가 이를 대신하고 있다. 보시다시피 파생 함수가 많은데 메인 동작은 동일하고 함수명으로 차이점을 대략 유추할 수 있다. Where where의 주요 동작은 자바스크립트의 filter와 같이 각 요소들을 조건으로 걸러 새로운 배열을 만드는 함수이다. 조금 다른 점이 있다면 index 값을 제공해주지 않는다. 아래는 배열의 요소 중 짝수만을 골라 새로운 배열을 생성하는 예시이다. where은 return 값이 배열이므로 기존 배열을 수정하길 원하면 retainWhere을 사용해야한다. List list = [...] List evenNumbers = list.where..