Flutter图标插件line_icons的使用

LineIcons 2.0.3

LineIcons 是一组美丽的图标，适用于Flutter项目。它基于Icons8提供的图标集，并且是免费使用的（遵循Good Boy Licence）。以下是关于如何在Flutter中使用line_icons插件的详细介绍。

Null Safety

从版本2.0.0开始，LineIcons将支持null-safety，这意味着它遵循Dart团队对于空安全性的建议。确保你的Flutter SDK版本>=2.12.0以使用此功能。

Features

• Null-safe package：SDK >= 2.12.0
• Const constructors：如const icon = const LineIcon.tablet();对比final icon = LineIcon.tablet()
• Flutterish icon names：采用驼峰命名法而非下划线命名
• values属性：通过LineIcons.values['code']访问IconData作为map
• byName getter：通过传递参数名称获取相关的IconData，例如Icon(LineIcons.byName('desktop'))
• LineIcon类：简化代码使用，如LineIcon.tablet()替代Icon(LineIcons.tablet)
• 相同的构造函数参数：与Icon一致，允许你以相同的方式自定义LineIcon实例

Warning

请注意，在某些情况下，图标的名称可能与Icons8上的不完全匹配；例如，500px变成了px500。此外，请注意版本2.0.0及以上将是null-safe的。

Documentation

• Line Awesome font by Icons8
• Converting icon fonts into Flutter classes
• Dart/Flutter publishing packages

使用指南

安装

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

dependencies:
  flutter:
    sdk: flutter
  line_icons: ^2.0.2

然后运行命令来安装依赖包：

flutter packages get

使用方法

导入包

import 'package:line_icons/line_icon.dart';
import 'package:line_icons/line_icons.dart';

创建图标

你可以选择几种不同的方式来创建图标：

1. 直接使用Icon：

   Icon _icon = Icon(LineIcons.code);
   

2. 使用LineIcon类（更简洁）：

   const Icon _icon = const LineIcon.code();
   

3. 通过values属性：

   Icon _icon = Icon(LineIcons.values['code']);
   

4. 使用byName方法：

   Icon _icon = Icon(LineIcons.byName('code'));
   

示例代码

以下是一个完整的示例程序，展示了如何在Flutter应用中使用line_icons：

import 'package:flutter/material.dart';
import 'package:line_icons/line_icon.dart';
import 'package:line_icons/line_icons.dart';

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

class MyApp extends StatelessWidget {
  @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
  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,
            ),
            Text(
              'Version 2.0.2 constructors are const now!',
              style: Theme.of(context).textTheme.headlineSmall,
            ),
            SizedBox(height: 48.0),
            // 使用LineIcon (no 's') 简洁表示。返回一个Icon对象
            const LineIcon.tablet(
              size: 48.0,
              color: Colors.red,
            ),
            Text(
              'const LineIcon.tablet(size: 48.0, color: Colors.red,)',
            ),
            SizedBox(height: 24.0),
            // 标准方式使用LineIcons：将IconData注入到Icon对象中
            const Icon(
              LineIcons.desktop,
              size: 48.0,
              color: Colors.blue,
            ),
            Text(
              'const Icon(LineIcons.desktop, size: 48.0, color: Colors.blue,)',
            ),
            SizedBox(height: 24.0),
            // 通过values map传递IconData
            Icon(
              LineIcons.values['mobilePhone'],
              size: 48.0,
              color: Colors.amber,
            ),
            Text(
              'Icon(LineIcons.values[\'mobilePhone\'], size: 48.0, color: Colors.amber,)',
            ),
          ],
        ),
      ),
    );
  }
}

这个例子展示了如何在Flutter应用程序中使用LineIcons的不同方式，包括直接使用Icon、使用LineIcon类、通过values属性以及使用byName方法。希望这能帮助你在自己的项目中更好地利用这些图标！