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

Drag n Drop Mobile Development Tool created by @dungngminh.

This project is tested with BrowserStack.

• This idea came from FlutterFlow.

• ✅ 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.

• 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.

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

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

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 

dart pub global activate derry

derry ls

derry get

derry runner

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"
}

Use this command to run project

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

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

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

Dung Nguyen Minh 💻 📖 🐛