패스트캠퍼스 환급챌린지 14일차 미션(2월 14일): 15개 프로젝트로 실무까지 끝내는 Dart & Flutter 앱 개발 강의 후기

오늘은 Flutter Theme에 대해 알아보고, 간단한 토이 프로젝트를 만들어본 후기를 남겨보려고 한다.

우선 Flutter Theme은 Flutter의 위젯에서 디자인과 가장 밀접한 관련이 있는 위젯으로, 활용 빈도가 매우 높다고 한다.

Flutter Theme은 일단 다른 위젯에 덧씌워지는 형태로 사용되는 것 같다. 사용법을 익히기 위해 간단한 카운터 앱을 만들어보았다.

우측 하단에 있는 버튼을 누르면 카운터 값이 올라가는 간단한 앱이다. 여기에 Flutter Theme을 사용해보자.

Scaffold에서 theme 프로퍼티를 통해 설정해줄 수 있다.

ThemeData 생성자 내부에서 colorScheme, appBarTheme과 같이 앱에서 전반적으로 활용하는 색상 정보를 설정해줄 수 있는 프로퍼티가 존재한다. 협업 시에 디자이너가 컬러 팔레트를 통해 세밀한 색상 정보를 제공해주었을 때 이런 방식을 활용하면 되겠다.

만약 컬러 팔레트가 없거나 내가 혼자 색상 컨셉을 적용해야한다면 어떻게 해야할까?

colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigoAccent),

 

이렇게 ColorScheme 객체의 fromSeed() 프로퍼티 메서드를 활용하면 된다. seedColor로 단일 색상을 넘겨주면 여러 UI에 대해 해당 색상과 어울리는 컬러를 '알아서' 적용해준다. 매우 신기했던 기능 중 하나.

그리고 이번 강의에서 이 ThemeData의 useMaterial3 프로퍼티... 이 친구가 플러터 3.10 버전 이후에는 기본값이 true로 설정돼있어서 강사님의 UI 구현 결과와 나의 실습 결과 화면에 차이가 있던 것이었다. useMaterial3: false를 주면 Material 2 버전의 디자인을 사용하게 된다. 참고하자.

 

그리고 특정 크기의 폰트의 Style을 전역적으로 설정할 수 있는 textTheme 프로퍼티도 잘 기억해두자. 아래와 같이 사용한다.

textTheme: TextTheme(
  bodyMedium: TextStyle(fontWeight: FontWeight.normal, fontSize: 30)
)

 

 

토이 프로젝트로는 간단한 가위바위보 앱을 만들어보았는데, 재사용성과 가독성을 위해 위젯을 별도의 파일과 디렉토리로 분리하고, 하위 위젯에 콜백을 넘겨 로직을 처리하는 방식을 활용하는 실습을 프로젝트성 예제를 통해 해볼 수 있어서 유익했던 것 같다.

확실히 전체적으로 웹 FE 개발과 비슷한 느낌을 엄청 받는 중이다!

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://bit.ly/48sS29N