Flutter自定义Logo显示插件 flutter_any_logo 的使用

简介

flutter_any_logo 是一个用于在Flutter项目中轻松显示各种行业相关Logo的插件。该插件提供了5个主要类别：Sports（体育）、Fashion（时尚）、Tech（科技）、Daily（日常）和Media（媒体），每个类别都扩展了相应的接口。这个插件对于需要展示行业相关图片的应用非常有用，例如Quiz应用、目录、电子商务应用、模板、网站等。

截图

Logos 1	Logos 2

安装

在 pubspec.yaml 文件中添加 flutter_any_logo 作为依赖：

dependencies:
  flutter_any_logo: <latest version>

然后，在终端运行 flutter pub get 来安装插件。

使用

首先，在 Dart 代码中导入 flutter_any_logo 包：

import 'package:flutter_any_logo/flutter_any_logo.dart';

现在可以使用提供的 AnyLogo 小部件在应用程序中显示Logo。例如，显示 Google Logo：

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(body: AnyLogo.tech.google.image()),
    );
  }
}

更多示例

以下是一个更复杂的示例，展示了如何在一个网格视图中显示多个类别的Logo：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: GridView.count(
            crossAxisCount: 5,
            children: [
              ...AnyLogo.cricket.values.map((e) => e.image()).toList(),
              ...AnyLogo.nba.values.map((e) => e.image()).toList(),
              ...AnyLogo.fashion.values.map((e) => e.image()).toList(),
              ...AnyLogo.uefa.values.map((e) => e.image()).toList(),
              ...AnyLogo.daily.values.map((e) => e.image()).toList(),
              ...AnyLogo.tech.values.map((e) => e.image()).toList(),
              ...AnyLogo.nfl.values.map((e) => e.image()).toList(), 
              ...AnyLogo.media.values.map((e) => e.image()).toList(),
              ...AnyLogo.auto.values.map((e) => e.image()).toList(),
              ...AnyLogo.coding.values.map((e) => e.image()).toList(),
            ],
          ),
        ),
      ),
    );
  }
}

变量

如果你想访问特定类型的Logo，可以使用静态方法：

// 单个资产
AnyLogo.daily.mcDonalds;

// 访问所有值
AnyLogo.nba.values;

// 获取图像
AnyLogo.uefa.manchesterUnited.image();

// 设置高度、宽度和其他属性
AnyLogo.nba.atlantaHawks.image(height: 30, width: 25, fit: BoxFit.contain);

// 你也可以直接传递资产图像而不调用 `.image()` 方法
Image(image: AssetImage(AnyLogo.nba.atlanta.path));

类别

以下是可用的类别：

// UEFA部分包含足球队 ⚽️
AnyLogo.uefa.acMilan;
AnyLogo.uefa.barcelona;
AnyLogo.uefa.realMadrid;

// Daily部分包含日常品牌食品/旅行/飞机/机构等 🍟
AnyLogo.daily.gillette;
AnyLogo.daily.nutella;
AnyLogo.daily.kellogs;
AnyLogo.daily.lufthansa;

// NFL部分包含NFL球队 🏈
AnyLogo.nfl.nflArizonaCardinals;
AnyLogo.nfl.nflBuffaloBills;

// Fashion部分包含服装/香水/奢侈品/手表 ⌚️
AnyLogo.fashion.louisVuitton;
AnyLogo.fashion.gucci;
AnyLogo.fashion.prada;

// NBA部分包含所有NBA球队 🏀
AnyLogo.nba.miamiHeat;
AnyLogo.nba.losAngelesClippers;
AnyLogo.nba.goldenStateWarriors;

// Tech部分包含所有品牌和技术公司 🕹️
AnyLogo.tech.playstation;
AnyLogo.tech.siemens;
AnyLogo.tech.visa;

// Media部分包含社交媒体和相关领域 🛜
AnyLogo.media.instagram;
AnyLogo.media.tiktok;
AnyLogo.media.facebook;

// Cricket部分包含板球相关Logo 🏏
AnyLogo.cricket.cscs;
AnyLogo.cricket.gurajatLions;
AnyLogo.cricket.mumbaiIndians;

// Car部分包含汽车品牌和型号 🏎️
AnyLogo.auto.bugatti;
AnyLogo.auto.bmw;
AnyLogo.auto.mercedesBenz;

/// Crypto部分包含加密货币相关的Logo 💰
AnyLogo.crypto.bitcoin;
AnyLogo.crypto.iota;
AnyLogo.crypto.cardano;

/// Badges部分包含徽章相关的Logo ⬇️
AnyLogo.badges.playstoreDownload;
AnyLogo.badges.appstoreDownload;
AnyLogo.badges.amazonDownload;

/// Coding部分包含编程和IDE相关的Logo 👨🏾‍💻
AnyLogo.coding.vsCode;
AnyLogo.coding.intellij;
AnyLogo.coding.vim;

警告

😊 新的Logo不断上传，如果您认为某个Logo应该包含在库中，请随时打开一个Pull Request来添加您的Logo。

测试策略

详细测试策略请参考 Test Strategy 部分。

贡献

欢迎对 flutter_any_logo 进行贡献！如果您发现了一个Bug或想要建议一个新的Logo，请在GitHub仓库上创建一个问题。如果您想为这个开源项目做出贡献，请遵循以下步骤。

步骤 1

为了对项目进行修改，您需要执行以下步骤：

1. Fork项目。
2. 找到要添加到项目的PNG文件，并将其添加到 assets/ 目录。
3. 如果添加了新的子目录，请更新 pubspec.yaml 文件。

步骤 2

将PNG文件添加到您的Forked仓库后，您需要安装依赖项并构建项目才能看到更改。

a) 打开项目

打开终端窗口并导航到项目目录。

b) 生成Logo

在Mac上运行：make deploy-mac 在Windows上运行：make deploy-windows

步骤 3

更新测试。请转到测试并确保添加测试。只需按照现有的测试模式即可。

步骤 4

确保您检出并创建分支，格式如下：

<issueNumber> feat: implement <logoName> to the project

#34 feat: implement `kodak` logo to the project.

许可证

flutter_any_logo 在 MIT License 下发布。