728x90
들어가기 앞서...
이번 게시글에는 테마를 적용해볼 것이다.
main.dart 페이지에서 글꼴들을 테마로 분리해서 적용해볼 예정이다!
나중에 material.dart 에서 제공하는것들도 테마로 분리해서 적용해보자!
본문으로...
1. main.dart 에서 theme 를 추가 해보자!
- 기본적인 theme () 이다.
void main() {
runApp(MaterialApp(
theme: ThemeData(
TextTheme: TextTheme()
),
home: HomeScreen(),
))
}
- TextTheme() 안에 여러가지 파라미터를 넣을 수 있다. 확인해보려면, Go to Declaration or Usages 를 봐보자!
1) home_screen.dart 에서 TextStyle() 으로 적용 해둔 것을 전부다 옮겨주자!
기본적으로 headlin 과 bodyText 를 사용해서 따로 분리해줄것이다.
void main() {
runApp(MaterialApp(
theme: ThemeData(
textTheme: TextTheme(
headline1: TextStyle(
color: Colors.white,
fontFamily: 'parisienne',
fontSize: 80.0,
),
headline2: TextStyle(
color: Colors.white,
fontFamily: 'sunflower',
fontWeight: FontWeight.w700,
fontSize: 50.0),
bodyText1: TextStyle(
color: Colors.white, fontFamily: 'sunflower', fontSize: 30.0),
bodyText2: TextStyle(
color: Colors.white, fontFamily: 'sunflower', fontSize: 20.0),
),
),
home: HomeScreen(),
));
}
스타일이 기본적으로 돌아간것을 볼 수 있다!
2. fontFamily 를 분리해주자!
- fontFamily 같은 경우, 최상단의 ThemDate 에 기본 폰트를 변경해줄 수 있다.
- 기본 fontFamily 를 'sunflowe' 로 해주고 공통적인 부분을 제거해주자!
void main() {
runApp(MaterialApp(
theme: ThemeData(
fontFamily: 'sunflower',
textTheme: TextTheme(
headline1: TextStyle(
color: Colors.white,
fontFamily: 'parisienne',
fontSize: 80.0,
),
headline2: TextStyle(
color: Colors.white, fontWeight: FontWeight.w700, fontSize: 50.0),
bodyText1: TextStyle(color: Colors.white, fontSize: 30.0),
bodyText2: TextStyle(color: Colors.white, fontSize: 20.0),
),
),
home: HomeScreen(),
));
}
3. 분리한 테마를 적용해주자!
- 우리가 분리한 테마를 적용해야하는 부분은 _TopPart 클래스이다. 분리한 테마를 보면 TextTheme 를 정해놓은 것이 있는데, 이것을 불러와야하는것이다. (headline1, 2,3)
1) theme 를 한번에 불러오는 방법이 있다.
class _TopPart extends StatelessWidget {
...
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
}
현재, 코드를 보면 ThemeData() 위젯이 HomeScreen() 보다 위에서 선언되어져있다.
위젯트리에서 가장 가까운 Theme 인스턴스를 가져올 수 있다.
물론 아무거나 다 가져올 수 있는것은 아니다.
우리가 저번 게시글에서 한번 비슷한걸 배운적이 있다.
// 가장 가까운 위젯의 MediaQuery 위젯의 사이즈를 가져올 수 있다.
final size = MediaQuery.of(context).size;
이 둘의 공통점은 context 를 가져와서 of 라는 constructor 를 사용하고 있다는 것이다.
constrructor 인 of 를 사용하는 클래스들의 특징은 eneditted 위젯이라는 점이다.
우선은 간단하게, 가장 가까운 위젯의 TextTheme 를 가져올수 있다! 라는 점을 알고있고, 자세한것은 나중에 정리하겠다.
2) theme 변수를 사용해보자!
이런식으로 테마를 적요해주면 된다.
const Text(
'U&I',
style: theme.textTheme.headline1,
)
코드 )
class _TopPart extends StatelessWidget {
final DateTime selectedDate;
final VoidCallback onPressed;
_TopPart({required this.selectedDate, required this.onPressed, Key? key})
: super(key: key);
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final textTheme = theme.textTheme;
final now = DateTime.now();
return Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'U&I',
style: textTheme.headline1,
),
Column(
children: [
Text(
'우리 처음 만난 날',
style: textTheme.bodyText1,
),
Text(
'${selectedDate.year}.${selectedDate.month}.${selectedDate.day}',
style: textTheme.bodyText2,
),
],
),
IconButton(
iconSize: 60.0,
onPressed: onPressed,
icon: const Icon(
Icons.favorite,
color: Colors.red,
)),
Text(
'D+${DateTime(
now.year,
now.month,
now.day,
).difference(selectedDate).inDays + 1}',
style: textTheme.headline2,
)
],
),
);
}
}
제대로 태마가 적용되었다!
끝으로...
- 텍스트 스타일을 테마로 분리해서 적용하는 방법을 배웠다!
- of 라는 constructor와 context 를 파라미터를 넣어 사용해 Theme 를 가져오는 방법을 배웠다!

728x90
'⭐️ 개발 > 플러터' 카테고리의 다른 글
[패캠-코딩 왕초보를 위한 앱 만들기 풀패키지] (8) 이미지 출력 (AssetImage, NetworkImage) (0) | 2022.11.15 |
---|---|
[패캠-코딩 왕초보를 위한 앱 만들기 풀패키지] (5) StatefulWidget, FloatingActionButton (0) | 2022.11.15 |
[프로젝트] 우리 처음 만난날 U&I (4) 상태관리 (0) | 2022.11.09 |
[패캠-코딩 왕초보를 위한 앱 만들기 풀패키지] (2) 복수 위젯담는 박스 (0) | 2022.11.09 |
[패캠-코딩 왕초보를 위한 앱 만들기 풀패키지] (1) padding, margin, alignment (0) | 2022.11.09 |