zeba_academy_tag #

A lightweight, customizable Flutter package for creating beautiful and reusable tags for categories, statuses, removable items, and selectable options.

✨ Features #

• 🏷️ Create category tags
• 📊 Display status tags
• ❌ Create removable tags
• ✅ Create selectable tags
• 🎨 Fully customizable colors
• 🧩 Optional icons
• 🔄 Animated selection state
• 📐 Custom padding and border radius
• 🌗 Works with Material 3 themes
• 🚫 No external APIs
• 🤖 No AI dependencies
• 📦 Lightweight and dependency-free
• 💙 Built specifically for Flutter

📦 Installation #

Add zeba_academy_tag to your pubspec.yaml:

dependencies:
  zeba_academy_tag: ^1.0.0

Then run:

flutter pub get

🚀 Import #

import 'package:zeba_academy_tag/zeba_academy_tag.dart';

🏷️ Category Tags #

Use ZebaCategoryTag to display categories, labels, topics, or classifications.

const ZebaCategoryTag(
  label: 'Technology',
)

With an Icon #

const ZebaCategoryTag(
  label: 'Flutter',
  icon: Icons.flutter_dash,
)

Custom Colors #

const ZebaCategoryTag(
  label: 'Development',
  icon: Icons.code,
  backgroundColor: Colors.blue,
  foregroundColor: Colors.white,
)

With a Border #

const ZebaCategoryTag(
  label: 'Design',
  icon: Icons.palette_outlined,
  backgroundColor: Colors.transparent,
  foregroundColor: Colors.purple,
  borderColor: Colors.purple,
)

Custom Styling #

const ZebaCategoryTag(
  label: 'Business',
  padding: EdgeInsets.symmetric(
    horizontal: 16,
    vertical: 10,
  ),
  borderRadius: 16,
  fontSize: 14,
  fontWeight: FontWeight.bold,
)

📊 Status Tags #

Use ZebaStatusTag to represent the current state of an item.

const ZebaStatusTag(
  status: ZebaStatus.active,
)

Available Statuses #

ZebaStatus.active
ZebaStatus.inactive
ZebaStatus.pending
ZebaStatus.completed
ZebaStatus.cancelled
ZebaStatus.draft

Examples #

const ZebaStatusTag(
  status: ZebaStatus.active,
)

const ZebaStatusTag(
  status: ZebaStatus.pending,
)

const ZebaStatusTag(
  status: ZebaStatus.completed,
)

const ZebaStatusTag(
  status: ZebaStatus.cancelled,
)

Custom Status Label #

const ZebaStatusTag(
  status: ZebaStatus.active,
  label: 'Available',
)

Hide the Status Icon #

const ZebaStatusTag(
  status: ZebaStatus.pending,
  showIcon: false,
)

❌ Removable Tags #

Use ZebaRemovableTag when users should be able to remove an item.

ZebaRemovableTag(
  label: 'Flutter',
  onRemoved: () {
    debugPrint('Tag removed');
  },
)

With an Icon #

ZebaRemovableTag(
  label: 'Dart',
  icon: Icons.code,
  onRemoved: () {
    debugPrint('Dart removed');
  },
)

Custom Colors #

ZebaRemovableTag(
  label: 'Technology',
  backgroundColor: Colors.blue,
  foregroundColor: Colors.white,
  onRemoved: () {
    debugPrint('Technology removed');
  },
)

✅ Selectable Tags #

Use ZebaSelectableTag for filters, categories, preferences, and multi-selection interfaces.

ZebaSelectableTag(
  label: 'Flutter',
  selected: true,
  onSelected: (selected) {
    debugPrint('Selected: $selected');
  },
)

🔄 Complete Selectable Tags Example #

class TagSelectionExample extends StatefulWidget {
  const TagSelectionExample({super.key});

  @override
  State<TagSelectionExample> createState() =>
      _TagSelectionExampleState();
}

class _TagSelectionExampleState
    extends State<TagSelectionExample> {
  final Set<String> selectedTags = {};

  final List<String> tags = [
    'Flutter',
    'Dart',
    'Firebase',
    'UI/UX',
  ];

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 8,
      runSpacing: 8,
      children: tags.map((tag) {
        final isSelected = selectedTags.contains(tag);

        return ZebaSelectableTag(
          label: tag,
          selected: isSelected,
          onSelected: (selected) {
            setState(() {
              if (selected) {
                selectedTags.add(tag);
              } else {
                selectedTags.remove(tag);
              }
            });
          },
        );
      }).toList(),
    );
  }
}

🎨 Custom Selectable Tag Colors #

