Flutter涟漪效果按钮插件ripple_button的使用

简介

ripple_button 是一个完全可定制的按钮插件，带有Material Design风格的涟漪效果。它易于使用，并提供了一些预定义的按钮类型。

截图

弹跳动画

RippleButton 属性

`isEnabled`

描述: 控制按钮是否启用。如果为false，按钮将显示为禁用状态，背景颜色变为disabled（参见RippleButtonColor），透明度降低，并且不可点击。启用或禁用时会有弹跳动画以吸引用户注意。
类型: bool

`onPressed`

描述: 按钮被按下时执行的函数。如果为null，按钮将不可点击。要应用禁用样式，请使用isEnabled属性。
类型: Function()？

`padding`

描述: 为按钮添加内边距。
类型: EdgeInsets

`style`

描述: 自定义RippleButton的样式。
类型: RippleButtonStyle

`type`

描述: 预配置的按钮设计。如果未设置，将使用自定义设计。
类型: RippleButtonType

`color`

描述: 自定义按钮的颜色样式。
类型: RippleButtonColor

`border`

描述: 自定义按钮的边框样式。
类型: RippleButtonBorder

RippleButtonStyle 属性

`elevation`

描述: 设置按钮的阴影高度。
类型: double

`height`

描述: 设置按钮的高度。
类型: double

`width`

描述: 设置按钮的宽度。
类型: double

`text`

描述: 设置按钮内文本的样式。
类型: TextStyle

RippleButtonColor 属性

`background`

描述: 设置按钮的背景颜色。
类型: Color

`foreground`

描述: 设置按钮的前景颜色。

`disabled`

描述: 设置按钮禁用时的颜色。
类型: Color

`overlay`

描述: 设置鼠标悬停时的颜色。
类型: Color

`shadow`

描述: 设置按钮的阴影颜色。
类型: Color

RippleButtonBorder 属性

`side`

描述: 设置边框的大小、颜色和样式，默认为无边框。
类型: BorderSide

`radius`

描述: 设置边框的圆角，默认为直角。
类型: BorderRadius

RippleButtonType 类型

YELLOW:
AMBER:
WHITE_TRANSLUCENT:
BLUE_TRANSLUCENT:

完整示例代码

