costomizing style

dbscks1239·2021년 11월 20일
0

Flutter 발전시키기

목록 보기
2/5

theme

앞으로 보다 나은 UI를 설계하고, 여러 페이지에서 스타일의 일관성을 유지하기 위해서는, 'theme'를 사용해야 한다.
https://docs.flutter.dev/cookbook/design/themes
테마에서 원하는 스타일을 정의해 놓으면, 앱의 새 페이지마다 다시 스타일을 지정할 수고가 줄어들고 일관성이 향상된다.

Color

지금까지는 MaterialAPP에서 제공해주는 색상을 골라서 사용했다.
https://www.materialpalette.com/

하지만, 좀더 구체적으로 원하는 색상을 사용할 수 있다.
'ColorZilla'라는 서비스를 이용하자.
https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp
설치하기를 누르면 상단탭에 펜모양의 아이콘이 추가됨을 확인할 수 있다.

클릭하고, 원하는 색상으로 커서를 옮긴후 클릭하면 hexcode 형식의 값을 얻을 수 있다. 이 형식값에 대한 설명은 아래 링크에 나와있다.
https://api.flutter.dev/flutter/dart-ui/Color-class.html

이 값을 Color위젯안에 넣으면 된다. 이때, #은 투명도를 나타내는 값으로, 보통 '0xFF'로 바꾼다.
'0xFF'는 투명도가 0 임을 뜻한다.

profile
Flutter 학습 일기

0개의 댓글