ZebaSelectableTag(
  label: 'Flutter',
  selected: true,
  selectedColor: Colors.blue,
  selectedForegroundColor: Colors.white,
  unselectedColor: Colors.grey.shade200,
  unselectedForegroundColor: Colors.black87,
  onSelected: (selected) {},
)

🧩 Custom Icons #

ZebaSelectableTag(
  label: 'Technology',
  icon: Icons.computer,
  selected: false,
  onSelected: (selected) {},
)

When the tag is selected, the selection icon is shown automatically.

You can customize the selected icon:

ZebaSelectableTag(
  label: 'Completed',
  selected: true,
  selectedIcon: Icons.done_all,
  onSelected: (selected) {},
)

📱 Complete Example #

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

class TagExamplePage extends StatefulWidget {
  const TagExamplePage({super.key});

  @override
  State<TagExamplePage> createState() => _TagExamplePageState();
}

class _TagExamplePageState
    extends State<TagExamplePage> {
  final Set<String> selectedTags = {};

  final List<String> tags = [
    'Flutter',
    'Dart',
    'Firebase',
    'Design',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Tag Examples'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment:
                CrossAxisAlignment.start,
            children: [
              const Text(
                'Category Tags',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),

              const SizedBox(height: 12),

              const Wrap(
                spacing: 8,
                runSpacing: 8,
                children: [
                  ZebaCategoryTag(
                    label: 'Technology',
                    icon: Icons.computer,
                  ),
                  ZebaCategoryTag(
                    label: 'Design',
                    icon: Icons.palette_outlined,
                  ),
                ],
              ),

              const SizedBox(height: 32),

              const Text(
                'Status Tags',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),

              const SizedBox(height: 12),

              const Wrap(
                spacing: 8,
                children: [
                  ZebaStatusTag(
                    status: ZebaStatus.active,
                  ),
                  ZebaStatusTag(
                    status: ZebaStatus.pending,
                  ),
                  ZebaStatusTag(
                    status: ZebaStatus.completed,
                  ),
                ],
              ),

              const SizedBox(height: 32),

              const Text(
                'Removable Tags',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),

              const SizedBox(height: 12),

              Wrap(
                spacing: 8,
                children: [
                  ZebaRemovableTag(
                    label: 'Flutter',
                    onRemoved: () {},
                  ),
                  ZebaRemovableTag(
                    label: 'Dart',
                    onRemoved: () {},
                  ),
                ],
              ),

              const SizedBox(height: 32),

              const Text(
                'Selectable Tags',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),

              const SizedBox(height: 12),

              Wrap(
                spacing: 8,
                runSpacing: 8,
                children: tags.map((tag) {
                  final isSelected =
                      selectedTags.contains(tag);

                  return ZebaSelectableTag(
                    label: tag,
                    selected: isSelected,
                    onSelected: (selected) {
                      setState(() {
                        if (selected) {
                          selectedTags.add(tag);
                        } else {
                          selectedTags.remove(tag);
                        }
                      });
                    },
                  );
                }).toList(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

📚 API Reference #

ZebaCategoryTag #

ZebaStatusTag #

ZebaRemovableTag #

ZebaSelectableTag #

🧪 Testing #

Run static analysis:

flutter analyze

Run tests:

flutter test

Check package publishing:

flutter pub publish --dry-run

🛠️ Development #

Clone the repository:

git clone https://github.com/zeba-academy/zeba_academy_tag.git

Navigate to the project:

cd zeba_academy_tag

Install dependencies:

flutter pub get

Run analysis:

flutter analyze

Run tests:

flutter test

📄 License #

Copyright © 2026 Sufyan bin Uzayr

This project is licensed under the GNU General Public License v3.0 (GPL-3.0).

You are free to:

• Use the software
• Study the source code
• Modify the source code
• Distribute copies
• Distribute modified versions

Under the condition that distributed modified versions remain licensed under the same GPL-3.0 license.

See the LICENSE file for the full license text.

👨‍💻 About Me #

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.

You can learn more about me and my work at sufyanism.com or connect with me on LinkedIn.

🎓 Zeba Academy #

Your All-in-One Learning Hub! #

🚀 Explore courses and resources in coding, technology, and development at zeba.academy and code.zeba.academy.

Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience. Level up your tech game today! 💻✨

Zeba Academy is a learning platform dedicated to coding, technology, and development.

➡ Visit our main site: zeba.academy

➡ Explore hands-on courses and resources at: code.zeba.academy

➡ Check out our YouTube for more tutorials: zeba.academy

➡ Follow us on Instagram: zeba.academy

Thank you for visiting! 💙

If you find this package useful, consider ⭐ starring the repository and sharing it with the Flutter community.