Flutter - Theme 적용하기

1. Flutter 앱 개발에서 Theme이란?

• Flutter의 Theme은 앱 전체의 색상, 스타일, 그래픽 디자인 언어 등을 중앙에서 관리할 수 있게 해주는 기능
• Theme을 사용하면 앱 전체의 디자인 및 레이아웃을 일관되게 유지하면서 손쉽게 변경 가능
• MaterialApp 위젯에서 theme 속성을 통해 앱 전체에 대한 테마를 많이 설정함

2. Flutter에서 Theme 설정하기

• 피그마 디자인에서 사용한 컬러와 텍스트 스타일을 theme으로 모아두고, 사용해보고자 한다.
• colors.dart 파일에 색상 컬러를 모아두고, 필요할 때 import 하여 사용

import 'package:flutter/material.dart';

const mainAccentColor = Color(0xff6446ff);
const paleAccentColor = Color(0xffBFC6FA);
const subAccentColor = Color(0xff5293FF);
const red900 = Color(0xffFF402F);
const red600 = Color(0xffFF6450);
const gray900 = Color(0xff1B1D1F);
const gray600 = Color(0xff454C53);
const gray400 = Color(0xff878EA1);
const gray200 = Color(0xffC9CDD2);
const gray100 = Color(0xffE8EBED);
const background = Color(0xffEDF3FB);

• theme.dart에 TextStyle과 ColorScheme 정의

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:pathpal/colors.dart';

TextTheme appTextTheme() {
  return TextTheme(
    displayLarge: GoogleFonts.notoSansKr(
        fontSize: 94, 
        fontWeight: FontWeight.w300, 
        letterSpacing: -1.5
        ),
    displayMedium: GoogleFonts.notoSansKr(
        fontSize: 59,
        fontWeight: FontWeight.w300, 
        letterSpacing: -0.5
        ),
    displaySmall:GoogleFonts.notoSansKr(
      fontSize: 47, 
      fontWeight: FontWeight.w400
      ),
    headlineMedium: GoogleFonts.notoSansKr(
        fontSize: 33, 
        fontWeight: FontWeight.w400, 
        letterSpacing: 0.25
        ),
    headlineSmall:GoogleFonts.notoSansKr(
          fontSize: 24, 
          fontWeight: FontWeight.w400
          ),
    titleLarge: GoogleFonts.notoSansKr(
        fontSize: 20, 
        fontWeight: FontWeight.w500, 
        letterSpacing: 0.15
        ),
    titleMedium: GoogleFonts.notoSansKr(
        fontSize: 16, 
        fontWeight: FontWeight.w600,
        letterSpacing: 0.15
        ),
    titleSmall: GoogleFonts.notoSansKr(
        fontSize: 14, 
        fontWeight: FontWeight.w500, 
        letterSpacing: 0.1
        ),
    bodyLarge: GoogleFonts.notoSansKr(
        fontSize: 16, 
        fontWeight: FontWeight.w400, 
        letterSpacing: 0.5
        ),
    bodyMedium: GoogleFonts.notoSansKr(
        fontSize: 14, 
        fontWeight: FontWeight.w400, 
        letterSpacing: 0.25
        ),
    labelLarge: GoogleFonts.notoSansKr(
        fontSize: 14, 
        fontWeight: FontWeight.w500, 
        letterSpacing: 1.25
        ),
    bodySmall: GoogleFonts.notoSansKr(
        fontSize: 12, 
        fontWeight: FontWeight.w400,
        letterSpacing: 0.4
        ),
    labelSmall: GoogleFonts.notoSansKr(
        fontSize: 10, 
        fontWeight: FontWeight.w400,
        letterSpacing: 1.5
        ),
  );
}

ColorScheme appColorScheme() {
  return ColorScheme(
    brightness: Brightness.light,
    primary: mainAccentColor,
    onPrimary: mainAccentColor,
    secondary: subAccentColor,
    onSecondary: subAccentColor,
    background: background,
    onBackground: gray900,
    surface: Colors.white,
    onSurface: gray900,
    outline: gray200,
    error: red900,
    onError: red900,
  );

}

• main.dart에 Theme 적용

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    FlutterNativeSplash.remove();
    return MaterialApp(
        title: 'pathpal',
        theme: ThemeData(
          colorScheme: appColorScheme(), // 컬러 테마 적용
          textTheme: appTextTheme(), //폰트 테마 적용
          useMaterial3: true,
        ),
        home: CarMain() 
        );
  }
}