Flutter图标库插件la_icons的使用

Flutter图标库插件la_icons的使用

Line Awesome Icons 1.3.0 (by Icons8) 库用于Flutter

只是一组漂亮的图标供您使用

我真的很喜欢Material图标。但不知为何，我突然觉得厌倦了它们。于是我四处看了看，发现了一组由Icons8提供的精美图标集。而且最重要的是——免费！（查看Good Boy许可证）。

我开始在我的项目中使用这个库，感觉非常不错。于是我想：为什么不将其发布出来让其他人也能享受呢？毕竟，在整个过程中，我确实得到了许多人的帮助，他们并没有将这些图标据为己有。

所以，感谢Icons8。

提醒一下！

在收到一些建议并进一步阅读后，我决定重建line_icons库。虽然它仍然与原来的库密切相关，但la_icons是从零开始构建的。您可以根据自己的需求选择使用哪一个，但我建议在新项目中使用这个全新的la_icons库。

线条、简洁、图标

想象一下Windows 10风格和Awesome灵感的结合。好吧，别再做梦了！您可以在Android应用中使用大量精美的图标（尚未在iOS上测试，抱歉）。相比Material图标，我更喜欢这一套，并且我发现从Icons8找到所需的图标比在Material Icons页面更容易。

您可以在演示页面查看可用图标的视觉列表。

字体（v1.3.0）

您可以在以下位置找到Icons8发布的原始字体（版本1.3.0）：

特性

  • 样式：有三种不同的样式：品牌、常规和实心。图标分别以lab、lar和las前缀命名。这也有助于避免名称冲突，例如alternate-comment，对于常规和实心样式分别变为lar-alternate-comment和las-alternate-comment。

  • Flutter风格的prefixedCamelCase名称：用于Icon构造函数和getter，同时保留原始图标名称（prefixed-kebab-case）以访问IconData。

  • @staticIconProvider 符号，如Flutter文档中所建议。

  • 在LaIcons类中提供了一个静态属性iconMap，可以作为映射访问IconData。例如：Icon(LaIcons.iconMap['las-dog'])。

  • 提供了静态getter byName，可以根据传递的图标名称访问相关的IconData。例如：Icon(LaIcons.byName('las-desktop'))。

  • 提供了LaIcon（单数）类，与LaIcons（复数）一起使用，可以节省一些代码。例如：LaIcon.lasTablet()而不是Icon(LaIcons.lasTablet)。

  • 常量构造函数：const icon = const LaIcon.lasAlternateHeadphones(); 与 final icon = LaIcon.lasAlternateHeadphones();。

  • LaIcon构造函数参数与Icon相同，因此可以像自定义Icon实例一样自定义LaIcon实例。例如：Icon(LaIcons.lasWrench, color: Colors.red) 等同于 LaIcon.lasWrench(color: Colors.red)、Icon(LaIcons.lasWrench, color: Colors.red)、Icon(LaIcons.iconMap['las-wrench']) 或 Icon(LaIcons.getByName('las-wrench'))。

注意：由于字体是静态的，而不是可变的，因此fill、grade、opticalSize 和 weight 属性将不起作用。不过，shadows 属性是可用的。

让我们尝试一下

示例

您可以在GitHub上的example文件夹中找到一个完整的功能性示例：GitHub，您也可以在demo页面中查看其运行效果。

安装

在您的pubspec.yaml文件中包含la_icons：

dependencies:
  flutter:
    sdk: flutter
  la_icons: ^1.0.0

如果您的IDE未自动执行此操作，请手动运行以下命令：

flutter packages get

使用

在Flutter文件中导入包并选择合适的构造函数：

import 'package:la_icons/la_icons.dart';
...
const Icon _icon = LaIcon.larCodeFile();
...

或者使用Icon获取实际的图标小部件：

import 'package:la_icons/la_icons.dart';
...
Icon _icon = Icon(LaIcons.larCodeFile);
...

您也可以采用另一种方式：

import 'package:la_icons/la_icons.dart';
...
Icon _icon = Icon(LaIcons.iconMap['lar-code-file']);
...

或者使用getByName：

import 'package:la_icons/la_icons.dart';
...
Icon _icon = Icon(LaIcons.getByName('lar-code-file'));
...

示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: MyHomePage(title: 'Line Icons Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({required this.title});
  final String title;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              'Awesome Line Icons are great!',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            SizedBox(height: 48.0),
            // 使用LineIcon（无's'）以简洁方式返回Icon对象
            const LineIcon.lasLaptopCode(
              size: 48.0,
              color: Colors.red,
            ),
            Text('const LineIcon.lasLaptopCode(size: 48.0, color: Colors.red,)'),
            SizedBox(height: 24.0),
            // 使用LaIcons的标准方式：注入IconData到Icon对象
            const Icon(
              LaIcons.lasDesktop,
              size: 48.0,
              color: Colors.blue,
            ),
            Text('const Icon(LaIcons.lasDesktop, size: 48.0, color: Colors.blue,)'),
            SizedBox(height: 24.0),
            // 使用LaIcons的非标准方式：通过值映射传递IconData
            Icon(
              LaIcons.iconMap['las-mobile-phone'],
              size: 48.0,
              color: Colors.amber,
            ),
            Text('Icon(LaIcons.iconMap['las-mobile-phone'], size: 48.0, color: Colors.amber,)'),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


la_icons 是一个 Flutter 插件，提供了 Line Awesome 图标库的支持。Line Awesome 是一个基于 Font Awesome 的免费图标库，提供了丰富的矢量图标，适用于各种应用场景。使用 la_icons 插件，你可以在 Flutter 应用中轻松地使用这些图标。

以下是使用 la_icons 插件的步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 la_icons 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  la_icons: ^0.1.0  # 请查看最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 la_icons 包：

import 'package:la_icons/la_icons.dart';

3. 使用图标

你可以通过 LaIcons 类来访问各种 Line Awesome 图标。以下是一个简单的示例，展示了如何使用 LaIcons 中的图标：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('LaIcons Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(LaIcons.heart, size: 50, color: Colors.red),
              SizedBox(height: 20),
              Icon(LaIcons.star, size: 50, color: Colors.yellow),
              SizedBox(height: 20),
              Icon(LaIcons.camera, size: 50, color: Colors.blue),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部