Flutter国旗图标插件world_flags的使用

简介

world_flags 是一个用于Flutter应用中的国旗图标插件。它提供了250多个国家的小型和简化国旗图标，并且超过三分之二的国旗可以用于全尺寸展示。每个国旗都是基于矢量的 CustomPainter，确保了高质量、可缩放和美观的结果。

特点

• 完全可定制：调整任何国旗的形状、大小、装饰、宽高比等以适应你的UI需求。
• 高效：不使用图像、SVG、字体或其他类型的资源，保持应用程序轻量化。
• 灵活：声明式方法允许国旗具有不同的形状和宽高比。
• 高性能：优化的 CustomPainters 确保在所有设备上平滑渲染。
• 易于使用：简化的API，添加国旗所需的代码最少。
• 纯Dart：这些是基于代码的国旗，开发人员可以轻松访问和操作国旗颜色、宽高比和其他属性。

使用步骤

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 world_flags 作为依赖：

dependencies:
  world_flags: any

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

2. 示例代码

下面是一个完整的示例演示如何使用 world_flags 插件来显示各国国旗。

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

void main() => runApp(
      MaterialApp(
        home: const Main(),
        theme: ThemeData(
          /// 提供国旗装饰全局配置。
          extensions: const [
            FlagThemeData(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(4)),
              ),
            ),
          ],
        ),
      ),
    );

class Main extends StatefulWidget {
  const Main({super.key});

  @override
  State<Main> createState() => _MainState();
}

class _MainState extends State<Main> {
  static const size = kMinInteractiveDimension / 2;
  static const countries = WorldCountry.list;

  final _aspectRatio = ValueNotifier(FlagConstants.defaultAspectRatio);

  @override
  void dispose() {
    _aspectRatio.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => ColoredBox(
        color: Theme.of(context).scaffoldBackgroundColor,
        child: SafeArea(
          minimum: const EdgeInsets.all(size / 2),
          child: ValueListenableBuilder(
            valueListenable: _aspectRatio,
            builder: (_, aspectRatio, __) => Scaffold(
              body: ListView.builder(
                itemBuilder: (_, i) => ListTile(
                  title: Text(countries[i].internationalName),
                  trailing: CountryFlag.simplified(
                    countries[i],
                    height: size,
                    aspectRatio: aspectRatio,
                  ),
                ),
                itemCount: countries.length,
              ),
              bottomNavigationBar: SizedBox(
                height: size * 2,
                child: Slider(
                  value: aspectRatio,
                  onChanged: (newRatio) => _aspectRatio.value = newRatio,
                  min: FlagConstants.minAspectRatio,
                  max: FlagConstants.maxAspectRatio,
                ),
              ),
            ),
          ),
        ),
      );
}

3. 详细说明

• WorldCountry: 每个国旗都需要一个 WorldCountry 实例。你可以通过工厂方法创建实例，或者直接选择特定国家（例如 const CountryDeu()）。
• CountryFlag.simplified: 这是一个简化版的国旗组件，适用于小尺寸展示。你也可以使用 CountryFlag.full 来展示全尺寸国旗。
• FlagThemeData: 全局配置国旗的装饰样式，如边框圆角等。

更多信息

• API 文档
• GitHub 仓库

如果你有任何问题或建议，请在GitHub仓库中提交issue或PR。喜欢这个包的话，请给它一颗星！

FAQ

• 为什么选择这个包？
  • 基于Widget的国旗，没有使用重型SVG或其他资源，所有国旗都是声明式风格优化的 CustomPainters。
  • 可以自定义国旗，提供多种类和简单API。
  • 包含最新的国旗设计，及时更新。
  • 使用密封类提供数据，支持创建自己的实例并进行扩展。

希望这个指南对你使用 world_flags 插件有所帮助！