Button 005 — Flutter Button Widget

Free copy-paste Button 005 for Flutter: a ready-to-use button widget with full Dart source code and a live preview. Works on mobile. No external packages.

  • Category: Buttons
  • Platforms: mobile
  • Flutter SDK only — no external packages
  • Free to copy & use

How to use Button 005 in Flutter

Copy the Dart code below into a new file in your Flutter project (for example lib/widgets/button_005.dart) and use the widget anywhere in your widget tree.

Button 005 – Dart source code

import 'package:flutter/material.dart';

class Button005 extends StatefulWidget {
  const Button005({
    super.key,
    this.label = 'INITIALIZE PAY',
    this.onTap,
    this.icon = Icons.bolt_rounded,
    this.badgeText = 'TAP',
  });

  final String label;
  final VoidCallback? onTap;
  final IconData icon;
  final String badgeText;

  @override
  State<Button005> createState() => _Button005State();
}

class _Button005State extends State<Button005> {
  bool _isPressed = false;

  @override
  Widget build(BuildContext context) {
    const Color primaryVolt = Color(0xFFCCFF00);
    const Color darkVolt = Color(0xFFAEE600);
    const Color carbonBlack = Color(0xFF0C0D11);

    return MouseRegion(
      cursor: SystemMouseCursors.click,
      child: GestureDetector(
        onTapDown: (_) => setState(() => _isPressed = true),
        onTapUp: (_) {
          setState(() => _isPressed = false);
          widget.onTap?.call();
        },
        onTapCancel: () => setState(() => _isPressed = false),
        child: AnimatedScale(
          scale: _isPressed ? 0.93 : 1.0,
          duration: const Duration(milliseconds: 120),
          curve: Curves.easeOutQuad,
          child: AnimatedContainer(
            duration: const Duration(milliseconds: 120),
            height: 56,
            padding: const EdgeInsets.symmetric(horizontal: 20),
            decoration: BoxDecoration(
              color: _isPressed ? darkVolt : primaryVolt,
              borderRadius: BorderRadius.circular(28),
            ),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(widget.icon, size: 20, color: carbonBlack),
                const SizedBox(width: 10),
                Text(
                  widget.label,
                  style: const TextStyle(
                    color: carbonBlack,
                    fontSize: 15,
                    fontWeight: FontWeight.w800,
                    letterSpacing: 0.8,
                  ),
                ),
                const SizedBox(width: 12),
                Container(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 8,
                    vertical: 4,
                  ),
                  decoration: BoxDecoration(
                    color: carbonBlack,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Text(
                    widget.badgeText,
                    style: TextStyle(
                      color: _isPressed ? darkVolt : primaryVolt,
                      fontSize: 10,
                      fontWeight: FontWeight.w900,
                      letterSpacing: 0.5,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

More Flutter Buttons