Flutter图标库插件uicons_bold

Flutter图标库插件uicons_bold_rounded的使用

Flutter图标库插件uicons_bold_rounded。

安装

import 'package:uicons_bold_rounded/uicons_bold_rounded.dart';

...

Icon(UIconsBR.home)
...

开发

构建字体

从UIcons下载SVG。
打开ICoMoon。
将字体命名为包名并启用创建dart类。
创建字体。
将字体和dart类复制到相应的包中。

许可证

MIT License

Copyright (c) 2022 RedLeaf Softs Pvt. Ltd.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

UIcons由Flaticon提供。

示例代码

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

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

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

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '粗体圆角UIcons - Flutter',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
        useMaterial3: true,
        iconTheme: const IconThemeData(color: Colors.deepPurple),
      ),
      home: const MyHomePage(title: '粗体圆角UIcons在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 UIconsBR().a,
    const UIconsBR().ad,
    const UIconsBR().add,
    const UIconsBR().add_document,
    const UIconsBR().add_folder,
    const UIconsBR().address_book,
    const UIconsBR().air_conditioner,
    const UIconsBR().air_freshener,
    const UIconsBR().alarm_clock,
    const UIconsBR().alarm_exclamation,
    const UIconsBR().alarm_plus,
    const UIconsBR().alarm_snooze,
    const UIconsBR().align_justify,
    const UIconsBR().align_left,
    const UIconsBR().ambulance,
    const UIconsBR().angle_circle_down,
    const UIconsBR().angle_circle_left,
    const UIconsBR().angle_circle_right,
    const UIconsBR().angle_circle_up,
    const UIconsBR().angle_double_left,
    const UIconsBR().angle_double_right,
    const UIconsBR().angle_double_small_down,
    const UIconsBR().angle_double_small_left,
    const UIconsBR().angle_double_small_right,
    const UIconsBR().angle_double_small_up,
    const UIconsBR().angle_down,
    const UIconsBR().angle_left,
    const UIconsBR().angle_right,
    const UIconsBR().angry,
    const UIconsBR().apps,
    const UIconsBR().b,
    const UIconsBR().baby_carriage,
    const UIconsBR().backpack,
    const UIconsBR().bacon,
    const UIconsBR().badge,
    const UIconsBR().badge_check,
    const UIconsBR().badge_dollar,
    const UIconsBR().badge_percent,
    const UIconsBR().badge_sheriff,
    const UIconsBR().bags_shopping,
    const UIconsBR().bahai,
    const UIconsBR().balloons,
    const UIconsBR().c,
    const UIconsBR().comment,
    const UIconsBR().cake_birthday,
    const UIconsBR().cake_wedding,
    const UIconsBR().calculator,
    const UIconsBR().calendar,
    const UIconsBR().calendar_check,
    const UIconsBR().calendar_clock,
    const UIconsBR().call_history,
    const UIconsBR().call_incoming,
    const UIconsBR().call_missed,
    const UIconsBR().call_outgoing,
    const UIconsBR().chair,
    const UIconsBR().d,
    const UIconsBR().dart,
    const UIconsBR().dashboard,
    const UIconsBR().data_transfer,
    const UIconsBR().database,
    const UIconsBR().delete,
    const UIconsBR().delete_document,
    const UIconsBR().delete_user,
    const UIconsBR().democrat,
    const UIconsBR().diamond,
    const UIconsBR().dice,
    const UIconsBR().dice_alt,
    const UIconsBR().dice_d10,
    const UIconsBR().diploma,
    const UIconsBR().e,
    const UIconsBR().envelope,
    const UIconsBR().e_learning,
    const UIconsBR().enter,
    const UIconsBR().earnings,
    const UIconsBR().eclipse,
    const UIconsBR().eclipse_alt,
    const UIconsBR().edit,
    const UIconsBR().edit_alt,
    const UIconsBR().egg,
    const UIconsBR().egg_fried,
    const UIconsBR().engine_warning,
    const UIconsBR().envelope_ban,
    const UIconsBR().envelope_bulk,
    const UIconsBR().envelope_download,
    const UIconsBR().envelope_marker,
    const UIconsBR().envelope_open,
    const UIconsBR().envelope_open_dollar,
    const UIconsBR().envelope_open_text,
    const UIconsBR().envelope_plus,
    const UIconsBR().euro,
    const UIconsBR().equality,
    const UIconsBR().exchange,
    const UIconsBR().exclamation,
    const UIconsBR().exit,
    const UIconsBR().expand,
    const UIconsBR().expand_arrows,
    const UIconsBR().eye,
    const UIconsBR().f,
    const UIconsBR().feather,
    const UIconsBR().ferris_wheel,
    const UIconsBR().field_hockey,
    const UIconsBR().fighter_jet,
    const UIconsBR().file,
    const UIconsBR().file_ai,
    const UIconsBR().file_chart_line,
    const UIconsBR().file_chart_pie,
    const UIconsBR().file_code,
    const UIconsBR().file_eps,
    const UIconsBR().file_invoice,
    const UIconsBR().file_invoice_dollar,
    const UIconsBR().file_psd,
    const UIconsBR().file_spreadsheet,
    const UIconsBR().file_video,
    const UIconsBR().fill,
    const UIconsBR().film,
    const UIconsBR().film_slash,
    const UIconsBR().filter,
    const UIconsBR().fingerprint,
    const UIconsBR().fish,
    const UIconsBR().flag,
    const UIconsBR().flame,
    const UIconsBR().flower,
    const UIconsBR().folder,
    const UIconsBR().folder_download,
    const UIconsBR().folder_minus,
    const UIconsBR().folder_times,
    const UIconsBR().folder_tree,
    const UIconsBR().folder_upload,
    const UIconsBR().folders,
    const UIconsBR().g,
    const UIconsBR().gallery,
    const UIconsBR().game_board_alt,
    const UIconsBR().gamepad,
    const UIconsBR().garage,
    const UIconsBR().garage_car,
    const UIconsBR().garage_open,
    const UIconsBR().garlic,
    const UIconsBR().gas_pump,
    const UIconsBR().gas_pump_alt,
    const UIconsBR().gas_pump_slash,
    const UIconsBR().gem,
    const UIconsBR().gif,
    const UIconsBR().gift,
    const UIconsBR().gift_card,
    const UIconsBR().gifts,
    const UIconsBR().gingerbread_man,
    const UIconsBR().glass,
    const UIconsBR().glass_cheers,
    const UIconsBR().glasses,
    const UIconsBR().globe,
    const UIconsBR().globe_alt,
    const UIconsBR().golf,
    const UIconsBR().golf_ball,
    const UIconsBR().golf_club,
    const UIconsBR().graduation_cap,
    const UIconsBR().grape,
    const UIconsBR().grid,
    const UIconsBR().grill,
    const UIconsBR().h,
    const UIconsBR().hamburger,
    const UIconsBR().hamburger_soda,
    const UIconsBR().hand,
    const UIconsBR().hand_holding_box,
    const UIconsBR().hand_holding_seeding,
    const UIconsBR().handshake,
    const UIconsBR().happy,
    const UIconsBR().hastag,
    const UIconsBR().hat_birthday,
    const UIconsBR().hat_chef,
    const UIconsBR().head_side_thinking,
    const UIconsBR().headphones,
    const UIconsBR().headset,
    const UIconsBR().heart,
    const UIconsBR().heart_arrow,
    const UIconsBR().heat,
    const UIconsBR().helicopter_side,
    const UIconsBR().highlighter,
    const UIconsBR().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: "粗体圆角")),
      ),
    );
  }
}

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_rounded的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

