Flutter涟漪效果插件simple_flutter_ripple_effect的使用

Flutter涟漪效果插件simple_flutter_ripple_effect的使用

RippleEffect 是一个 Flutter 小部件，当用户点击时会在其子组件上应用涟漪效果。非常适合创建交互式且视觉上吸引人的 UI 组件。

特性

  • 为任何子组件添加涟漪效果。
  • 支持自定义边框半径以实现圆角效果。
  • 提供透明的 Material 覆盖层以确保涟漪效果平滑渲染。
  • 易于集成到任何 Flutter 项目中。

使用示例

首先，确保在 pubspec.yaml 文件中添加 simple_flutter_ripple_effect 依赖：

dependencies:
  simple_flutter_ripple_effect: ^1.0.0

然后，通过以下步骤在你的 Flutter 应用中使用 RippleEffect。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Ripple Effect Demo'),
        ),
        body: Center(
          child: RippleEffect(
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
              alignment: Alignment.center,
              child: Text(
                "点击我",
                style: TextStyle(color: Colors.white),
              ),
            ),
            // 可以设置涟漪颜色
            rippleColor: Colors.white.withOpacity(0.5),
            // 设置涟漪的大小
            rippleSize: 200,
            // 设置边框半径
            borderRadius: BorderRadius.circular(10),
            // 点击回调
            onTap: () {
              print("Container clicked!");
            },
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


simple_flutter_ripple_effect 是一个用于在 Flutter 应用中实现涟漪效果的插件。它可以让你在用户点击或触摸某个部件时，显示一个类似于 Material Design 中的涟漪动画效果。

安装插件

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

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

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

使用插件

simple_flutter_ripple_effect 提供了一个 RippleEffect 部件，你可以将它包裹在任何一个部件外面，以实现点击或触摸时的涟漪效果。

基本用法

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Ripple Effect Example'),
        ),
        body: Center(
          child: RippleEffect(
            child: Container(
              width: 200,
              height: 100,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Click Me',
                  style: TextStyle(color: Colors.white, fontSize: 20),
                ),
              ),
            ),
            onPressed: () {
              print('Button Clicked!');
            },
          ),
        ),
      ),
    );
  }
}

在这个例子中，RippleEffect 包裹了一个 Container，当用户点击这个 Container 时，会显示一个涟漪效果，并且会触发 onPressed 回调。

自定义涟漪效果

你可以通过 RippleEffect 的参数来自定义涟漪效果的颜色、持续时间、半径等。

RippleEffect(
  child: Container(
    width: 200,
    height: 100,
    color: Colors.blue,
    child: Center(
      child: Text(
        'Click Me',
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    ),
  ),
  rippleColor: Colors.red,  // 涟漪颜色
  rippleDuration: Duration(milliseconds: 1000),  // 涟漪持续时间
  rippleRadius: 150,  // 涟漪半径
  onPressed: () {
    print('Button Clicked!');
  },
);
回到顶部