Flutter字体管理插件 fontresoft 的使用

FontResoft 是一个全面的 Flutter 字体包，旨在为开发者提供多样化的精美字体，以构建视觉吸引力强且引人入胜的 Flutter 应用程序。通过提供多种现成的字体族和字重，FontResoft 简化了将自定义排版集成到 Flutter 项目中的过程。

目录

• 安装
• 使用方法
• 特性
• 示例
• 截图
• 贡献
• 许可证

安装

要在您的 Flutter 项目中使用 FontResoft，请在 pubspec.yaml 文件中添加以下内容：

dependencies:
  fontresoft: ^0.0.5

然后运行：

flutter pub get

使用方法

导入该包：

import 'package:fontresoft/fontresoft.dart';

以下是如何在 main.dart 文件中使用的示例：

ThemeData(
    useMaterial3: true,
    brightness: Brightness.light,
    colorSchemeSeed: Colors.purpleAccent,
    fontFamily: FontResoft.poppins,
    package: FontResoft.package,
    highlightColor: Colors.transparent,
    splashColor: Colors.transparent,
);

以下是 Dart 代码中如何使用的一些示例：

Text(
  'Sample Text',
  style: Font.sourceSans().copyWith(
    fontSize: 23,
    color: color.withOpacity(1),
  ),
);

Text(
  Font.sourceSans().getFontName,
  style: Font.sourceSans(
    style: TextStyle(
      fontSize: 23,
      color: color.withOpacity(1),
    ),
  ),
);

更多示例可参考 main.dart 文件。

完整示例 Demo

以下是一个完整的示例，展示了如何使用 FontResoft 在应用中显示不同的字体样式，并允许用户交互更改字体样式（如加粗、斜体）。

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:fontresoft/fontresoft.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        brightness: Brightness.dark,
        colorSchemeSeed: Colors.purpleAccent,
        fontFamily: FontResoft.poppins,
        package: FontResoft.package,
        highlightColor: Colors.transparent,
        splashColor: Colors.transparent,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<TextStyle> list = [
    Font.inconsolata(),
    Font.inter(),
    Font.lato(),
    Font.oswald(),
    Font.poppins(),
    Font.quicksand(),
    Font.robotoCondensed(),
    Font.shantellSans(),
    Font.sourceSans(),
    Font.sFProDisplay(),
    Font.sFProText(),
    Font.comfortaa(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('FontResoft Fonts'),
        backgroundColor: Colors.black87,
        centerTitle: true,
      ),
      body: Center(
        child: ListView.builder(
          itemCount: list.length,
          itemBuilder: (context, index) {
            var color = Color.fromRGBO(
              Random().nextInt(255),
              Random().nextInt(255),
              Random().nextInt(255),
              1,
            );
            return GestureDetector(
              onTap: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => SecondPage(font: list[index]),
                  ),
                );
              },
              child: Card(
                elevation: 0,
                color: color.withOpacity(0.3),
                margin: const EdgeInsets.all(16),
                child: SizedBox(
                  width: double.infinity,
                  height: 100,
                  child: Center(
                    child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
                      Text(
                        list[index].getFontName,
                        style: list[index].copyWith(
                          fontSize: 23,
                          color: color.withOpacity(1),
                        ),
                      ),
                      Text(
                        '${list[index].fontFamily}',
                        style: list[index].copyWith(
                          fontSize: 20,
                          color: color.withOpacity(0.5),
                          fontStyle: FontStyle.italic,
                        ),
                      ),
                      Text(
                        '$color',
                        style: list[index].copyWith(
                          fontSize: 16,
                          color: color.withOpacity(0.5),
                          fontStyle: FontStyle.italic,
                        ),
                      ),
                    ]),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatefulWidget {
  const SecondPage({super.key, required this.font});

  final TextStyle font;

  @override
  State<SecondPage> createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  static const String paragraph =
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '
      'Nullam vel quam ac elit consequat laoreet...'; // 省略部分文本

  late TextStyle style;

  @override
  void initState() {
    super.initState();
    style = widget.font.copyWith(fontSize: 14);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text(widget.font.getFontName, style: widget.font),
          backgroundColor: Colors.black87),
      body: SizedBox(
        child: Column(
          children: [
            Container(
              height: MediaQuery.of(context).size.height - 220,
              margin: const EdgeInsets.all(16),
              child: SingleChildScrollView(
                child: Text(paragraph, style: style),
              ),
            ),
            const Divider(color: Colors.white24),
            Expanded(
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    boldStyleButton(),
                    italicStyleButton(),
                    OutlinedButton(
                        onPressed: () => increaseFont(),
                        child: const Icon(Icons.plus_one)),
                    OutlinedButton(
                        onPressed: () => decreaseFont(),
                        child: const Icon(Icons.exposure_minus_1)),
                  ]),
            ),
          ],
        ),
      ),
    );
  }

  ButtonStyleButton boldStyleButton() =>
      style.fontWeight != FontWeight.bold
          ? OutlinedButton(
              onPressed: () => transformBold(),
              child: const Text('Bold'),
            )
          : FilledButton(
              onPressed: () => transformBold(),
              child: const Text('Bold'),
            );

  ButtonStyleButton italicStyleButton() =>
      style.fontStyle != FontStyle.italic
          ? OutlinedButton(
              onPressed: () => transformItalic(),
              child: const Text('Italic'),
            )
          : FilledButton(
              onPressed: () => transformItalic(),
              child: const Text('Italic'),
            );

  transformBold() {
    setState(() {
      style = style.fontWeight != FontWeight.bold
          ? style.copyWith(fontWeight: FontWeight.bold)
          : style.copyWith(
              fontWeight: FontWeight.normal,
            );
    });
  }

  transformItalic() {
    setState(() {
      style = style.fontStyle != FontStyle.italic
          ? style.copyWith(fontStyle: FontStyle.italic)
          : style.copyWith(
              fontStyle: FontStyle.normal,
            );
    });
  }

  increaseFont() {
    double size = style.fontSize!;
    setState(() {
      style = style.copyWith(fontSize: size + 1);
    });
  }

  decreaseFont() {
    double size = style.fontSize!;
    setState(() {
      style = style.copyWith(fontSize: size - 1);
    });
  }
}

特性

• 多样化的字体集合：FontResoft 提供丰富的字体族，包括 Inconsolata、Inter、Lato、Oswald、Poppins、Quicksand、Roboto Condensed、ShantellSans 和 SourceSansPro。
• 易于集成：通过简化实现过程，使开发者能够轻松访问并使用这些字体。
• 多种字重和样式：每个字体族都包含多个字重和样式，帮助开发者增强排版多样性。
• 本地字体加载：所有字体都在包内本地存储，确保一致性和性能。

示例

更多示例请参见 GitHub 上的完整示例。

截图

贡献

如果您有任何问题、功能请求或改进建议，请在 GitHub 仓库中打开 issue 或提交 pull request。

许可证

该项目根据 BSD 3-Clause 许可证进行许可。详情请参阅 LICENSE 文件。