README.md

0.11.2.mp4

This macOS demo is running in Release Mode v0.11.2 (forward x1.5).

App Creaty - Drag n Drop Mobile Development Tool

Drag n Drop Mobile Development Tool created by @dungngminh.

This project is tested with BrowserStack.

Getting Started 🤖

• This idea came from FlutterFlow.

Feature set 🔥

• ✅ Create and sync project in local.
• ✅ Sync to Supabase.
• ✅ Drag n Drop Widget:
  • ✅ Add Widget to Tree.
  • ✅ Change properties of Widget.
  • ✅ Delete Widget.
  • ✅ Wrap in child to parent.
• ✅ Widget Tree.
• ✅ Right click to Widget to show context menu:
  • ✅ Add Widget.
  • ✅ Delete Widget.
  • ✅ Wrap in child to parent.
  • 🚧 Copy Widget.
  • 🚧 Paste Widget.
  • 🚧 Duplicate Widget.
• ✅ Preview app via mobile app
• 🚧 Support State Management:
  • 🚧 Change State.
  • 🚧 Create New State.
  • 🚧 Delete State.
  • 🚧 Bind state to properties of Widget.
• 🚧 Generate source code by widgets.
• 🚧 Assets Manager.
• 🚧 Build apk file.

What I used 💪

• Adjusted Flutter Widget pure Dart classes (Thanks @rodydavis for original version).
• Recursive Algorithm (will optimize soon to fit with Composite Pattern).
• Adjusted device_frame
• Material 3.
• Supabase for BaaS solution.

Platform 📦

• ✅ Web
• ✅ Linux
• ✅ macOS
• 🚧 Windows

How can I run this app? 🚀

Linux 🐧

macOS 🍎

Windows 💻

How to run this project ❓

Install Flutter

For fvm user

This project uses Flutter 3.10.6. If you use fvm, You can install this version via fvm. Run commands in your terminal:

fvm use 3.10.6

and use Flutter via fvm using

fvm flutter [command]

---

or this if you want use 3.16.0 for global version.

fvm global 3.16.0

---

Enable desktop app and web support config:

flutter config --enable-macos-desktop
flutter config --enable-linux-desktop
flutter config --enable-windows-desktop
flutter config --enable-web

Use Flutter

Get dependencies

flutter pub get

Install pod (macOS only)

cd macos && pod install && cd ..

Generate files

flutter pub run build_runner build --delete-conflicting-outputs

Run

flutter run 

Optional: Using derry for run command (Flutter global command only)

Click to expand

I configured some commands in derry for easy to use.

Install derry

dart pub global activate derry

Get all commands

derry ls

Get dependencies

derry get

Generate files

derry runner

Prepare env configuration

Clone env.json from env.example.json. Key and value in env.example.json is:

{
  "SUPABASE_URL": "PASTE_YOUR_SUPABASE_URL",
  "SUPABASE_ANON": "PASTE_YOUR_SUPABASE_ANON_KEY",
  "SENTRY_DSN": "PASTE_YOUR_SENTRY_DSN"
}

You can create a new Supabase project with this configuration or use my configuration below:

{
  "SUPABASE_URL": "https://yznpjybdklkbnjaqgpor.supabase.co",
  "SUPABASE_ANON": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl6bnBqeWJka2xrYm5qYXFncG9yIiwicm9sZSI6ImFub24iLCJpYXQiOjE2ODE0ODc2ODAsImV4cCI6MTk5NzA2MzY4MH0.ymBej2GzwqimWqMc2pDN5a_kARhDzXMGSNtHLpItXKE",
  "SENTRY_DSN": "https://f3ce107186614265a0c9f9fc1e00f190@o4505489138450432.ingest.sentry.io/4505489139302400"
}

Run project

Use command line

Use this command to run project

flutter run --dart-define-from-file=env.json

Use VSCode configuration

You can use VSCode configuration in this to run this project.

Supported Widgets 🤖

You can check full list of supported widgets and properties in here. This below is some widgets that supported:

• Text
• Scaffold
• Column
• Row
• Container
• ElevatedButton
• Image: AssetImage, NetworkImage
• Stack
• SizedBox
• ListView
• TextFormField
• Padding
• ... to be continue

Contributors 🌟

Dung Nguyen Minh 💻 📖 🐛