Flutter动画容器插件bouncy_container的使用

Flutter动画容器插件bouncy_container的使用

特性

自定义带有弹跳点击效果的容器。你可以在 Flutter 应用程序的任何地方使用它。

安装

  1. 在 pubspec.yaml 文件中添加包的最新版本（并运行 dart pub get）：

    dependencies:
    bouncy_container: ^0.0.3

  2. 导入包并在你的 Flutter 应用中使用它：

    import 'package:bouncy_container/bouncy_container.dart';

示例

你可以修改多个属性：

  • height
  • width
  • backgroundColor
  • shadowColor
  • padding
  • margin
  • decoration
  • duration
  • radius
class BouncyContainer extends StatefulWidget {
  final Widget child;
  final double? width;
  final double? height;
  final EdgeInsets? padding;
  final EdgeInsets? margin;
  final Decoration? decoration;
  final VoidCallback? onPressed;
  final Duration? duration;

  const BouncyContainer(
      {Key? key,
      required this.child,
      this.width,
      this.height,
      this.padding,
      this.margin,
      this.decoration,
      this.onPressed,
      this.duration})
      : super(key: key);

  [@override](/user/override)
  _BouncyContainerState createState() => _BouncyContainerState();
}

class _BouncyContainerState extends State<BouncyContainer> with SingleTickerProviderStateMixin {
  AnimationController? _animationController;
  double? _scale;

  [@override](/user/override)
  void initState() {
    _animationController = AnimationController(
        vsync: this,
        duration: widget.duration ?? const Duration(milliseconds: 150),
        lowerBound: 0.0,
        upperBound: 0.06)
      ..addListener(() {
        setState(() {});
      });
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    _animationController!.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    _scale = 1 - _animationController!.value;
    return GestureDetector(
        onTap: () {
          _animationController!.forward();
          Future.delayed(const Duration(milliseconds: 100), () {
            _animationController!.reverse();
            widget.onPressed?.call();
          });
        },
        child: Transform.scale(
          scale: _scale,
          child: Container(
            width: widget.width ?? MediaQuery.of(context).size.width,
            height: widget.height ?? MediaQuery.of(context).size.height,
            padding: widget.padding ?? EdgeInsets.zero,
            margin: widget.margin ?? EdgeInsets.zero,
            decoration: widget.decoration ??
                BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.white,
                    boxShadow: const [
                      BoxShadow(
                          offset: Offset(2, 2),
                          color: Colors.white60,
                          blurRadius: 6)
                    ]),
            child: widget.child,
          ),
        ));
  }
}

更多关于Flutter动画容器插件bouncy_container的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动画容器插件bouncy_container的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter中使用bouncy_container插件来实现动画容器的示例代码。bouncy_container是一个用于创建具有弹性动画效果的容器的Flutter插件。

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

dependencies:
  flutter:
    sdk: flutter
  bouncy_container: ^1.0.0  # 请检查最新版本号并替换

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

以下是一个完整的示例代码，展示如何使用BouncyContainer：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bouncy Container Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Bouncy Container Demo'),
        ),
        body: Center(
          child: BouncyContainerDemo(),
        ),
      ),
    );
  }
}

class BouncyContainerDemo extends StatefulWidget {
  @override
  _BouncyContainerDemoState createState() => _BouncyContainerDemoState();
}

class _BouncyContainerDemoState extends State<BouncyContainerDemo> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);

    _animation = Tween<double>(begin: 0, end: 1).animate(_controller);
  }

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

  @override
  Widget build(BuildContext context) {
    return BouncyContainer(
      onPressed: () {
        // Handle press event if needed
        print('Container pressed');
      },
      color: Colors.deepOrange,
      height: 200,
      width: double.infinity,
      alignment: Alignment.center,
      child: AnimatedBuilder(
        animation: _animation,
        child: Text(
          'Bouncy!',
          style: TextStyle(color: Colors.white, fontSize: 24),
        ),
        builder: (context, child) {
          return Transform.scale(
            scale: 1 + _animation.value * 0.1,
            child: child,
          );
        },
      ),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.2),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(0, 3), // changes position of shadow
          ),
        ],
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 依赖添加：在pubspec.yaml文件中添加了bouncy_container依赖。
  2. 动画控制：创建了一个AnimationController来控制动画，并在initState中初始化它。
  3. BouncyContainer使用：使用BouncyContainer创建一个具有弹性动画效果的容器。
  4. 动画效果：在BouncyContainer内使用AnimatedBuilder和Transform.scale来创建一个缩放动画效果，该效果随着AnimationController的值变化而变化。
  5. 容器样式：设置了容器的颜色、大小、对齐方式以及装饰（包括边框半径和阴影）。

运行这个示例代码，你将看到一个具有弹性动画效果的容器，当动画运行时，容器内的文本会随着动画进行缩放。你可以根据需要进一步自定义动画和容器样式。

回到顶部