Flutter图标获取插件xdg_icons的使用

发布于 1周前 作者 songsunli 来自 Flutter

Flutter图标获取插件xdg_icons的使用

XDG Icons简介

XDG Icons 是一个用于Flutter的插件,它允许开发者在应用程序中使用符合 XDG图标主题规范 的图标。该插件可以帮助您快速集成和显示各种标准的桌面图标,以提升应用的用户界面体验。

pub license: MPL CI codecov

使用方法

引入依赖

首先,在您的 pubspec.yaml 文件中添加 xdg_icons 作为依赖:

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

然后运行 flutter pub get 来安装这个包。

示例代码

下面是一个完整的示例代码,展示了如何使用 xdg_icons 插件来展示不同主题下的图标:

import 'package:flutter/material.dart';
import 'package:xdg_icons/xdg_icons.dart';
import 'package:yaru/yaru.dart';

const kThemes = [null, 'Yaru', 'Adwaita', 'HighContrast'];
const kIcons = [
  'application-x-executable',
  'avatar-default',
  'audio-headphones',
  'computer',
  'distributor-logo',
  'edit-copy',
  'edit-cut',
  'edit-paste',
  'emblem-favorite',
  'folder',
  'input-keyboard',
  'media-removable',
  'network-server',
  'user-trash',
  'zoom-in',
];

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

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

  @override
  Widget build(BuildContext context) {
    return YaruTheme(
      builder: (context, yaru, child) {
        return MaterialApp(
          theme: yaru.variant?.theme ?? yaruLight,
          darkTheme: yaru.variant?.darkTheme ?? yaruDark,
          home: const MyHomePage(),
        );
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('XDG icons')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(24),
        child: Table(
          defaultVerticalAlignment: TableCellVerticalAlignment.middle,
          children: [
            TableRow(
              children: [
                const SizedBox.shrink(),
                for (final theme in kThemes)
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      theme ?? 'Default',
                      textAlign: TextAlign.center,
                      style: Theme.of(context).textTheme.titleLarge,
                    ),
                  ),
              ],
            ),
            for (final icon in kIcons)
              TableRow(
                children: [
                  Text(icon, style: Theme.of(context).textTheme.bodySmall),
                  for (final theme in kThemes)
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: XdgIcon(name: icon, size: 48, theme: theme),
                    ),
                ],
              ),
          ],
        ),
      ),
    );
  }
}

关键点说明

  1. 引入必要的包:确保你已经导入了 xdg_iconsyaru 包。
  2. 定义图标和主题列表:这里我们定义了一些常见的图标名称以及想要测试的主题。
  3. 创建主应用类MyApp 类是应用程序的入口点,它设置了整体的主题风格。
  4. 构建主页布局MyHomePage 类负责构建页面内容,包括顶部栏(AppBar)和主体部分。
  5. 表格布局展示图标:通过 Table 组件构建了一个包含多个行与列的表格,每一行对应一个特定的图标,并且在同一行的不同列中展示了该图标在不同主题下的样子。

这样就可以在一个界面上同时看到多种主题下相同图标的样式对比了。希望这个例子能帮助你更好地理解和使用 xdg_icons 插件!


更多关于Flutter图标获取插件xdg_icons的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图标获取插件xdg_icons的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中,xdg_icons 并不是一个官方或者广泛认知的插件名称,用于获取系统图标。通常,在Linux桌面环境中,xdg-icon-resource 是用来管理图标的标准,但Flutter社区并没有直接以 xdg_icons 命名的插件。不过,如果你想在Flutter应用中获取和使用系统图标,可以通过一些其他方式实现,比如使用图标字体或者通过平台通道调用原生代码来获取系统图标。

这里,我将展示一个使用Flutter和平台通道来获取Linux系统图标的示例。这个示例不会直接使用 xdg_icons,但会展示如何通过原生代码获取图标并传递给Flutter。

步骤 1: 创建Flutter项目

首先,创建一个新的Flutter项目:

flutter create flutter_xdg_icons_example
cd flutter_xdg_icons_example

步骤 2: 添加平台通道代码

lib/main.dart 中设置平台通道:

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

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

