Button 006 — Flutter Button Widget

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

How to use Button 006 in Flutter

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

Button 006 – Dart source code

import 'package:flutter/material.dart';

class Button006 extends StatefulWidget {
  const Button006({
    super.key,
    this.label = 'CONTINUE',
    this.onTap,
  });

  final String label;
  final VoidCallback? onTap;

  @override
  State<Button006> createState() => _Button006State();
}

class _Button006State extends State<Button006>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller;
  bool _isLoading = false;
  bool _isPressed = false;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 1000),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _handleTap() {
    setState(() {
      _isLoading = !_isLoading;
      if (_isLoading) {
        _controller.repeat();
      } else {
        _controller.stop();
        _controller.reset();
      }
    });
    widget.onTap?.call();
  }

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      cursor: SystemMouseCursors.click,
      child: GestureDetector(
        onTapDown: (_) => setState(() => _isPressed = true),
        onTapUp: (_) {
          setState(() => _isPressed = false);
          _handleTap();
        },
        onTapCancel: () => setState(() => _isPressed = false),
        child: AnimatedScale(
          scale: _isPressed ? 0.95 : 1.0,
          duration: const Duration(milliseconds: 120),
          curve: Curves.easeOutCubic,
          child: AnimatedBuilder(
            animation: _controller,
            builder: (context, child) {
              final double shift = _isLoading ? _controller.value * 2.0 : 0.0;

              final Gradient gradient = _isLoading
                  ? LinearGradient(
                      begin: Alignment(-2.0 + shift, 0.0),
                      end: Alignment(1.0 + shift, 0.0),
                      colors: const [
                        Color(0xFF0369A1),
                        Color(0xFF38BDF8),
                        Color(0xFF6366F1),
                        Color(0xFF0369A1),
                      ],
                    )
                  : const LinearGradient(
                      begin: Alignment.centerLeft,
                      end: Alignment.centerRight,
                      colors: [Color(0xFF0369A1), Color(0xFF4338CA)],
                    );

              return Container(
                padding: const EdgeInsets.symmetric(
                  horizontal: 24,
                  vertical: 14,
                ),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12),
                  gradient: gradient,
                ),
                child: child,
              );
            },
            child: Text(
              widget.label,
              style: const TextStyle(
                color: Colors.white,
                fontSize: 14,
                fontWeight: FontWeight.w700,
                letterSpacing: 0.8,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

More Flutter Buttons

• Button 001
• Button 002
• Button 003
• Button 004
• Button 005
• Button 007
• Button 008
• Button 009