Flutter带图标文本按钮插件text_button_icon的使用

Flutter带图标文本按钮插件text_button_icon的使用

按钮带图标

本Flutter插件提供了一个带有图标的可自定义按钮。

特性

  • 可以创建带有自定义文本、图标、颜色、内边距、圆角和点击动画的按钮。
  • 支持onTap回调处理按钮点击事件。

开始使用

要使用此插件，请遵循以下步骤：

  1. 将插件添加到您的pubspec.yaml文件中：

    dependencies:
  text_button_icon: ^0.0.1

  2. 运行flutter pub get来安装插件。

  3. 在Dart代码中导入插件：

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

使用示例

为了创建一个带有TextButtonIcon的小部件的按钮，可以参考以下示例：

import 'package:flutter/material.dart';
import 'package:text_button_icon/text_button_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('TextButtonIcon示例'),
        ),
        body: Center(
          child: TextButtonIcon(
            onPressed: () {
              // 点击事件处理逻辑
              print("按钮被点击了！");
            },
            text: "点击我",
            icon: Icons.add,
            backgroundColor: Colors.blue,
            textColor: Colors.white,
            borderRadius: 8.0,
            padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


在 Flutter 中，text_button_icon 是一个可以让你在文本按钮中添加图标的插件。它结合了 TextButton 和 Icon 的功能，使得按钮既可以显示文本，也可以显示图标。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  text_button_icon: ^1.0.0  # 请检查最新版本

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

使用 TextButtonIcon

安装完插件后，你可以在代码中使用 TextButtonIcon 来创建一个带有图标的文本按钮。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextButtonIcon Example'),
        ),
        body: Center(
          child: TextButtonIcon(
            icon: Icon(Icons.favorite),
            label: Text('Like'),
            onPressed: () {
              print('Button Pressed');
            },
          ),
        ),
      ),
    );
  }
}

参数说明

  • icon: 图标组件，通常是 Icon 或 ImageIcon。
  • label: 文本组件，通常是 Text。
  • onPressed: 按钮点击时的回调函数。
  • style: 按钮的样式，类似于 TextButton.styleFrom 的参数。

自定义样式

你可以通过 style 参数来自定义按钮的样式。例如：

TextButtonIcon(
  icon: Icon(Icons.favorite, color: Colors.red),
  label: Text('Like', style: TextStyle(color: Colors.white)),
  onPressed: () {
    print('Button Pressed');
  },
  style: TextButton.styleFrom(
    backgroundColor: Colors.blue,
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
    ),
  ),
),
回到顶部