/flutter_viz

FlutterViz is a visual UI builder built using Flutter. It allows developers to design stunning Flutter UIs with a drag-and-drop interface, export clean Dart code, and accelerate the development process.

Primary LanguageDartOtherNOASSERTION

FlutterViz UI Builder (Open Source)

FlutterViz is a visual UI builder built using Flutter. It allows developers to design stunning Flutter UIs with a drag-and-drop interface, export clean Dart code, and accelerate the development process.

🚀 This open-source project aims to empower developers by providing a free and extensible visual Flutter UI builder.

Watch on YouTube


✨ Features

  • 🔧 Drag-and-drop editor to build Flutter UIs visually
  • 📦 50+ Built-in Flutter widgets
  • 🎨 Real-time property customization (padding, color, font, etc.)
  • 💾 Export clean, readable, and production-ready Dart code
  • 📱 Mobile-first layout builder
  • 💡 Light and fast, optimized for performance
  • 🌍 Cross-platform (Web, Desktop)

🔧 Installation

🚀 Run Locally

  1. Clone the repository
git clone https://github.com/iqonic-design/flutter_viz.git
cd flutterviz

🤝 Contributing

We welcome contributions from everyone! Whether you're fixing bugs, improving documentation, or adding new features — your help is appreciated.

📌 Getting Started

  1. Fork the repository to your GitHub account.

  2. Clone your forked repository:

    git clone https://github.com/your-username/flutterviz.git
    cd flutterviz
  3. Create a new branch with a descriptive name:

    git checkout -b feature/your-feature-name
  4. Make your changes, then commit:

    git add .
    git commit -m "Add: Short description of your feature"
  5. Push to your forked repository:

    git push origin feature/your-feature-name

Tip: Keep your pull requests focused. Submit separate PRs for unrelated features or fixes.

🐛 Creating Issues

Found a bug? Have a feature request?

  1. Go to the Issues tab.
  2. Click New Issue.
  3. Choose the relevant template (e.g., Bug Report, Feature Request).
  4. Fill in the details clearly and concisely.

We use labels to organize and prioritize — be sure to use appropriate tags when possible.

📤 Submitting Pull Requests

Before submitting a pull request:

  1. Ensure your branch is up to date with the latest main:

    git pull origin main
  2. Test your changes and ensure they meet the project's coding standards.

  3. Create a pull request:

    • Push your branch to GitHub
    • Navigate to the original repo
    • Click Compare & pull request
    • Add a clear title and description explaining your changes
  4. Reference related issues, if any:

    Closes #issue-number
    

Our team will review your PR and provide feedback or suggestions. Please be responsive and respectful during the review process.

⭐ If you find this project useful, don't forget to star the repo and share it!