itying888 1楼•5 天前

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

当然，以下是如何在Flutter项目中使用uicons_bold_rounded图标库插件的示例代码。这个图标库提供了一套大胆且圆润的图标，非常适合用于各种UI设计。

首先，确保你已经在pubspec.yaml文件中添加了uicons_bold_rounded依赖：

dependencies:
  flutter:
    sdk: flutter
  uicons_bold_rounded: ^最新版本号  # 请替换为实际最新版本号

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

接下来，你可以在你的Flutter项目中使用这些图标。以下是一个简单的示例，展示如何在应用程序中使用这些图标：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('uicons_bold_rounded Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(
              UIcons.homeBoldRounded,
              size: 50,
              color: Colors.blue,
            ),
            SizedBox(height: 20),
            Icon(
              UIcons.searchBoldRounded,
              size: 50,
              color: Colors.green,
            ),
            SizedBox(height: 20),
            Icon(
              UIcons.settingsBoldRounded,
              size: 50,
              color: Colors.red,
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

导入uicons_bold_rounded包。
创建一个简单的Flutter应用程序。
在MyHomePage中，使用Column布局了三个图标：家（home）、搜索（search）和设置（settings），每个图标都使用了UIcons类中提供的相应图标，并设置了大小和颜色。

你可以根据需要替换这些图标，或者添加更多的图标到你的布局中。uicons_bold_rounded包提供了大量的图标供你选择，具体可以参考其官方文档或包内的示例。