flutter_ripple_effect 1.0.0 copy "flutter_ripple_effect: ^1.0.0" to clipboard
flutter_ripple_effect: ^1.0.0 copied to clipboard

A high-performance Flutter widget for creating interactive liquid ripple effects on images using custom GLSL shaders.

example/lib/main.dart

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

void main() {
  runApp(const RippleExampleApp());
}

class RippleExampleApp extends StatelessWidget {
  const RippleExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Photo Ripple Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: Colors.black,
      ),
      home: const ExampleScreen(),
    );
  }
}

class ExampleScreen extends StatefulWidget {
  const ExampleScreen({super.key});

  @override
  State<ExampleScreen> createState() => _ExampleScreenState();
}

class _ExampleScreenState extends State<ExampleScreen> {
  final RippleController _controller = RippleController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(24.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text(
                'Photo\nRipple',
                style: TextStyle(
                  fontSize: 32,
                  height: 1.1,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
              const SizedBox(height: 8),
              const Text(
                'Tap anywhere on the image to generate liquid ripples',
                style: TextStyle(color: Colors.white60, fontSize: 14),
              ),
              const SizedBox(height: 32),
              Expanded(
                child: Center(
                  child: AspectRatio(
                    aspectRatio: 1.0,
                    child: RippleEffect(
                      controller: _controller,
                      imageProvider: const AssetImage('assets/image.png'),
                      borderRadius: BorderRadius.circular(24),
                      power: 1.2,
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 24),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton.icon(
                    onPressed: () {
                      _controller.addRipple(
                        const Offset(0.5, 0.5),
                        power: 1.5,
                      );
                    },
                    icon: const Icon(Icons.water_drop),
                    label: const Text('Center Ripple'),
                  ),
                  const SizedBox(width: 16),
                  OutlinedButton.icon(
                    onPressed: () => _controller.clear(),
                    icon: const Icon(Icons.clear_all),
                    label: const Text('Clear'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}
1
likes
150
points
211
downloads

Documentation

API reference

Publisher

unverified uploader

Weekly Downloads

A high-performance Flutter widget for creating interactive liquid ripple effects on images using custom GLSL shaders.

Topics

#shader #ripple #animation #effects #liquid

License

MIT (license)

Dependencies

flutter

More

Packages that depend on flutter_ripple_effect