[프로젝트] 우리 처음 만난날 U&I (5) 테마 적용

들어가기 앞서...

이번 게시글에는 테마를 적용해볼 것이다.

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);
  }

main.dart

현재, 코드를 보면 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,
          )
        ],
      ),
    );
  }
}

 제대로 태마가 적용되었다!

---

끝으로...

1. 텍스트 스타일을 테마로 분리해서 적용하는 방법을 배웠다!
2. of 라는 constructor와 context 를 파라미터를 넣어 사용해 Theme 를 가져오는 방법을 배웠다!

---