custom_button_library 0.0.3

A flexible and customizable Flutter button library with multiple variants like primary, outline, gradient and icon buttons.

example/lib/main.dart

import 'package:custom_button_library/custom_button_library.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const ButtonShowcaseApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Button UI Kit',
      theme: ThemeData(useMaterial3: true, colorSchemeSeed: Colors.blue),
      home: const ButtonGalleryPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF4F6F8),
      appBar: AppBar(
        title: const Text('Custom Button UI Kit'),
        centerTitle: false,
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          _SectionCard(
            title: "Primary Buttons",
            children: [
              PrimaryButton(text: "Primary", onTap: () {}),
              PrimaryButton(
                text: "With Icon",
                icon: const Icon(Icons.upload),
                onTap: () {},
              ),
              PrimaryButton(text: "Rounded", borderRadius: 100, onTap: () {}),
              PrimaryButton(text: "Loading", isLoading: true, onTap: () {}),
              PrimaryButton(text: "Disabled", enabled: false, onTap: () {}),
            ],
          ),

          _SectionCard(
            title: "Outline Buttons",
            children: [
              OutlineButton(text: "Outline", onTap: () {}),
              OutlineButton(
                text: "Custom Color",
                borderColor: Colors.orange,
                onTap: () {},
              ),
              OutlineButton(
                text: "With Icon",
                icon: const Icon(Icons.edit),
                onTap: () {},
              ),
            ],
          ),

          _SectionCard(
            title: "Gradient Buttons",
            children: [
              GradientButton(
                text: "Purple",
                gradient: const LinearGradient(
                  colors: [Colors.purple, Colors.blue],
                ),
                onTap: () {},
              ),
              GradientButton(
                text: "Sunset",
                gradient: const LinearGradient(
                  colors: [Colors.pink, Colors.orange],
                ),
                onTap: () {},
              ),
            ],
          ),

          _SectionCard(
            title: "Danger Buttons",
            children: [
              DangerButton(
                text: "Delete",
                icon: const Icon(Icons.delete),
                onTap: () {},
              ),
            ],
          ),

          _SectionCard(
            title: "Icon Buttons",
            children: [
              IconOnlyButton(icon: const Icon(Icons.edit), onTap: () {}),
              OutlineIconButton(
                icon: const Icon(Icons.delete),
                borderColor: Colors.red,
                onTap: () {},
              ),
              GradientIconButton(
                icon: const Icon(Icons.add),
                gradient: const LinearGradient(
                  colors: [Colors.green, Colors.teal],
                ),
                onTap: () {},
              ),
              IconOnlyButton(
                icon: const Icon(Icons.close),
                size: 32,
                onTap: () {},
              ),
              IconOnlyButton(
                icon: const Icon(Icons.play_arrow),
                size: 64,
                borderRadius: 32,
                onTap: () {},
              ),
              IconOnlyButton(
                icon: const Icon(Icons.settings),
                color: Colors.transparent,
                shadow: const [],
                onTap: () {},
              ),
              IconOnlyButton(
                icon: const Icon(Icons.refresh),
                isLoading: true,
                onTap: () {},
              ),
              IconOnlyButton(
                icon: const Icon(Icons.download),
                enabled: false,
                onTap: () {},
              ),
            ],
          ),
        ],
      ),
    );
  }
}

/// A reusable section card used to group button variants.
class _SectionCard extends StatelessWidget {
  final String title;
  final List<Widget> children;

  const _SectionCard({required this.title, required this.children});

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 0.5,
      margin: const EdgeInsets.only(bottom: 16),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              title,
              style: Theme.of(
                context,
              ).textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w600),
            ),
            const SizedBox(height: 12),
            Wrap(spacing: 12, runSpacing: 12, children: children),
          ],
        ),
      ),
    );
  }
}