Flutter Vant UI Icons 图标集 #

Vant 组件库的 Flutter 端图标集。

安装图标集 #

添加 flutter_vantui_icons 到 pubspec.yaml。

dependencies:
  flutter_vantui_icons: ^0.0.1

用法 #

通过 Icon 绘制图标，支持多种样式配置。

以下是一个简单的示例，展示如何在 Flutter 中使用 flutter_vantui_icons 插件：

import 'package:flutter/material.dart';
import 'package:flutter_vantui_icons/flutter_vantui_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('Flutter Vant UI Icons 示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 使用默认大小和颜色的图标
              Icon(VanIcons.star_o),

              // 自定义颜色的图标
              Icon(VanIcons.star_o, color: Color(0xFFFF0000)),

              // 自定义大小和颜色的图标
              Icon(VanIcons.star_o, color: Color(0xFF00FF00), size: 30),

              // 全局图标风格配置
              IconTheme(
                data: IconThemeData.fallback().copyWith(size: 24, color: Colors.blue),
                child: Icon(VanIcons.home_o),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

yibo5220 1楼•3 天前

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

flutter_vantui_icons 是一个 Flutter 插件，提供了 Vant UI 风格的图标库。Vant UI 是一个轻量级的移动端组件库，广泛用于 Vue.js 项目中，而 flutter_vantui_icons 则是将 Vant UI 的图标引入到 Flutter 项目中。

安装

首先，你需要在 pubspec.yaml 文件中添加 flutter_vantui_icons 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_vantui_icons: ^0.0.1  # 请检查最新版本

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

使用

安装完成后，你可以在 Flutter 项目中使用 Vant UI 的图标。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Vant UI Icons Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Icon(FlutterVantUIIcons.home),  // 使用 Vant UI 的 home 图标
              SizedBox(height: 20),
              Icon(FlutterVantUIIcons.search),  // 使用 Vant UI 的 search 图标
              SizedBox(height: 20),
              Icon(FlutterVantUIIcons.cart),  // 使用 Vant UI 的 cart 图标
            ],
          ),
        ),
      ),
    );
  }
}

图标列表

flutter_vantui_icons 提供了大量的 Vant UI 图标，你可以在代码中通过 FlutterVantUIIcons 类来访问这些图标。以下是一些常用的图标示例：

FlutterVantUIIcons.home
FlutterVantUIIcons.search
FlutterVantUIIcons.cart
FlutterVantUIIcons.user
FlutterVantUIIcons.setting
FlutterVantUIIcons.arrow
FlutterVantUIIcons.plus
FlutterVantUIIcons.minus
FlutterVantUIIcons.close
FlutterVantUIIcons.check

自定义图标大小和颜色

你可以通过 Icon 组件的 size 和 color 属性来自定义图标的大小和颜色：

Icon(
  FlutterVantUIIcons.home,
  size: 40.0,
  color: Colors.blue,
)