Flutter Bouncing Widgets

Bounceable Flutter Widget Kit

Demo

Import

import 'package:bouncing_widgets/bouncing_widgets.dart';

Widgets

CustomBounceWidget

CustomBounceWidget(
    onPressed: () => print("Clicked"),
    child: Container(
    color: Colors.red,
    height: 100,
    width: 100,
    ),
)

Parameter	Type	Description
onPressed	VoidCallback	Required. Click function
child	Widget	Required. Child widget
isScrollable	bool	Important Set it to true if you are going to use it in a list
scaleFactor	double	Scale factor
duration	Duration	Animation duration
canReverse	bool	Whether the animation can revers or not

BounceElevatedButton

BounceElevatedButton(
    onPressed: () => showSnackBar(context, 'Clicked BounceElevatedButton'),
    color: Colors.red,
    borderRadius: BorderRadius.circular(10),
    child: const Text(
        'Bounce Elevated Button',
        style: TextStyle(
        color: Colors.white,
        fontSize: 16,
        fontWeight: FontWeight.bold,
        ),
    ),
)

BounceTextButton

BounceTextButton(
    onPressed: () => showSnackBar(context, 'Clicked BounceTextButton'),
    child: Text('Bounce Text Button'),
)

BounceCircleAvatar

BounceCircleAvatar(
    onPressed: () => showSnackBar(context, 'Clicked BounceCircleAvatar'),
    backgroundColor: Colors.red.withOpacity(0.1),
    child: const Icon(Icons.add, color: Colors.red),
)

BounceCard

BounceCard(
  onPressed: () => showSnackBar(context, 'Clicked BounceCard'),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Expanded(
        flex: 1,
        child: Container(
          height: 100,
          color: Colors.red.withOpacity(0.1),
          child: const Icon(
            Icons.person,
            color: Colors.red,
          ),
        ),
      ),
      const Expanded(
        flex: 2,
        child: SizedBox(
          height: 100,
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 20),
            child: Center(
              child: Text(
                "Bounce Card is a widget that can be used to create a card that can be clicked and bounce on click",
              ),
            ),
          ),
        ),
      ),
    ],
  ),
)

Extension

You can use the .bounce() extension to bounceable your widget

MyAwesomeWidget().bounce(
    onPressed: () {},
)

Parameter	Type	Description
onPressed	VoidCallback	Required. Click function
isScrollable	bool	Important Set it to true if you are going to use it in a list
scaleFactor	double	Scale factor
duration	Duration	Animation duration
canReverse	bool	Whether the animation can revers or not