Flutter Widgets Playground 🚀

A learning and reference repository for exploring Flutter widgets in action.
This project is structured to grow over time — with examples of Flutter’s core widgets, organized by their categories (like the official Flutter Widget Catalog).

---

📖 Overview

Flutter provides a huge collection of widgets, but the official docs can sometimes feel too abstract or minimal.
This repository aims to bridge that gap by providing:

• Hands-on examples for individual widgets.
• Organized structure (folders by category).
• Readable explanations and usage scenarios.
• A growing reference point for developers who want to understand how to use widgets in real projects.

The goal is to make this repo a go-to resource for beginners and experienced Flutter developers alike.

---

📂 Project Structure

Each category of widgets has its own folder, and inside it you’ll find examples for specific widgets.
This mirrors the Flutter Widget Catalog.

Example structure:

widgets_playground/
│
├── Accessibility/
│   ├── semantics_example.dart
│   ├── exclude_semantics_example.dart
│   ├── merge_semantics_example.dart
│   └── ...
│
├── Assets/
│   ├── assetbundle_example.dart
│   └── ...
│
├── Images/
│   ├── rawimage_example.dart
│   └── ...
│
├── Input/
│   ├── autocomplete_example.dart
│   ├── keyboard_listener_example.dart
│   └── ...
│
├── Painting/
│   ├── backdrop_filter_example.dart
│   ├── clip_oval_example.dart
│   ├── clip_path_example.dart
│   ├── clip_rect_example.dart
│   ├── custom_paint_example.dart
│   ├── decorated_box_example.dart
│   ├── fractional_translation_example.dart
│   ├── opacity_example.dart
│   ├── rotated_box_example.dart
│   ├── transform_example.dart
│   └── ...
│
└── README.md

---

🧩 Widgets Covered So Far

Accessibility

• Semantics – Adds semantic meaning for accessibility tools.
• ExcludeSemantics – Removes subtree semantics to avoid redundancy.
• MergeSemantics – Merges semantics of multiple widgets into a single node.

Assets & Resources

• AssetBundle – Loads resources like images, text, or JSON asynchronously.

Images

• RawImage – Directly paints a dart:ui.Image.

🎨 Painting & Effects

• BackdropFilter – Applies an image filter (like blur) to the background before painting its child.
• ClipOval – Clips its child into an oval or circle shape.
• ClipPath – Clips its child using a custom path defined by a CustomClipper.
• ClipRect – Clips its child to a rectangular area.
• CustomPaint – Provides a canvas to draw custom shapes, lines, or effects using CustomPainter.
• DecoratedBox – Paints decorations (gradients, shapes, images, borders) before or after its child.
• FractionalTranslation – Offsets its child by a fraction of its size.
• Opacity – Makes its child partially or fully transparent.
• RotatedBox – Rotates its child by 90° increments during layout.
• Transform – Applies 2D/3D transformations (scale, rotate, skew, translate) just before painting.

⌨️ Input

• Autocomplete – Provides text field suggestions as the user types, commonly used for search or form fields.
• KeyboardListener – Detects hardware key presses and releases; useful for games or keyboard shortcuts.

---

🔧 How It Works

• Each widget is implemented in a minimal example app (standalone main.dart file).
• Examples are simple, focused, and runnable, so you can quickly test them with flutter run.
• Code includes inline comments for better understanding.
• Widgets are grouped in folders by catalog category for easy navigation.

---

🌟 Why This Repo Is Important

• Acts as a living documentation for Flutter widgets.
• Provides real-world examples where Flutter docs may be too brief.
• Helps beginners understand not just how to use a widget, but why.
• Designed to be extendable — more widgets will be added over time.

---

🚀 Future Updates

This repository will continue to grow. Planned improvements include:

• Adding more categories (Layout, Animation, Input, etc.)
• Expanding examples for advanced widgets.
• Writing README.md per folder with explanations.
• Adding screenshots or GIFs for visual clarity.

---

🤝 Contribution

Contributions are welcome! 🎉
If you’d like to add new widgets or improve examples:

1. Fork this repo
2. Create a new branch (git checkout -b add-new-widget)
3. Add your widget example under the right category folder
4. Update this README.md
5. Open a Pull Request 🚀

---

📜 License

This project is licensed under the MIT License.
Feel free to use, share, and expand it.

---

💡 Final Note

This repo is meant to be a reference and learning playground.
Explore, break things, fix them, and learn — because that’s the best way to master Flutter. 🐦✨