class MyApp extends StatelessWidget {
  static const platform = MethodChannel('com.example.xdg_icons');

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('XDG Icons Example'),
        ),
        body: Center(
          child: FutureBuilder<String>(
            future: platform.invokeMethod('getIconPath', {'iconName': 'application-x-executable'}),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                if (snapshot.hasError) {
                  return Text('Error: ${snapshot.error}');
                } else {
                  String iconPath = snapshot.data!;
                  return Image.file(File(iconPath));
                }
              } else {
                return CircularProgressIndicator();
              }
            },
          ),
        ),
      ),
    );
  }
}

在Linux平台上实现平台通道(linux/main.cpp):

首先,确保你的Flutter项目已经启用了Linux支持。然后,在linux目录下创建一个或修改现有的main.cpp文件:

#include <flutter_linux/flutter_linux.h>
#include <gtk/gtk.h>
#include <giomm.h>
#include <glibmm.h>
#include <iostream>
#include <fstream>
#include <filesystem>

namespace {
class MyFlutterApp : public gtk::Application,
                     public FlutterLinuxPluginRegistrar {
 public:
  MyFlutterApp()
      : gtk::Application("com.example.xdg_icons_example"),
        registrar_(this) {}

  int on_activate() override {
    auto window = Gtk::make_managed<Gtk::Window>();
    auto flutter_window_controller =
        FlutterLinux::CreateWindow(registrar_);

    auto engine = flutter_window_controller->get_engine();
    auto channel = FlutterMethodChannel::Create(
        engine.get(), "com.example.xdg_icons", &registrar_);

    channel->SetMethodCallHandler(
        [this, flutter_window_controller](
            const auto& call, auto result) {
          HandleMethodCall(call, result, flutter_window_controller);
        });

    window->show_all_children();
    return 0;
  }

 private:
  void HandleMethodCall(
      const FlutterMethodCall<>& call,
      std::unique_ptr<FlutterMethodResult<>>& result,
      FlutterLinux::WindowController* flutter_window_controller) {
    if (call.method_name() == "getIconPath") {
      auto arguments = FlutterMethodCall<std::map<std::string, std::string>>::From(call);
      std::string icon_name = arguments->at("iconName");

      Glib::ustring icon_theme_path = Gio::IconTheme::get_default()->lookup_icon(icon_name, 48, Gio::IconLookupFlags::NO_SVG);
      if (!icon_theme_path.empty()) {
        result->Success(Glib::filename_to_utf8(icon_theme_path));
      } else {
        result->Error("ICON_NOT_FOUND", "Icon not found in theme");
      }
    } else {
      result->NotImplemented();
    }
  }

  FlutterLinuxPluginRegistrar registrar_;
};
}  // namespace

int main(int argc, char** argv) {
  MyFlutterApp app;
  return app.run(argc, argv);
}

注意:这个示例代码使用了giommglibmm库来访问GTK和GIO的功能。你可能需要在CMakeLists.txt中添加对这些库的依赖。

步骤 3: 配置CMakeLists.txt

确保你的CMakeLists.txt文件包含对GTK和GIO库的依赖:

cmake_minimum_required(VERSION 3.10)

project(flutter_xdg_icons_example LANGUAGES CXX)

set(CMAKE_CXX_STANDARD 14)
set(CMAKE_CXX_STANDARD_REQUIRED ON)

find_package(Flutter REQUIRED)
find_package(PkgConfig REQUIRED)
pkg_check_modules(GTK3 REQUIRED gtk+-3.0 gio-2.0)

include_directories(${GTK3_INCLUDE_DIRS})
link_directories(${GTK3_LIBRARY_DIRS})

add_executable(flutter_xdg_icons_example
  main.cpp
)

target_link_libraries(flutter_xdg_icons_example
  ${FLUTTER_LIBRARIES}
  ${GTK3_LIBRARIES}
  gio-2.0
)

target_include_directories(flutter_xdg_icons_example PRIVATE ${FLUTTER_INCLUDE_DIRS})

步骤 4: 运行项目

确保你的开发环境已经设置好GTK和GIO的开发库,然后运行Flutter项目:

flutter run -d linux

这个示例展示了如何通过平台通道在Flutter应用中调用Linux原生的代码来获取系统图标。虽然这不是直接使用xdg_icons插件,但它提供了一个可行的解决方案来获取和使用系统图标。

回到顶部