Flutter字体预览插件font_preview的使用

font_preview 是一个辅助包，用于检查、比较和预览在您的 Flutter 应用程序中使用的字体。

什么时候需要它？

• 当您想确保自定义字体已加载并正在使用时。
• 当您使用 google_fonts 包并希望确保所使用的字体已下载并正在使用时。

注意：font_preview 使用 BungeeShade-Regular 作为回退字体。如果您的字体未在文本中加载，它们将看起来像这样： 这样您可以轻松识别此问题。

• 当您只是想查看字体在不同字重和样式下的外观时。
• 当您想比较不同的字体时。
• 当您需要确保自定义字体的所有字重和样式都正确加载时。
• 当您想检查伪样式时。例如，Flutter 是否为 w700 字重使用伪粗体，或者是否使用了您指定的字体。

如何使用它？

首先，将其添加为 dev_dependency：

dev_dependencies:
  font_preview: $latest-version

运行以下代码。它会导航到一个新的屏幕以预览字体：

// 预览字体
FontPreview.previewFonts(
  context,
  previewText: 'Flutter is Great', // 预览文字
  fonts: [
    // 如果您在 assets 中有自定义字体，可以使用其字体族名称
    FontProvider.fromFontFamily('Ubuntu'),
  ],
);

您可以提供多种字体，并并排比较每种字体的字重和样式：

// 多字体比较
FontPreview.previewFonts(
  context,
  previewText: 'Flutter is Great',
  fonts: [
    FontProvider.fromFontFamily('Ubuntu'),

    // 如果您使用 google_fonts 包来加载字体，可以像这样提供字体进行预览
    FontProvider.fromBuilder(
      (fontSize, fontWeight, fontStyle) => GoogleFonts.raleway(
        fontSize: fontSize,
        fontStyle: fontStyle,
        fontWeight: fontWeight,
      ),
    ),

    FontProvider.fromBuilder(
      (fontSize, fontWeight, fontStyle) => GoogleFonts.roboto(
        fontSize: fontSize,
        fontStyle: fontStyle,
        fontWeight: fontWeight,
      ),
    ),
  ],
  fontStyles: [FontStyle.normal],
);

您还可以指定字体的样式、字重和大小以进行预览：

// 指定字体样式、字重和大小
FontPreview.previewFonts(
  context,
  previewText: 'Flutter is Great',
  fonts: [
    FontProvider.fromFontFamily('Ubuntu'),
  ],
  fontStyles: [FontStyle.normal],
  fontWeights: [FontWeight.w400, FontWeight.w700],
  previewSizes: [11.0, 12.0, 14.0, 16.0, 18.0, 22.0],
);

完整示例代码

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:font_preview/font_preview.dart';

void main() => runApp(const App());

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Font Preview',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
        // textTheme: GoogleFonts.ralewayTextTheme(),
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Font Preview Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                FontPreview.previewFonts(
                  context,
                  previewText: 'Flutter is Great',
                  fonts: [
                    FontProvider.fromBuilder(
                      (fontSize, fontWeight, fontStyle) => GoogleFonts.raleway(
                        fontSize: fontSize,
                        fontStyle: fontStyle,
                        fontWeight: fontWeight,
                      ),
                    ),
                    FontProvider.fromBuilder(
                      (fontSize, fontWeight, fontStyle) => GoogleFonts.roboto(
                        fontSize: fontSize,
                        fontStyle: fontStyle,
                        fontWeight: fontWeight,
                      ),
                    ),
                    FontProvider.fromFontFamily('Unknown Font'),
                  ],
                  fontStyles: [FontStyle.normal],
                );
              },
              child: Text('Compare Fonts'),
            ),
            ElevatedButton(
              onPressed: () {
                FontPreview.previewFonts(
                  context,
                  previewText: 'Flutter is Great',
                  fonts: [
                    FontProvider.fromBuilder(
                      (fontSize, fontWeight, fontStyle) => GoogleFonts.poppins(
                        fontSize: fontSize,
                        fontStyle: fontStyle,
                        fontWeight: fontWeight,
                      ),
                    ),
                  ],
                  fontStyles: [FontStyle.normal],
                );
              },
              child: Text('Preview Single Google Font (Poppins)'),
            ),
            ElevatedButton(
              onPressed: () {
                FontPreview.previewFonts(
                  context,
                  previewText: 'Flutter is Great',
                  fonts: [
                    FontProvider.fromFontFamily('Ubuntu'),
                  ],
                  fontStyles: [FontStyle.normal],
                  fontWeights: [FontWeight.w400, FontWeight.w700],
                  previewSizes: [11.0, 12.0, 14.0, 16.0, 18.0, 22.0],
                );
              },
              child: Text('Preview Single Custom Font (Ubuntu)'),
            ),
            ElevatedButton(
              onPressed: () {
                FontPreview.previewFonts(
                  context,
                  previewText: 'Google Font without all font style files - (Acme)',
                  fonts: [
                    FontProvider.fromBuilder(
                      (fontSize, fontWeight, fontStyle) => GoogleFonts.acme(
                        fontSize: fontSize,
                        fontStyle: fontStyle,
                        fontWeight: fontWeight,
                      ),
                    ),
                  ],
                  fontStyles: [FontStyle.normal],
                );
              },
              child: Text('Font without font files for different styles'),
            ),
          ],
        ),
      ),
    );
  }
}