Learn Mobile Development

NeoPOP Flutter Package created by Cred in Flutter Animated Button

Making beautiful animated button in Flutter

Animated buttons in Flutter

Introduction:

NeoPOP is a Flutter package that aims to create a beautiful, affirmative design system. It’s inspired by the philosophy and aesthetic principles of Neo-pop. Developers can use NeoPOP components for iOS, Android, Flutter, and Web.

Installation

dependencies:
    neopop: ^1.0.2

neopop | Flutter Package

Import it

Now in you’re Dart code, you can use:

import 'package:neopop/neopop.dart';

Elevated :

NeoPopButton(
    color: Colors.white,
    onTapUp: () => HapticFeedback.vibrate(),
    onTapDown: () => HapticFeedback.vibrate(),
    child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
        child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
                Text("Pay now"),
            ],
        ),
    ),
),

Flat :

NeoPopButton(
    color: Colors.white,
    onTapUp: () => HapticFeedback.vibrate(),
    onTapDown: () => HapticFeedback.vibrate(),
    parentColor: Colors.transparent,
    buttonPosition: Position.center,
    child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
        child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
                Text("Pay Now"),
            ],
        ),
    ),
),

Flat Strokes :

NeoPopButton(
    color: const Color.fromRGBO(0, 0, 0, 1),
    buttonPosition: Position.center,
    onTapUp: () {},
    border: const Border.fromBorderSide(
        BorderSide(color: kBorderColorWhite, width: kButtonBorderWidth),
    ),
    child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
        child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
                Text("Pay Now", style: TextStyle(color: Colors.white)),
            ],
        ),
    ),
),

Elevated Strokes :

NeoPopButton(
    color: kSecondaryButtonLightColor,
    bottomShadowColor: ColorUtils.getVerticalShadow(kBorderColorGreen).toColor(),
    rightShadowColor: ColorUtils.getHorizontalShadow(kBorderColorGreen).toColor(),
    animationDuration: kButtonAnimationDuration,
    depth: kButtonDepth,
    onTapUp: () {},
    border: Border.all(
        color: kBorderColorGreen,
        width: kButtonBorderWidth,
    ),
    child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
        child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
                Text("Scan & Pay", style: TextStyle(color: Colors.white)),
            ],
        ),
    ),
),

Non Floating :

 NeoPopTiltedButton(
    color: kPrimaryButtonColor,
    onTapUp: () {},
    child: Padding(
        padding: const EdgeInsets.symmetric(
        horizontal: 80.0,
        vertical: 15,
        ),
        child: SvgPicture.asset('assets/svg/cta_text_view.svg'),
    ),
),

Floating :

NeoPopTiltedButton(
    isFloating: true,
    onTapUp: () => HapticFeedback.vibrate(),
    onTapDown: () => HapticFeedback.vibrate(),
    decoration: const NeoPopTiltedButtonDecoration(
        color: kPopYellowColor,
        plunkColor: kPlunkColorYellow,
        shadowColor: kTiltedButtonShadowColor,
    ),
    child: Padding(
        padding: const EdgeInsets.symmetric(
        horizontal: 70.0,
        vertical: 15,
        ),
        child: SvgPicture.asset('assets/svg/cta_text_play_now.svg'),
    ),
),

Strokes :

NeoPopTiltedButton(
    isFloating: true,
    onTapUp: () {},
    decoration: const NeoPopTiltedButtonDecoration(
        color: Color(0xFF0D0D0D),
        plunkColor: Color(0xFF3F6915),
        shadowColor: Colors.black,
        border: Border.fromBorderSide(
        BorderSide(color: Color(0xFF8DD04A), width: 1),
        ),
    ),
    child: const Padding(
        padding: EdgeInsets.symmetric(horizontal: 70.0, vertical: 15),
        child: Text('Play Now', style: TextStyle(color: Colors.white)),
    ),
),

Shimmer :

NeoPopTiltedButton(
    isFloating: true,
    onTapUp: () {},
    decoration: const NeoPopTiltedButtonDecoration(
        color: Color.fromRGBO(255, 235, 52, 1),
        plunkColor: Color.fromRGBO(255, 235, 52, 1),
        shadowColor: Color.fromRGBO(36, 36, 36, 1),
        showShimmer: true,
    ),
    child: const Padding(
        padding: EdgeInsets.symmetric(
        horizontal: 70.0,
        vertical: 15,
        ),
        child: Text('Play Now'),
    ),
),

Photo by Howie R on Unsplash

❤ ❤ Thanks for reading dis article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.