Flutter扩展图标按钮插件extended_icon_button的使用

Flutter扩展图标按钮插件extended_icon_button的使用

社交媒体

Discord Instagram LinkedIn Twitter

Extended Icon Button

Extended Icon Button 插件允许你在 Flutter 应用中添加一个美观的图标按钮。

安装

  1. 在你的 pubspec.yaml 文件中添加最新版本的插件（并运行 dart pub get）：
dependencies:
  extended_icon_button: ^1.0.0
  1. 导入包并在你的 Flutter 应用中使用它：
import 'package:extended_icon_button/extended_icon_button';

示例

此插件提供了许多可以修改的属性：

  • ✅ 高度 (height)
  • ✅ 宽度 (width)
  • ✅ 标题 (text)
  • ✅ 标题样式 (titleStyle)
  • ✅ 图标 (icon)
  • ✅ 图标大小 (iconSize)
  • ✅ 图标颜色 (iconColor)
  • ✅ 按钮颜色 (buttonColor)
  • ✅ 悬停时的阴影 (hoverElevation)
  • ✅ 按钮渐变色 (gradientColors)

示例代码

// 创建一个带有自定义样式的按钮
ExtendeddIconButton(
      // 设置按钮高度为50
      height: 50,
      // 设置按钮宽度为最大值
      width: double.maxFinite,
      // 设置按钮标题为 "Details"
      text: "Details",
      // 设置标题字体大小为30
      titleStyle: TextStyle(fontSize: 30),
      // 设置文本颜色为黑色87%
      textColor: Colors.black87,
      // 设置图标为箭头前进图标
      icon: Icons.arrow_forward_sharp,
      // 设置图标颜色为黑色
      iconColor: Color.fromARGB(255, 0, 0, 0),
      // 设置按钮渐变色1
      gradientColor1: Color(0xFFB84D9B),
      // 设置按钮渐变色2
      gradientColor2: Color(0xFFA060B0),
      // 设置按钮渐变色3
      gradientColor3: Color(0xFF8E6EC0),
      // 设置悬停时的阴影值为20
      hoverElv: 20,
)

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

1 回复

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


extended_icon_button 是一个 Flutter 插件，它扩展了 Flutter 自带的 IconButton，提供了更多的自定义选项和功能。使用这个插件，你可以更灵活地创建图标按钮，并且可以轻松地添加文本、形状、颜色等自定义属性。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  extended_icon_button: ^0.1.0  # 请使用最新版本

然后运行 flutter pub get 来安装插件。

使用 ExtendedIconButton

ExtendedIconButton 提供了多个参数来自定义图标按钮的外观和行为。以下是一个简单的使用示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ExtendedIconButton Example'),
        ),
        body: Center(
          child: ExtendedIconButton(
            icon: Icon(Icons.favorite),
            label: Text('Like'),
            onPressed: () {
              print('Button Pressed!');
            },
            backgroundColor: Colors.red,
            iconColor: Colors.white,
            labelColor: Colors.white,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(20.0),
            ),
            padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
          ),
        ),
      ),
    );
  }
}

参数说明

  • icon: 按钮中的图标，通常是一个 Icon 对象。
  • label: 按钮中的文本，通常是一个 Text 对象。
  • onPressed: 按钮点击时的回调函数。
  • backgroundColor: 按钮的背景颜色。
  • iconColor: 图标的颜色。
  • labelColor: 文本的颜色。
  • shape: 按钮的形状，例如 RoundedRectangleBorder、CircleBorder 等。
  • padding: 按钮的内边距。

更多功能

ExtendedIconButton 还支持其他一些功能，例如：

  • 图标和文本的对齐方式：通过 iconAlignment 和 labelAlignment 参数可以控制图标和文本的对齐方式。
  • 禁用按钮：通过 enabled 参数可以禁用按钮。
  • 自定义大小：通过 size 参数可以自定义按钮的大小。

示例代码

ExtendedIconButton(
  icon: Icon(Icons.settings),
  label: Text('Settings'),
  onPressed: () {
    print('Settings Button Pressed!');
  },
  backgroundColor: Colors.blue,
  iconColor: Colors.white,
  labelColor: Colors.white,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
  padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
  iconAlignment: Alignment.centerLeft,
  labelAlignment: Alignment.centerRight,
  enabled: true,
  size: Size(200.0, 50.0),
)
回到顶部