Flutter - font와 label 스타일 변경하기

색상을 변경하기 위해서 디자이너에게 글자와 관련된 디자인을 받아야 합니다.

Flutter의 ThemeData 는 3개의 텍스트 테마를 제공합니다.

각각의 텍스트 테마는 headline 과 title 같이 텍스트 스타일의 컬렉션입니다.

Customize the text theme

프로젝트 안에 폰트를 넣기 위해서, pubspec.yaml 파일에 아래와 같이 코드를 추가해 줍니다.

flutter:
  fonts:
  - family: Rubik
    fonts:
    - asset: fonts/Rubik-Regular.ttf
    - asset: fonts/Rubik-Medium.ttf
      weight: 500

이제 Rubik 폰트를 사용할 수 있습니다. Flutter 프로젝트에 적용해봅시다.

TextTheme _buildShrineTextTheme(TextTheme base) {
  return base.copyWith(
    headline: base.headline.copyWith(
      fontWeight: FontWeight.w500,
    ),
    title: base.title.copyWith(
        fontSize: 18.0
    ),
    caption: base.caption.copyWith(
      fontWeight: FontWeight.w400,
      fontSize: 14.0,
    ),
  ).apply(
    fontFamily: 'Rubik',
    displayColor: kShrineBrown900,
    bodyColor: kShrineBrown900,
  );
}

TextTheme을 사용하여 headline, title, caption 를 변경합니다.
copyWith() 에 지정된 headline, title, caption 값에만 fontFamily, color 값이 적용됩니다.
각 위젯에서 사용하는 변수들의 정보를 많이 알아야 다양하게 활용할 수 있을 것 같습니다.

import 'package:flutter/material.dart';

import 'home.dart';
import 'login.dart';
import 'color.dart';

class ShrineApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shrine',
      home: HomePage(),
      initialRoute: '/login',
      onGenerateRoute: _getRoute,
      theme: _kShrineTheme,
    );
  }

  Route<dynamic> _getRoute(RouteSettings settings) {
    if (settings.name != '/login') {
      return null;
    }

    return MaterialPageRoute<void>(
      settings: settings,
      builder: (BuildContext context) => LoginPage(),
      fullscreenDialog: true,
    );
  }
}

final ThemeData _kShrineTheme = _buildShrineTheme();

ThemeData _buildShrineTheme() {
  final ThemeData base = ThemeData.light();
  return base.copyWith(
    accentColor: kShrineBrown900,
    primaryColor: kShrinePink100,
    buttonTheme: base.buttonTheme.copyWith(
      buttonColor: kShrinePink100,
      textTheme: ButtonTextTheme.normal,
    ),
    scaffoldBackgroundColor: kShrineBackgroundWhite,
    cardColor: kShrineBackgroundWhite,
    textSelectionColor: kShrinePink100,
    errorColor: kShrineErrorRed,

    textTheme: _buildShrineTextTheme(base.textTheme),
    primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme),
    accentTextTheme: _buildShrineTextTheme(base.accentTextTheme),

    primaryIconTheme: base.iconTheme.copyWith(
        color: kShrineBrown900
    ),
    // TODO: Decorate the inputs (103)
  );
}

TextTheme _buildShrineTextTheme(TextTheme base) {
  return base.copyWith(
    headline: base.headline.copyWith(
      fontWeight: FontWeight.w500,
    ),
    title: base.title.copyWith(
        fontSize: 18.0
    ),
    caption: base.caption.copyWith(
      fontWeight: FontWeight.w400,
      fontSize: 14.0,
    ),
  ).apply(
    fontFamily: 'Rubik',
    displayColor: kShrineBrown900,
    bodyColor: kShrineBrown900,
  );
}