Gesture

gesture

Declare gesture states — NibMotion handles the rest. whileTap, whileHover, whileDrag.

Preview

Installation

Terminal

flutter pub add nib_motion

Usage

dart

NibMotion(
  whileTap:   NibAnim(scale: 0.92, opacity: 0.85),
  whileHover: NibAnim(scale: 1.06, y: -4),
  transition: NibTransition.springSnappy,
  child: MyButton(),
)

Examples

While Tap

Animates to target values while pressed, springs back on release.

dart

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF0D1117),
      body: Center(
        child: NibMotion(
          whileTap: const NibAnim(scale: 0.4),

          transition: NibTransition.springSnappy,
          child: GestureDetector(
            onTap: () {},
            child: Container(
              width: 180,
              height: 56,
              decoration: BoxDecoration(
                color: const Color(0xFF54C5F8),
                borderRadius: BorderRadius.circular(12),
              ),
              child: const Center(
                child: Text(
                  'Tap Me',
                  style: TextStyle(
                    color: Color(0xFF07080D),
                    fontSize: 16,
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

While Hover

Responds to pointer hover — useful for desktop and web Flutter targets.

dart

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF0D1117),
      body: Center(
        child: NibMotion(
          whileHover: const NibAnim(scale: 1.05, y: -4),
          transition: const NibTransition(duration: Duration(milliseconds: 200)),
          child: Container(
            width: 200,
            height: 100,
            decoration: BoxDecoration(
              color: const Color(0xFF1C2537),
              borderRadius: BorderRadius.circular(12),
              border: Border.all(color: const Color(0xFF54C5F8).withAlpha(50)),
            ),
            child: const Center(
              child: Text(
                'Hover Me',
                style: TextStyle(
                  color: Color(0xFFEDF2F7),
                  fontSize: 16,
                  fontWeight: FontWeight.w600,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

While Drag

Makes a widget draggable and animates it while being dragged.

dart

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF0D1117),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            NibMotion(
              drag: const NibDragConfig(),
              whileDrag: const NibAnim(scale: 1.06, opacity: 0.85),
              transition: NibTransition.springSnappy,
              child: Container(
                width: 180,
                height: 80,
                decoration: BoxDecoration(
                  color: const Color(0xFF1C2537),
                  borderRadius: BorderRadius.circular(12),
                  border: Border.all(color: const Color(0xFF54C5F8).withAlpha(80)),
                ),
                child: const Center(
                  child: Text(
                    'Drag Me',
                    style: TextStyle(
                      color: Color(0xFFEDF2F7),
                      fontSize: 16,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                ),
              ),
            ),
            const SizedBox(height: 16),
            const Text(
              'Drag anywhere',
              style: TextStyle(color: Color(0xFF718096), fontSize: 13),
            ),
          ],
        ),
      ),
    );
  }
}

API Reference

API class

NibMotion

API Properties

whileTapwhileHoverwhileDragdrag