Button 001 — Flutter Button Widget

Free copy-paste Button 001 for Flutter: a ready-to-use button widget with full Dart source code and a live preview. Works on web & windows & macos & linux. No external…

  • Category: Buttons
  • Platforms: web, windows, macos, linux
  • Flutter SDK only — no external packages
  • Free to copy & use

Features

  • Neumorphic / soft 3D visual style
  • Flutter SDK only — no external packages
  • Reusable across different screens and projects

When to use it

  • Delete items
  • Delete accounts
  • Remove records
  • Remove files
  • Clear saved data
  • Delete messages
  • Remove products or services
  • Destructive confirmation actions
  • Any action that permanently removes or discards content

How to use Button 001 in Flutter

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

Button 001 – Dart source code

import 'package:flutter/material.dart';

class Button001 extends StatefulWidget {
  const Button001({
    super.key,
    this.onTap,
    this.label = 'Delete',
    this.width = 145,
    this.height = 55,
  });

  final VoidCallback? onTap;
  final String label;
  final double width;
  final double height;

  @override
  State<Button001> createState() => _Button001State();
}

class _Button001State extends State<Button001> {
  bool isHovered = false;
  bool isPressed = false;

  void _setPressed(bool value) {
    if (!mounted) return;

    setState(() {
      isPressed = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    final bool active = isHovered || isPressed;

    return MouseRegion(
      cursor: SystemMouseCursors.click,
      onEnter: (_) => setState(() => isHovered = true),
      onExit: (_) {
        setState(() {
          isHovered = false;
          isPressed = false;
        });
      },
      child: GestureDetector(
        onTap: widget.onTap,
        onTapDown: (_) => _setPressed(true),
        onTapUp: (_) => _setPressed(false),
        onTapCancel: () => _setPressed(false),
        child: AnimatedContainer(
          duration: const Duration(milliseconds: 120),
          curve: Curves.easeOut,
          width: widget.width,
          height: widget.height,
          transform: Matrix4.translationValues(0, isPressed ? 3 : 0, 0),
          decoration: BoxDecoration(
            color: active ? Colors.red : Colors.white,
            borderRadius: BorderRadius.circular(50),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withValues(alpha: 0.35),
                blurRadius: isPressed ? 2 : 6,
                spreadRadius: isPressed ? 0 : 1,
                offset: Offset(0, isPressed ? 1 : 4),
              ),
            ],
          ),
          child: Center(
            child: Text(
              widget.label,
              style: TextStyle(
                color: active ? Colors.white : Colors.red,
                letterSpacing: active ? 2 : 1,
                fontSize: 18,
                fontWeight: active ? FontWeight.bold : FontWeight.w500,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

More Flutter Buttons