✨中華フォント対応 - Ki-Kobayashi/flutter_wiki GitHub Wiki

🟩 方法2つ

  • flutter_localization を使う方法
  • google_fonts を使う方法

.

🟩 flutter_localization を使う方法（下記パッケージをインストール）

flutter_localization

🟡 使い方

参考：https://fukugyou-log.com/%E3%80%90flutter%E3%80%91%E6%BC%A2%E5%AD%97%E3%81%8C%E4%B8%AD%E8%8F%AF%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%97%E3%81%BE%E3%81%86%E5%95%8F%E9%A1%8C%E3%82%92/

🚨flutter_localizationではなく「flutter_localizations」の複数系を呼び出す

複数系の方をimportしないと、undifined　となり、Delegete系が呼び出せない

import 'package:flutter_localizations/flutter_localizations.dart';

@override
  Widget build(BuildContext context) {
    final goRouter = ref.watch(routerProvider);

    return MaterialApp.router(
      scaffoldMessengerKey: rootScaffoldMessengerKey,
      debugShowCheckedModeBanner: false,　// debugバナーを非表示
      // 👇以下から記述
      localizationsDelegates: const[
        GlobalCupertinoLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalMaterialLocalizations.delegate
      ],
      supportedLocales: const [
        Locale("ja", "JP"),
      ],

上記で日本語フォントになるとのこと

.

🟩 google_fonts を使う方法 （下記パッケージをインストール）

https://pub.dev/packages/google_fonts

.

🟩 使い方

🟡 アプリ全体、Widgetごとのフォントを変える

参考：https://www.memory-lovers.blog/entry/2023/09/18/104233

GoogleFonts.config.allowRuntimeFetching = kDebugMode;

@override
  Widget build(BuildContext context) {
    final goRouter = ref.watch(routerProvider);

    return MaterialApp.router(
      scaffoldMessengerKey: rootScaffoldMessengerKey,
      debugShowCheckedModeBanner: false,
      routerConfig: goRouter,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: ColorConstants.appRed,
        ),
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.white,
          shadowColor: Colors.transparent,
        ),
　　　　// 👇App全体の設定
        textTheme: GoogleFonts.notoSansJpTextTheme(Theme.of(context).textTheme),
        tabBarTheme: TabBarTheme(
          labelColor: ColorConstants.labelColor,
          dividerColor: ColorConstants.dividerColor,
          unselectedLabelColor: ColorConstants.unselectedLabelColor,
          indicatorColor: ColorConstants.indicatorColor,
　　　　　// 👇 ラベルテキストのフォントデザイン
          labelStyle: GoogleFonts.notoSansJp(
            fontWeight: FontWeight.w700,
          ),
　　　　　// 👇 選択されていないときのフォントデザイン
          unselectedLabelStyle: GoogleFonts.notoSansJp(
            fontWeight: FontWeight.w700,
          ),
        ),
        bottomSheetTheme:
            const BottomSheetThemeData(modalBackgroundColor: Colors.white),
　　　　　// 👇 画面遷移のアニメーションをiphoneに揃える
        pageTransitionsTheme: const PageTransitionsTheme(
          builders: <TargetPlatform, PageTransitionsBuilder>{
            TargetPlatform.android: CupertinoPageTransitionsBuilder(),
            TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
          },
        ),
        // 👇マテリアルテーマを有効にしたい場合は以下 
        useMaterial3: true,
      ),
      themeMode: ThemeMode.light,
    );
  }

　　

.

🟡とあるWidgetだけ、別フォントにしたい

TextWidgetなら、fontfamilyプロパティを使用する

Text(
  'xxxx',
  style: const TextStyle(
     fontFamily: 'SF Pro' 
  ),
)

　　

.

🟡リリースの時は、App内包（ダウンロード済）のフォントを使用する

基本、google_fontsは、ネット通信をしてフォント取得・表示をしている
不要なネット通信を減らすために、フォントデータはAppに内容されたものを使用したい。
ただし、開発中は様々なフォントを試したいニーズもあるので、開発中だけはネット通信を許可するようにする。

それが、下記の設定。（🚨併せて、Ａｐｐに内包するフォントをダウンロードし、格納しておく）

.

💎main.dart

FutureOr<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 👇下の設定を入れると、Debugの時だけ、存在しないフォントをネットワークアクセス取得する（リリース版は無効になる）
　// 🚨個の設定を入れる場合は、次項の設定　**必須**　
  GoogleFonts.config.allowRuntimeFetching = kDebugMode;

.

💎application.dart

@override
  Widget build(BuildContext context) {
    final goRouterConfig = ref.watch(routerProvider);

    return MaterialApp.router(
      debugShowCheckedModeBanner: false,
      scaffoldMessengerKey: rootScaffoldMessengerKey,
      routerConfig: goRouterConfig,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: ColorConstants.appRed,
        ),
        textTheme: GoogleFonts.notoSansJpTextTheme(Theme.of(context).textTheme),
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.white,
          shadowColor: Colors.transparent,
        ),
        tabBarTheme: TabBarTheme(
          labelColor: Colors.orange,
          dividerColor: Colors.darkGrey,
          unselectedLabelColor: Colors.darkGrey,
          indicatorColor: Colors.orange,
          labelStyle: GoogleFonts.notoSansJp(
            fontWeight: FontWeight.w500,
          ),
          unselectedLabelStyle: GoogleFonts.notoSansJp(
            fontWeight: FontWeight.w400,
          ),
        ),
        pageTransitionsTheme: const PageTransitionsTheme(
          builders: <TargetPlatform, PageTransitionsBuilder>{
            TargetPlatform.android: CupertinoPageTransitionsBuilder(),
            TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
          },
        ),
        bottomSheetTheme:
            const BottomSheetThemeData(modalBackgroundColor: Colors.white),
      ),
      themeMode: ThemeMode.light,
    );
  }

.

🟩 リリース時はassetsのフォントファイルを利用する

参考：https://www.memory-lovers.blog/entry/2023/09/18/104233

. google_fontsはネットワーク経由でフォントファイルを取得してくれる。　　 開発中はよいけど、本番時はアプリに含めてリリースしたい。　　

.　　 フォントファイルをassetsのgoogle_fontsというフォルダを用意しておくと、　　 自動的にそちらを使ってくれる機能があるらしい。　　

.　　 Bundling fonts when releasing | google_fonts | Flutter Package　 　

.

🟡やり方

  1. https://fonts.google.com/ からフォントをダウンロード
  2. zip　を展開して　static/配下　の　ttfファイル　をコピー
  3. assets/google_fonts/　フォルダを作成して、コピーした　ttfファイル　を配置
  4. pubspec.yaml　に　assets/google_fonts/　を追加
# assets/google_fontsの中身
assets/google_fonts/
├── NotoSansJP-Black.ttf
├── NotoSansJP-Bold.ttf
├── NotoSansJP-ExtraBold.ttf
├── NotoSansJP-ExtraLight.ttf
├── NotoSansJP-Light.ttf
├── NotoSansJP-Medium.ttf
├── NotoSansJP-Regular.ttf
├── NotoSansJP-SemiBold.ttf
└── NotoSansJP-Thin.ttf

.

### pubspec.yaml
# アセットとして認識されるようにフォルダを追加
assets:
  - assets/google_fonts/

🟩

🟡



.


🟩


🟡




.


🟩


🟡




.


🟩


🟡




.


              


              

                

                  

                    

                  

                

              

           
⚠️ **GitHub.com Fallback** ⚠️