[Flutter] Clone - 당근마켓4(theme)

이번에는 theme 에 대해서 알아보겠습니다.

개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1

 

 

폰트 적용 전후 화면은 아래와 같습니다.

 

 

 

pubspec.yaml - 도현체를 다움받아서 아래 위치에 복사해서 넣고 폰트정보를 설정한다

 

fonts:
  - family: DoHyeon
    fonts:
      - asset: assets/fonts/BMDOHYEON_ttf.ttf

 

 

./src/apple_app.dart - getRouter(), beamRouter() 설정은 동일하게 적용하면 된다

 

// beamer 라우팅시 설정방법
MaterialApp beamRouter() {
  return MaterialApp.router(
    debugShowCheckedModeBanner: false,
    title: 'Apple Market Demo',
    theme: ThemeData(
      primarySwatch: Colors.red, // 이걸 대표로 설정하면 기본 분위기가 유사하게 적용
      fontFamily: 'Dohyeon', // 배달의민족 도현체, 전체 폰트 적용, 전후 사진 차이 옵션
      hintColor: Colors.grey[350],
      textTheme: const TextTheme(
        headline3: TextStyle(
          fontFamily: 'Dohyeon', // 특정 스타일에만 적용
          fontWeight: FontWeight.bold,
          color: Colors.red,
        ),
        button: TextStyle(color: Colors.white),
        subtitle1: TextStyle(color: Colors.black87, fontSize: 15),
        subtitle2: TextStyle(color: Colors.grey, fontSize: 13),
        bodyText1: TextStyle(
            color: Colors.black87,
            fontSize: 12,
            fontWeight: FontWeight.normal),
        bodyText2: TextStyle(
            color: Colors.black54, fontSize: 12, fontWeight: FontWeight.w100),
      ),
      textButtonTheme: TextButtonThemeData(
        style: TextButton.styleFrom(
            backgroundColor: Colors.red,
            primary: Colors.white,
            minimumSize: const Size(10, 48)),
      ),
      appBarTheme: const AppBarTheme(
        backgroundColor: Colors.white,
        foregroundColor: Colors.black87,
        elevation: 2,
        titleTextStyle: TextStyle(color: Colors.black87),
        actionsIconTheme: IconThemeData(color: Colors.black87),
      ),
      bottomNavigationBarTheme: const BottomNavigationBarThemeData(
        selectedItemColor: Colors.black87,
        unselectedItemColor: Colors.black54,
      ),
    ),
    routeInformationParser: BeamerParser(),
    routerDelegate: _routerDelegate,
  );
}