Flutter字体查找插件flutter_font_finder的使用

Flutter字体查找插件flutter_font_finder的使用

一个帮助你在Flutter应用中找到所需字体的工具。

特性

  • 支持迭代过程，不断筛选你最喜欢的字体列表，直到找到合适的字体。
  • 可以喜欢或不喜欢当前列表中的字体。
  • 将喜欢的字体保存为列表，并进一步筛选该列表并再次保存……重复上述步骤。
  • 在不同列表之间切换时，状态会被保存（只要应用不被关闭）。
  • 可以导出字体列表为JSON格式，以便你的开发者或团队成员可以导入该列表（导入功能尚未实现）。

开始使用

查看示例代码以了解如何在实际项目中使用此插件。

在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter_riverpod: ^2.3.2
  flutter_font_finder: ^0.0.1

为了初始化Riverpod，你需要将主小部件包装在一个ProviderScope小部件中。

void main() {
  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

接下来，在MaterialApp小部件下，你需要观察currentFontProvider，该提供者通过import 'package:flutter_font_finder/flutter_font_finder.dart';导入。

MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.blue,
    textTheme: ref.watch(currentFontProvider),
  )

最后，你需要向你的应用添加一个FontFinder小部件。这个小部件允许你搜索字体并选择你想要使用的字体。这里有一个示例：

Scaffold(
  appBar: AppBar(
    title: const FontSel(),
    toolbarHeight: 125,
  ),
)

完整示例代码

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_font_finder/flutter_font_finder.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

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

  [@override](/user/override)
  Widget build(BuildContext context, WidgetRef ref) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        textTheme: ref.watch(currentFontProvider),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const FontSel(),
        toolbarHeight: 125,
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
            style: Theme.of(context).textTheme.headlineSmall,
          ),
        ),
      ),
    );
  }
}

更多关于Flutter字体查找插件flutter_font_finder的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter字体查找插件flutter_font_finder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter项目中使用flutter_font_finder插件的示例代码。flutter_font_finder插件允许你在应用中动态查找和显示可用的字体。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加flutter_font_finder的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_font_finder: ^latest_version  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

2. 导入插件

在你的Dart文件中导入flutter_font_finder插件：

import 'package:flutter/material.dart';
import 'package:flutter_font_finder/flutter_font_finder.dart';

3. 使用插件

下面是一个完整的示例，展示如何使用flutter_font_finder来列出和显示可用的字体：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Font Finder Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FontFinderScreen(),
    );
  }
}

class FontFinderScreen extends StatefulWidget {
  @override
  _FontFinderScreenState createState() => _FontFinderScreenState();
}

class _FontFinderScreenState extends State<FontFinderScreen> {
  List<String> _fontNames = [];

  @override
  void initState() {
    super.initState();
    _loadFonts();
  }

  Future<void> _loadFonts() async {
    List<String> fonts = await FlutterFontFinder.listFonts();
    setState(() {
      _fontNames = fonts;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Font Finder Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: _fontNames.isEmpty
            ? Center(child: CircularProgressIndicator())
            : ListView.builder(
                itemCount: _fontNames.length,
                itemBuilder: (context, index) {
                  String fontName = _fontNames[index];
                  return Card(
                    child: ListTile(
                      title: Text(
                        fontName,
                        style: TextStyle(fontFamily: fontName),
                      ),
                      onTap: () {
                        // 在这里可以添加点击字体的处理逻辑，比如显示更多信息
                        ScaffoldMessenger.of(context).showSnackBar(
                          SnackBar(content: Text('You selected: $fontName')),
                        );
                      },
                    ),
                  );
                },
              ),
      ),
    );
  }
}

代码解释

  1. 依赖添加和导入：在pubspec.yaml中添加依赖，并在Dart文件中导入。
  2. 主应用入口：MyApp是应用的入口，定义了基本的Material应用结构。
  3. 字体查找屏幕：FontFinderScreen是一个有状态的Widget，用于显示可用的字体列表。
  4. 加载字体：在initState方法中调用_loadFonts函数，该函数使用FlutterFontFinder.listFonts()异步获取所有可用的字体名称，并将结果保存在状态中。
  5. 构建UI：在build方法中，根据字体名称列表构建UI。如果字体列表为空，则显示一个进度指示器；否则，使用ListView.builder构建字体列表。每个字体项都是一个Card，包含字体名称，并且点击时会显示一个SnackBar。

通过上述代码，你可以在Flutter应用中动态列出和显示所有可用的字体。希望这个示例对你有帮助！

回到顶部