Flutter闪耀按钮插件shiny_button的使用

发布于 1周前 作者 yuanlaile 来自 Flutter

Flutter闪耀按钮插件shiny_button的使用

shiny_button 是一个可定制的 Flutter 包，用于创建带有闪亮效果的美丽动画按钮。非常适合为您的 Flutter 应用添加一些优雅和互动性。

特性 🎨

  • 可自定义的闪亮动画
  • 可选图标，位置灵活
  • 自定义渐变、文本样式和形状
  • 支持加载状态和禁用状态
  • 支持提示工具
  • 按下时有涟漪效果

开始使用 🚀

要使用这个包，在您的 pubspec.yaml 文件中添加 shiny_button 作为依赖项：

dependencies:
  flutter:
    sdk: flutter
  shiny_button:
    path: ../

使用方法 📖

导入包

在 Dart 文件中导入 shiny_button：

import 'package:shiny_button/shiny_button.dart';
基本使用
ShinyButton(
  onPressed: () => print('Button Pressed!'), // 点击事件
  label: 'Subscribe and Play', // 按钮文本
  icon: Icon(
    Icons.play_arrow,
    color: Colors.white,
  ), // 图标
  backgroundColor: Colors.green, // 背景颜色
  textColor: Colors.white, // 文本颜色
);
高级使用
带前导图标的闪亮按钮
ShinyButton(
  onPressed: () => print('Button Pressed!'),
  label: 'Subscribe and Play',
  icon: Icon(
    Icons.play_arrow,
    color: Colors.white,
  ),
  backgroundColor: Colors.green,
  textColor: Colors.white,
  shineDuration: Duration(seconds: 2), // 闪亮动画持续时间
  shineDirection: ShineDirection.leftToRight, // 闪亮动画方向
  iconPosition: IconPosition.leading, // 图标位置
  tooltip: 'This is a shiny button', // 提示工具
  textStyle: TextStyle(fontWeight: FontWeight.bold), // 文本样式
  borderRadius: 16.0, // 圆角半径
  elevation: 4.0, // 阴影高度
  shadowColor: Colors.black54, // 阴影颜色
  customGradient: [Colors.red, Colors.yellow], // 自定义渐变
  showRipple: true, // 是否显示涟漪效果
);
带后置图标的禁用闪亮按钮
ShinyButton(
  onPressed: () => print('Button Pressed!'),
  label: 'Disabled Button',
  icon: Icon(
    Icons.play_arrow,
    color: Colors.white,
  ),
  backgroundColor: Colors.green,
  textColor: Colors.white,
  isEnabled: false, // 禁用按钮
  shineDuration: Duration(seconds: 3),
  shineDirection: ShineDirection.topToBottom,
  iconPosition: IconPosition.trailing,
  disabledBackgroundColor: Colors.grey, // 禁用状态背景色
  disabledTextColor: Colors.white,
  isReverse: true,
);
无图标的闪亮按钮
ShinyButton(
  onPressed: () => print('Button Pressed!'),
  label: 'No Icon Button',
  backgroundColor: Colors.blue,
  textColor: Colors.white,
  shineDuration: Duration(seconds: 2),
  shineDirection: ShineDirection.leftToRight,
  isReverse: false,
);
加载状态的闪亮按钮
ShinyButton(
  onPressed: () => print('Button Pressed!'),
  label: 'Loading Button',
  backgroundColor: Colors.orange,
  textColor: Colors.white,
  shineDuration: Duration(seconds: 2),
  shineDirection: ShineDirection.leftToRight,
  isReverse: false,
  isLoading: true, // 加载状态
  loadingIndicatorSize: 24.0, // 加载指示器大小
);
自定义文本样式的闪亮按钮
ShinyButton(
  onPressed: () => print('Button Pressed!'),
  label: 'Custom Text Style',
  icon: Icon(
    Icons.star,
    color: Colors.white,
  ),
  backgroundColor: Colors.purple,
  textColor: Colors.white,
  shineDuration: Duration(seconds: 2),
  shineDirection: ShineDirection.rightToLeft,
  iconPosition: IconPosition.above,
  isReverse: false,
  textStyle: TextStyle(fontSize: 18, fontStyle: FontStyle.italic), // 自定义文本样式
);
无涟漪效果的闪亮按钮
ShinyButton(
  onPressed: () => print('Button Pressed!'),
  label: 'No Ripple Effect',
  backgroundColor: Colors.teal,
  textColor: Colors.white,
  shineDuration: Duration(seconds: 2),
  shineDirection: ShineDirection.bottomToTop,
  isReverse: false,
  showRipple: false, // 不显示涟漪效果
);

示例项目 📂

查看 example 目录中的示例项目以了解所有功能的实际应用。您可以运行示例项目：

cd example
flutter run

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

1 回复

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


当然，以下是一个关于如何在Flutter项目中使用shiny_button插件的示例代码。shiny_button是一个用于创建闪耀效果的按钮的Flutter插件。

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

dependencies:
  flutter:
    sdk: flutter
  shiny_button: ^最新版本号  # 请替换为最新的版本号

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

接下来，你可以在你的Flutter项目中创建一个闪耀按钮。以下是一个完整的示例代码，展示如何在主屏幕上使用shiny_button：

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void _onShinyButtonPressed() {
    // 按钮点击后的处理逻辑
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('按钮被点击了!')),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shiny Button Demo'),
      ),
      body: Center(
        child: ShinyButton(
          onPressed: _onShinyButtonPressed,
          width: 200,
          height: 50,
          color: Colors.blue,
          splashColor: Colors.red,
          borderRadius: 25,
          child: Text(
            '闪耀按钮',
            style: TextStyle(color: Colors.white, fontSize: 18),
          ),
          animationDuration: Duration(milliseconds: 300),
        ),
      ),
    );
  }
}

代码解释：

  1. 依赖导入：

    • 导入flutter/material.dart和shiny_button/shiny_button.dart。

  2. 应用入口：

    • MyApp是应用的入口，它返回一个MaterialApp实例。

  3. 主屏幕：

    • MyHomePage是一个有状态的组件，它包含一个闪耀按钮。
    • _onShinyButtonPressed方法处理按钮点击事件，这里只是简单地显示一个SnackBar。

  4. 闪耀按钮：

    • ShinyButton是核心组件，它接受多个参数来定制按钮的外观和行为：
      • onPressed：按钮点击时的回调函数。
      • width和height：按钮的宽度和高度。
      • color：按钮的默认颜色。
      • splashColor：点击时的闪耀颜色。
      • borderRadius：按钮的圆角半径。
      • child：按钮内部的文本或图标。
      • animationDuration：闪耀动画的持续时间。

这个示例展示了如何使用shiny_button插件来创建一个基本的闪耀按钮，并处理其点击事件。你可以根据需要进一步自定义按钮的样式和行为。

回到顶部