Flutter Font 추가

godo·2022년 6월 4일
0

Flutter

목록 보기
12/18

assets/fonts 디렉토리 만들기

fonts 파일에 폰트 파일들 넣어주기

pubspec.yaml 파일에

 fonts:
    - family: OpenSans
      fonts:
        - asset: assets/fonts/OpenSans-Regular.ttf
        - asset: assets/fonts/OpenSans-Bold.ttf
          weight: 700
    - family: QuickSand
      fonts:
        - asset: assets/fonts/QuickSand-Regular.ttf
        - asset: assets/fonts/QuickSand-Bold.ttf
          weight: 700

이런식으로 코드 써주기
여기서 weight 는 폰트 가져올 때 문서 보고 넣어주기

main.dart

return MaterialApp(
      title: 'Personal Expenses',
      theme: ThemeData(
        primarySwatch: Colors.purple,  
        accentColor: Colors.amber,
        fontFamily: 'QuickSand',
      ), // 테마 주기

이런식으로 fontFamily 라는 옵션에 값 넣어주기

폰트 각각 넣어주기

title: Text('Personal Expenses', style: TextStyle(fontFamily: 'Open Sans'),),

이런 식으로 style 에서 TextStyle 인스턴스 만들어서 fontFamily 에 인자 넣어주기

전체에 폰트 설정 부여

main.dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Personal Expenses',
      theme: ThemeData(
          primarySwatch: Colors.purple,
          accentColor: Colors.amber,
          fontFamily: 'QuickSand',
          appBarTheme: AppBarTheme(
            textTheme: ThemeData.light().textTheme.copyWith(
                titleMedium: TextStyle(
                  fontFamily: 'OpenSans',
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                )),
          )), // 테마 주기
      home: MyHomePage(),
    );
  }
}

다른 파일

Text(transactions[index].title,
    style: Theme.of(context).textTheme.titleMedium,
),

각각 스타일

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Personal Expenses',
      theme: ThemeData(
          primarySwatch: Colors.purple,
          accentColor: Colors.amber,
          fontFamily: 'QuickSand',
          textTheme: ThemeData.light().textTheme.copyWith(
                  titleMedium: TextStyle(
                fontFamily: 'OpenSans',
                fontWeight: FontWeight.bold,
                fontSize: 18,
              )), // 카드에 따로 스타일 
          appBarTheme: AppBarTheme(
            textTheme: ThemeData.light().textTheme.copyWith(
                    titleMedium: TextStyle(
                  fontFamily: 'OpenSans',
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                )),
          )), // 테마 주기
      home: MyHomePage(),
    );
  }
}

이런 식으로 해주면
위에 다른 파일에 폰트 스타일을 다르게 줄 수 있다

profile
☀️☀️☀️

0개의 댓글