To-Do List 앱 Step 10. 디자인 입히기 (colorScheme속성 , Card 위젯)

2024. 12. 10. 14:25ㆍ같이 공부합시다 - Flutter/Flutter로 To-Do 앱 만들기

728x90

이제부터 To-Do List 앱은
이것저것 다양한 시도를 해 볼 것이고,
배포까지 달려볼 겁니다. 😁👍

단 한 명이라도 사용한다면,
이 앱은 세상에 나온 의미가 있을 것입니다. (ㅎ)
아무도 안 쓰면 제가 쓰죠 뭐. 😁

오늘은 디자인에 변화를 좀 줘보겠습니다.

<앱 스타일 주는 스테디빌더>

매일 보라색 계열의 화면을 보니 좀 지겹네요.
산뜻한 노랑 계열이 좋을 것 같습니다.

가봅시다.😊

오늘 추가할 내용이예요. 😁

1 ) 전체 테마 색상 적용하기
2 ) 할 일 목록 Card 위젯으로 변경
3 ) 글씨 크기 변경

1 ) 전체 테마 색상 적용하기

전체 테마는 UI 를 그려주는 핵심 메서드인
Widget build (BuildContext context) 에서 다룹니다.
여기에선 Material Design 스타일을 적용했죠.

<현재까지의 화면>

‘디자인을 어떻게 하면 멋지게 바꿀 수 있을까?’

이런 생각으로 자료를 찾아보던 중에,
theme 속성의 primarySwatch 를
다른 속성으로 바꿀 수 있다는
내용을 확인 ! 바로 적용해 보겠습니다 : )

ThemeData 위젯의
colorScheme 속성인데요.
primarySwatch 대신
사용할 수 있습니다.

바로 적용부터 해봅시다. (ㅎ)
디자인은 역시 눈으로 먼저 봐야겠죠?

오,, 꼬부기 색깔이 되었네요.

눈이 편하긴 한 것 같은데,
뭔가 민트초코같은 느낌이…

🔸ColorScheme.fromSeed:

다음 속성(seedColor) 기반으로 조화로운
색상 팔레트를 생성하는 역할을 합니다.

<색상 팔레트 예시>

🔸useMaterial3: true:

최신 Material Design 3 스타일을
활성화 하는 기능입니다.
구글에서 가이드라인을 찾아볼 수 있답니다. (ㅎ)

전 아무래도 산뜻한 노랑 계열이 좋겠어요.
위 코드에서 색만 바꾸면 되겠쥬 ?

와웅 좋네요 : )

<변경 결과 2>

산뜻하기 보다는 전체적으로
따뜻한 느낌이 되었네요. : )

팝업 메뉴 뿐만 아니라,
완료 체크 색상도, 다이얼로그도
모두 colorScheme 에 어울리게 되었네요.

진짜 편리한 기능입니닷 ! (ㅎ)

2 ) 할 일 목록 Card 위젯으로 변경

지금 우리 앱은 할 일 목록이
텍스트만으로 주욱 나열됩니다.

뭔가 없어 보이죠 …

목록이 카드 형태로만 보여도,
뭔가 있어 보일 겁니닥 !

어때요?

할 일 목록 하나하나가
카드 목록이 되었네요.

뭔가 막 누르고 싶어지죠?

구웃 (ㅎ)

🔸return Card ( child: ListTile ( ) )

어렵게 생각마세요 : )
return ListTile ( ) 되어 있었는데,
ListTile 만 잘라내기 해놓고,
return Card ( ) 를 만들어 둔 뒤에,
( ) 안에 ListTile 을 child 로 두면 됩니다.

말로 하면 어렵지만,
실제로 해보면 어렵지 않습니다.

기존의 ListTile 을 Card( ) 로 감싼다고
생각하면 편합니다 !

🔸elevation:

Card 위젯에 높낮이가 느껴지도록 해줍니다.
자연스러운 그림자가 생겨요 !

🔸margin: const EdgeInsets.symmetric(vertical: )

Card 위젯의 바깥 여백 (margin) 을 주는데,
vertical 속성이라 위, 아래쪽으로 공간을 띄웁니다.

🔸shape: RoundedRectangleBorder( )

Card 형태이며 모서리가 둥근 직사각형 형태가 되죠 : )

🔸child: ListTile ( )

제일 상위 위젯이었는데,
이젠 Card 위젯의 자식 위젯이 되었답니다.

🔸contentPadding: const EdgeInsets.all( )

Card 위젯의 안쪽 여백 (padding) 을 주는데,
EdgeInsets.all 이기 때문에 모든 방향 동일 여백을 줍니다.

3 ) 글씨 크기 변경

마지막으로 폰트 사이즈 변경입니다 : )

<폰트 사이즈 변경>

🔸bodyLarge: TextStyle(fontSize: )

textTheme 속성에
TextTheme 위젯을 먼저,
그 안에 bodyLarge 속성에서
TextStyle 위젯 사용!

폰트 사이즈 하나 변경하는데,
설정을 좀 해야 하네요. (ㅎ)

길지 않았죠 ?

물론 길지 않은 시간이기 때문에,
디자인이 막 화려하거나 그러진 않죠 (ㅎ)

디자인은 시간날 때 더 해봅시다.

오늘도 고생하셨습니다.

끝 !