Flutter图标库插件uicons_bold_straight的使用

Flutter图标库插件uicons_bold_straight的使用

封面

Flutter图标包 uicons_bold_straight。

安装

import 'package:uicons_bold_straight/uicons_bold_straight.dart';

...

Icon(UIconsBS.home)
...

开发

构建字体

  1. 从UIcons下载SVG。
  2. 打开Fontello。
  3. 将字体命名为包名并启用创建Dart类。
  4. 创建字体。
  5. 将字体和Dart类复制到相应的包中。

许可证

MIT 许可证

版权所有 (c) 2022 RedLeaf Softs Pvt. Ltd.

特此免费许可，任何获得该软件副本及关联文档文件（“软件”）的人，均可不受限制地处理该软件，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售该软件的副本，并允许他人向其提供该软件，但须受以下条件约束：

上述版权声明和本许可声明必须包含在所有副本或实质性部分中。

软件按“原样”提供，不附带任何明示或暗示的保证，包括但不限于适销性、特定用途适用性和非侵权性的保证。在任何情况下，作者或版权持有者均不对因该软件或与该软件相关的使用或其他行为引起的任何索赔、损害或其他责任负责。

UIcons由Flaticon提供。

示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bold Straight UIcons - Flutter',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
        useMaterial3: true,
        iconTheme: const IconThemeData(color: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'Bold Straight UIcons in Flutter'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<IconData> icons = [
    const UIconsBS().a,
    const UIconsBS().ad,
    const UIconsBS().add,
    const UIconsBS().add_document,
    const UIconsBS().add_folder,
    const UIconsBS().address_book,
    const UIconsBS().air_conditioner,
    const UIconsBS().air_freshener,
    const UIconsBS().alarm_clock,
    const UIconsBS().alarm_exclamation,
    const UIconsBS().alarm_plus,
    const UIconsBS().alarm_snooze,
    const UIconsBS().align_justify,
    const UIconsBS().align_left,
    const UIconsBS().ambulance,
    const UIconsBS().angle_circle_down,
    const UIconsBS().angle_circle_left,
    const UIconsBS().angle_circle_right,
    const UIconsBS().angle_circle_up,
    const UIconsBS().angle_double_left,
    const UIconsBS().angle_double_right,
    const UIconsBS().angle_double_small_down,
    const UIconsBS().angle_double_small_left,
    const UIconsBS().angle_double_small_right,
    const UIconsBS().angle_double_small_up,
    const UIconsBS().angle_down,
    const UIconsBS().angle_left,
    const UIconsBS().angle_right,
    const UIconsBS().angry,
    const UIconsBS().apps,
    const UIconsBS().b,
    const UIconsBS().baby_carriage,
    const UIconsBS().backpack,
    const UIconsBS().bacon,
    const UIconsBS().badge,
    const UIconsBS().badge_check,
    const UIconsBS().badge_dollar,
    const UIconsBS().badge_percent,
    const UIconsBS().badge_sheriff,
    const UIconsBS().bags_shopping,
    const UIconsBS().bahai,
    const UIconsBS().balloons,
    const UIconsBS().c,
    const UIconsBS().comment,
    const UIconsBS().cake_birthday,
    const UIconsBS().cake_wedding,
    const UIconsBS().calculator,
    const UIconsBS().calendar,
    const UIconsBS().calendar_check,
    const UIconsBS().calendar_clock,
    const UIconsBS().call_history,
    const UIconsBS().call_incoming,
    const UIconsBS().call_missed,
    const UIconsBS().call_outgoing,
    const UIconsBS().chair,
    const UIconsBS().d,
    const UIconsBS().dart,
    const UIconsBS().dashboard,
    const UIconsBS().data_transfer,
    const UIconsBS().database,
    const UIconsBS().delete,
    const UIconsBS().delete_document,
    const UIconsBS().delete_user,
    const UIconsBS().democrat,
    const UIconsBS().diamond,
    const UIconsBS().dice,
    const UIconsBS().dice_alt,
    const UIconsBS().dice_d10,
    const UIconsBS().diploma,
    const UIconsBS().e,
    const UIconsBS().envelope,
    const UIconsBS().e_learning,
    const UIconsBS().enter,
    const UIconsBS().earnings,
    const UIconsBS().eclipse,
    const UIconsBS().eclipse_alt,
    const UIconsBS().edit,
    const UIconsBS().edit_alt,
    const UIconsBS().egg,
    const UIconsBS().egg_fried,
    const UIconsBS().engine_warning,
    const UIconsBS().envelope_ban,
    const UIconsBS().envelope_bulk,
    const UIconsBS().envelope_download,
    const UIconsBS().envelope_marker,
    const UIconsBS().envelope_open,
    const UIconsBS().envelope_open_dollar,
    const UIconsBS().envelope_open_text,
    const UIconsBS().envelope_plus,
    const UIconsBS().euro,
    const UIconsBS().equality,
    const UIconsBS().exchange,
    const UIconsBS().exclamation,
    const UIconsBS().exit,
    const UIconsBS().expand,
    const UIconsBS().expand_arrows,
    const UIconsBS().eye,
    const UIconsBS().f,
    const UIconsBS().feather,
    const UIconsBS().ferris_wheel,
    const UIconsBS().field_hockey,
    const UIconsBS().fighter_jet,
    const UIconsBS().file,
    const UIconsBS().file_ai,
    const UIconsBS().file_chart_line,
    const UIconsBS().file_chart_pie,
    const UIconsBS().file_code,
    const UIconsBS().file_eps,
    const UIconsBS().file_invoice,
    const UIconsBS().file_invoice_dollar,
    const UIconsBS().file_psd,
    const UIconsBS().file_spreadsheet,
    const UIconsBS().file_video,
    const UIconsBS().fill,
    const UIconsBS().film,
    const UIconsBS().film_slash,
    const UIconsBS().filter,
    const UIconsBS().fingerprint,
    const UIconsBS().fish,
    const UIconsBS().flag,
    const UIconsBS().flame,
    const UIconsBS().flower,
    const UIconsBS().folder,
    const UIconsBS().folder_download,
    const UIconsBS().folder_minus,
    const UIconsBS().folder_times,
    const UIconsBS().folder_tree,
    const UIconsBS().folder_upload,
    const UIconsBS().folders,
    const UIconsBS().g,
    const UIconsBS().gallery,
    const UIconsBS().game_board_alt,
    const UIconsBS().gamepad,
    const UIconsBS().garage,
    const UIconsBS().garage_car,
    const UIconsBS().garage_open,
    const UIconsBS().garlic,
    const UIconsBS().gas_pump,
    const UIconsBS().gas_pump_alt,
    const UIconsBS().gas_pump_slash,
    const UIconsBS().gem,
    const UIconsBS().gif,
    const UIconsBS().gift,
    const UIconsBS().gift_card,
    const UIconsBS().gifts,
    const UIconsBS().gingerbread_man,
    const UIconsBS().glass,
    const UIconsBS().glass_cheers,
    const UIconsBS().glasses,
    const UIconsBS().globe,
    const UIconsBS().globe_alt,
    const UIconsBS().golf,
    const UIconsBS().golf_ball,
    const UIconsBS().golf_club,
    const UIconsBS().graduation_cap,
    const UIconsBS().grape,
    const UIconsBS().grid,
    const UIconsBS().grill,
    const UIconsBS().h,
    const UIconsBS().hamburger,
    const UIconsBS().hamburger_soda,
    const UIconsBS().hand,
    const UIconsBS().hand_holding_box,
    const UIconsBS().hand_holding_heart,
    const UIconsBS().handshake,
    const UIconsBS().happy,
    const UIconsBS().hastag,
    const UIconsBS().hat_birthday,
    const UIconsBS().hat_chef,
    const UIconsBS().head_side_thinking,
    const UIconsBS().headphones,
    const UIconsBS().headset,
    const UIconsBS().heart,
    const UIconsBS().heart_arrow,
    const UIconsBS().heat,
    const UIconsBS().helicopter_side,
    const UIconsBS().highlighter,
    const UIconsBS().i,
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Container(
            padding: const EdgeInsets.all(8.0),
            child: IconsCard(icons: icons, category: "Bold Rounded")),
      ),
    );
  }
}

