앱이 개발되고 디자인이 갖춰지면 스마트폰 최상단에 위치한 상태 바의 색상이 어색해 보일 것이다. 상태 바의 배경 색상과 글자 색상을 간단하게 변경할 수 있다. 코드 bool isDarkMode; SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith( statusBarColor: Colors.white, // Color for Android statusBarIconBrightness: isDarkMode ? Brightness.light : Brightness.dark, statusBarBrightness: isDarkMode ? Platform.isIOS ? Brightness.dark : Brightness.light : Pla..

스마트폰에는 자체적으로 글자 크기를 조절하는 설정이 존재한다. 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 디자이너와 협업을 하거나, 이미지를 공급받는 경우 흔히 아는 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..

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