import 'package:flutter/material.dart';
import 'package:ripple_button/ripple_button.dart';
import 'package:another_flushbar/flushbar.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Flushbar? _flush;

  _showFlushbar(String message) {
    _flush?.dismiss();
    _flush = Flushbar(
      message: message,
      flushbarStyle: FlushbarStyle.FLOATING,
      margin: EdgeInsets.all(20.0),
      borderRadius: BorderRadius.all(Radius.circular(8.0)),
      icon: Icon(
        Icons.info,
        size: 28.0,
        color: Colors.white,
      ),
      duration: Duration(seconds: 1),
      leftBarIndicatorColor: Colors.white,
    );
    _flush?.show(context);
  }

  bool isEnabled = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF8185E2),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 黄色按钮
              RippleButton(
                "Yellow Button",
                padding: EdgeInsets.all(16),
                type: RippleButtonType.YELLOW,
                onPressed: () => {_showFlushbar("Clicked Yellow Button")},
              ),
              
              // 蓝色半透明按钮
              RippleButton(
                "Blue Translucent Button",
                padding: EdgeInsets.all(16),
                type: RippleButtonType.BLUE_TRANSLUCENT,
                onPressed: () => {_showFlushbar("Clicked Blue Translucent Button")},
              ),
              
              // 白色半透明按钮
              RippleButton(
                "White Translucent Button",
                padding: EdgeInsets.all(16),
                type: RippleButtonType.WHITE_TRANSLUCENT,
                icon: Icon(
                  Icons.abc,
                  color: Colors.white,
                ),
                onPressed: () => {_showFlushbar("Clicked White Translucent Button")},
              ),
              
              // 琥珀色按钮
              RippleButton(
                "Amber Button",
                type: RippleButtonType.AMBER,
                padding: EdgeInsets.all(16),
                onPressed: () {
                  _showFlushbar("Clicked Amber Button");
                },
              ),
              
              // 粉色按钮
              RippleButton(
                "Pink Button",
                type: RippleButtonType.PINK,
                padding: EdgeInsets.all(16),
                onPressed: () {
                  _showFlushbar("Clicked Pink Button");
                },
              ),
              
              // 浅绿色WhatsApp按钮
              RippleButton(
                "Green Light Whatsapp Button",
                icon: Icon(
                  Icons.whatsapp,
                  color: Colors.black,
                ),
                type: RippleButtonType.GREEN_LIGHT_WHATSAPP,
                padding: EdgeInsets.all(16),
                onPressed: () {
                  _showFlushbar("Clicked Green Light Whatsapp Button");
                },
              ),
              
              // 深绿色WhatsApp按钮
              RippleButton(
                "Green Dark Whatsapp Button",
                icon: Icon(
                  Icons.whatsapp,
                  color: Colors.white,
                ),
                type: RippleButtonType.GREEN_DARK_WHATSAPP,
                padding: EdgeInsets.all(16),
                onPressed: () {
                  _showFlushbar("Clicked Green Dark Whatsapp Button");
                },
              ),
              
              // 红色Gmail按钮
              RippleButton(
                "Red Gmail Button",
                icon: Icon(
                  Icons.email,
                  color: Colors.white,
                ),
                type: RippleButtonType.RED_GMAIL,
                padding: EdgeInsets.all(16),
                onPressed: () {
                  _showFlushbar("Clicked Red Gmail Button");
                },
              ),
              
              // 蓝色Telegram按钮
              RippleButton(
                "Blue Telegram Button",
                icon: Icon(
                  Icons.telegram,
                  color: Colors.white,
                ),
                type: RippleButtonType.BLUE_TELEGRAM,
                padding: EdgeInsets.all(16),
                onPressed: () {
                  _showFlushbar("Clicked Blue Telegram Button");
                },
              ),
              
              // 自定义按钮
              RippleButton(
                isEnabled ? "Disable Custom Button" : "Enable Custom Button",
                padding: EdgeInsets.all(16),
                color: RippleButtonColor(
                  background: Colors.orange,
                ),
                border: RippleButtonBorder(
                  side: BorderSide(
                    color: Colors.yellowAccent,
                    width: 1.5,
                  ),
                ),
                style: RippleButtonStyle(
                  text: TextStyle(
                    color: Color(0xFF8185E2),
                    fontSize: 18,
                    fontWeight: FontWeight.w900,
                    letterSpacing: 0.1,
                    wordSpacing: 0.5,
                  ),
                ),
                onPressed: () {
                  setState(() => {isEnabled = !isEnabled});
                  _showFlushbar(isEnabled ? "Enabled Button" : "Disabled Button");
                },
              ),
              
              // 启用/禁用按钮
              RippleButton(
                isEnabled ? "Enabled Button" : "Disabled Button",
                isEnabled: isEnabled,
                padding: EdgeInsets.all(16),
                color: RippleButtonColor(
                  background: Colors.orange,
                ),
                style: RippleButtonStyle(
                  text: TextStyle(
                    color: Color(0xFF8185E2),
                    fontSize: 18,
                    fontWeight: FontWeight.w900,
                    letterSpacing: 0.1,
                    wordSpacing: 0.5,
                  ),
                ),
                border: RippleButtonBorder(
                  side: BorderSide(
                    color: Colors.white,
                    width: 1.5,
                  ),
                ),
                onPressed: () => {
                  _showFlushbar("Clicked on Enable/Disable Button"),
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

wuwangju 1楼•6 天前

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

当然，以下是一个关于如何在Flutter中使用ripple_button插件来实现涟漪效果按钮的示例代码。

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

dependencies:
  flutter:
    sdk: flutter
  ripple_button: ^2.0.2  # 请确保使用最新版本

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

接下来，在你的Dart文件中，你可以这样使用RippleButton：

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ripple Button Example'),
      ),
      body: Center(
        child: RippleButton(
          onPressed: () {
            // 按钮点击时的回调
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Button pressed!')),
            );
          },
          rippleColor: Colors.blue.withOpacity(0.5), // 涟漪颜色
          borderRadius: BorderRadius.circular(25), // 按钮圆角
          elevation: 4.0, // 按钮阴影
          child: Container(
            width: 200,
            height: 50,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(25),
            ),
            child: Center(
              child: Text(
                'Ripple Button',
                style: TextStyle(color: Colors.white, fontSize: 18),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

代码解释：

导入依赖：首先导入ripple_button包。
定义应用：在MyApp类中，定义了一个基本的MaterialApp。
主页面：在MyHomePage类中，构建了一个Scaffold，其中包含一个居中的RippleButton。
RippleButton属性：
- onPressed：按钮点击时的回调。
- rippleColor：涟漪效果的颜色，这里使用了半透明的蓝色。
- borderRadius：按钮的圆角大小。
- elevation：按钮的阴影大小。
- child：按钮的子组件，这里是一个包含文本Ripple Button的容器。

运行这个代码，你会看到一个带有涟漪效果的按钮，点击按钮时会有动画效果，并显示一个Snackbar提示。

这个示例展示了如何简单地使用ripple_button插件来创建一个具有涟漪效果的按钮。你可以根据需要调整按钮的样式和属性。