Getting Started: How to Set Up and Navigate Blup.

Blup
4 min readJun 15, 2024

--

Learn how to set up and navigate Blup, the powerful low-code Flutter IDE. Follow our step-by-step guide to installation, interface overview, project creation, and troubleshooting common issues.

Follow our step-by-step guide to installation, interface overview, project creation, and troubleshooting common issues.
Step-by-step guide image for installing Blup on Windows & macOS.

Blup is a cutting-edge, low-code Flutter IDE designed to revolutionize app development by simplifying the process and making it accessible to everyone. Whether you’re a seasoned developer or just starting out, Blup’s intuitive drag-and-drop interface, extensive pre-built components, and real-time collaboration tools empower you to create high-quality mobile applications with ease. This guide will walk you through the initial setup, interface navigation, project creation, and troubleshooting, ensuring you are well-equipped to start building amazing apps with Blup.

Installation and Setup

System Requirements for Blup

Before diving into Blup, ensure your system meets the following requirements:

  • Operating System: Windows 10/11, macOS 10.15 or later, Linux
  • RAM: Minimum 8GB (16GB recommended)
  • Disk Space: At least 2GB of free space
  • Internet Connection: Required for downloading and updates

Step-by-Step Installation GuideDownloading Blup

  1. Visit the official Blup website.
  2. Click on the “Download” button.
  3. Choose the appropriate version for your operating system.

Installing Dependencies

  1. Ensure you have Flutter SDK installed.
  2. Install Node.js and npm if not already installed.
  3. Verify installations using terminal commands
    (flutter --version, node -v, npm -v).

Initial Setup Configuration

  1. Launch Blup installer.
  2. Follow the on-screen instructions to complete the setup.
  3. Open Blup and sign in or create a new account.
  4. Configure your development environment by selecting your preferred settings.

Blup Interface Overview

Overview of the Blup Dashboard

Upon opening Blup, you will be greeted by the dashboard, which serves as the central hub for your projects and tools.

Key Sections and Their FunctionalitiesProject Explorer

  • Functionality: Manage and organize your projects, files, and folders.
  • Tip: Use the search bar to quickly locate specific files.
Blup — Design (UI) Drag-and-drop UI components in Blup’s design area.

Design Area

  • Functionality: Drag and drop UI components to design your app’s interface.
  • Tip: Utilize the grid and snapping features for precise alignment.
Design helps you to design stunning & creative user interfaces of the pages for your applications seamlessly.
Blup Code Editor: your Low Code IDE for Flutter app development.

Code Editor

  • Functionality: Write and edit your Flutter code with syntax highlighting and auto-completion.
  • Tip: Split the editor to view multiple files simultaneously.
It opens the Insert widget which has pre-built Blup widgets and templates ready to go that can be directly used by the user to enhance the user experience.
Image of Blup’s Insert widget which has pre-built Blup widgets.

Asset Library

  • Functionality: Access a collection of pre-built components, icons, and images.
  • Tip: Import custom assets to personalize your app’s design.

Navigating Blup

Creating a New Project

  1. Click on “Create New Project” from the dashboard.
  2. Select a template or start from scratch.
  3. Enter project details and click “Create”.

Importing Existing Flutter Projects

  1. Click on “Import Project”.
  2. Browse and select your existing Flutter project folder.
  3. Blup will automatically integrate the project.

Customizing the Workspace

  1. Rearrange panels to suit your workflow.
  2. Adjust theme settings (light/dark mode).
  3. Save workspace layouts for different project types.

Keyboard Shortcuts and Tips for Efficient Navigation

  1. Cmd/Ctrl + P: Open files quickly.
  2. Cmd/Ctrl + Shift + F: Global search across the project.
  3. Cmd/Ctrl + B: Toggle the project explorer.
  4. Cmd/Ctrl + K: Open the command palette for quick actions.

Troubleshooting Common Issues

Installation Errors and Solutions

  1. Error: Installation fails due to missing dependencies.
  • Solution: Ensure all required dependencies (Flutter SDK, Node.js, npm) are installed.

2. Error: Blup crashes on startup.

  • Solution: Update Blup to the latest version and check for compatibility with your OS.

Performance Optimization Tips

  1. Close unnecessary applications to free up system resources.
  2. Increase the memory allocation in Blup settings.
  3. Regularly update Blup and your dependencies to benefit from performance improvements.

Accessing Support and Community Resources

  1. Official Documentation: Comprehensive guides and API references.
  2. Community Forums: Engage with other Blup users for tips and support.
  3. Customer Support: Reach out to Blup’s support team for technical assistance.

By following this guide, you should now have Blup installed and be familiar with its interface and navigation. With Blup, creating Flutter apps is streamlined and efficient, making it an excellent tool for both novice and experienced developers.

--

--

Blup

Blup is a desktop app & Flutter-based IDE to create insane mobile apps (Android & iOS) with interactive UI editor & Visual Logic Builder. Visit https://blup.in/