Flutter圆角图标插件round_icon的使用

Flutter圆角图标插件round_icon的使用

banner

安装

  1. 添加依赖到 pubspec.yaml

    dependencies:
    round_icon:
        git:
            url: https://github.com/teixeirazeus/round_icon

  2. 运行 pub get

    flutter pub get

  3. 导入包

    import 'package:round_icon/round_icon.dart';

使用

RoundIcon 是一个具有圆形背景的图标小部件。你可以设置图标的类型、背景颜色和图标颜色。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: RoundIcon(
              icon: Icons.person, // 设置图标类型
              backgroundColor: Colors.grey, // 设置背景颜色
              iconColor: Colors.black), // 设置图标颜色
        ),
      ),
    );
  }
}

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

1 回复

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


round_icon 是一个用于在 Flutter 中创建圆角图标的插件。它允许你轻松地创建带有圆角背景的图标，类似于 Material Design 中的圆形图标按钮。以下是使用 round_icon 插件的步骤：

1. 添加依赖

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

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

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

2. 导入包

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

import 'package:round_icon/round_icon.dart';

3. 使用 RoundIcon 组件

RoundIcon 组件可以像普通的 Icon 组件一样使用，但它会为图标添加一个圆角背景。

RoundIcon(
  icon: Icons.favorite,
  backgroundColor: Colors.red,
  iconColor: Colors.white,
  radius: 20.0,
)

参数说明：

  • icon：要显示的图标，使用 Icons 类中的图标。
  • backgroundColor：图标的背景颜色。
  • iconColor：图标的颜色。
  • radius：圆角的半径，控制圆角的大小。
  • onPressed：点击图标的回调函数（可选）。

4. 完整示例

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

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('RoundIcon Example'),
        ),
        body: Center(
          child: RoundIcon(
            icon: Icons.favorite,
            backgroundColor: Colors.red,
            iconColor: Colors.white,
            radius: 20.0,
            onPressed: () {
              print('Icon pressed!');
            },
          ),
        ),
      ),
    );
  }
}
回到顶部