class IconsCard extends StatelessWidget {
  final List<IconData> icons;
  final String category;

  const IconsCard({super.key, required this.icons, required this.category});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Card(
      elevation: 8,
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Wrap(
          runSpacing: 16,
          spacing: 16,
          children: iconsList(),
        ),
      ),
    );
  }

  List<Widget> iconsList() {
    return icons.map<Widget>((element) {
      return Icon(element);
    }).toList();
  }
}

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

1 回复

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


uicons_bold_straight 是一个 Flutter 插件，提供了丰富的图标集合，这些图标具有粗体（Bold）和直线（Straight）的设计风格。使用这个插件可以方便地在 Flutter 应用中添加高质量的图标。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  uicons_bold_straight: ^1.0.0  # 请使用最新版本

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

使用图标

安装好插件后，你可以在代码中导入并使用 uicons_bold_straight 提供的图标。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('UIcons Bold Straight Example'),
        ),
        body: Center(
          child: Icon(UIconsBoldStraight.heart),  // 使用 heart 图标
        ),
      ),
    );
  }
}

图标名称

uicons_bold_straight 提供了大量的图标，你可以通过 UIconsBoldStraight 类来访问这些图标。图标的名称通常是描述性的，例如 heart, star, home 等。

自定义图标大小和颜色

你可以像使用其他 Flutter 图标一样，自定义 uicons_bold_straight 图标的大小和颜色：

Icon(
  UIconsBoldStraight.heart,
  size: 48.0,  // 设置图标大小
  color: Colors.red,  // 设置图标颜色
);
回到顶部