Full Transcript

Dashboard The first thing you see when you log in to FlutterFlow is the Dashboard. It provides a centralized location for managing projects, such as creating new ones, searching, deleting, and duplicating project. In addition, the dashboard allows you to set the desired theme, whether dark or light...

Dashboard The first thing you see when you log in to FlutterFlow is the Dashboard. It provides a centralized location for managing projects, such as creating new ones, searching, deleting, and duplicating project. In addition, the dashboard allows you to set the desired theme, whether dark or light, for easy viewing. The dashboard enables easy access to organizational resources, enabling team members to collaborate and work together seamlessly. Furthermore, the dashboard is integrated with a marketplace, allowing users to browse and download widgets, templates, and plugins. You can also get links to various resources that can help you build apps using FlutterFlow. Your account information and plan details are also accessible from this page. Dashboard 1. Projects This section displays the projects you have created in FlutterFlow. You can easily navigate to any of them from here. Use the overflow menu () to duplicate, delete, leave the project, or open the project in a new browser tab. When you duplicate a project containing the Firebase setup, you will need to delete the config files in your duplicated project and complete a new for your project. 2. Dark/Light mode switch The Dark/Light mode switch allows you to choose between a light and dark color scheme for our app builder. 3. Search From here, you can search for your project. 4. Filter projects You can use this dropdown menu to filter your projects based on their privacy settings. You can filter projects that are marked as private, shared by you, or shared with you. 5. Add project label From here, you can create and add a label to projects, providing a quick and organized way to classify and identify projects based on their characteristics, purpose, or status. To add a label, simply click the three dots option menu on the project tile, select Add Label, and then click on the label you want to set. Later, you can search and filter the projects based on the labels. 6. Create a new project For creating a new project, you can use the + Create New button. Learn more about creating a new project. 7. Marketplace Enhance your FlutterFlow app effortlessly with the FlutterFlow Marketplace; access pre-built components and templates created by other users for seamless integration of new functionalities. 8. My organization You can share custom code, assets, design systems, and APIs between your team users and across projects. 9. Resources You will find various useful links that can help you while building apps on FlutterFlow by clicking on the Resources button. Video tutorials are extremely helpful for learning about any concept, and feel free to use the community if you face any issues. A community forum requires an account, which we'll auto-create when you click on the 'FlutterFlow Community' tile and redirect you to the forum. However, if you wish to use a different password for the forum account, you can go to forum settings and click 'Forget Password.' 10. Account This is helpful if you want to take a look at your account information, upload a profile picture, reset your password, see your referrals, or delete your account. 11. Plan info Here you see the name of your current plan and also upgrade to access additional benefits. 12. Logout You can use this button to safely log out from your FlutterFlow account. FlutterFlow Marketplace Add new functionality to your app in seconds! The FlutterFlow Marketplace features user built components and templates that you can add directly to your FlutterFlow project. These items allow you to add functionality that is not currently available or easy to build in FlutterFlow. ​​How to add a marketplace item to your project 1. Open The FlutterFlow Marketplace To add a Marketplace Item to your project, head to your FlutterFlow dashboard and select Marketplace. Tip: you filter by item type (e.g., Template Apps) or use the search bar. You can click on each Marketplace item to learn more about the item. Important: the icons under the item name indicate what platforms the Marketplace item supports. 2. Add an item to your FlutterFlow project To add a Marketplace item to your project, select + Add To Project and then select the project you want to add your item to. Submit a marketplace item for review Important Considerations For Marketplace Items Marketplace items should provide functionality that is not currently available within FlutterFlow, or that is not easily buildable. Marketplace submissions should be tested on FlutterFlow and locally on all supported platforms to ensure the item works without issues or errors. Projects with errors can not be submitted for approval. Prior to submitting your Marketplace item, please ensure that your item does not contain any sensitive information. This includes but is not limited to, Private API Keys and sensitive or private data. As a Marketplace Seller, you are responsible for ensuring that your submission does not violate another party’s intellectual property. 1. Set your project as a marketplace project Marketplace items should belong to projects that are specifically made to publish marketplace items (i.e., they should not be inside of a production project). In order to submit an item for consideration, the item must be inside of a project that has been Set For Marketplace. A project that is set for Marketplace can not be deployed. To Set A Project For Marketplace: Select the Share Icon from the top of the screen Select Create New Item > Set For Marketplace > Yes Tip: You can clone an existing project and then set it as a Marketplace Project. 2. Fill out the marketplace item listing form Below is an overview of what is needed to create your Marketplace Item: Tip: If you aren't ready to submit your item, select Save As Draft to continue editing your submission later. Cover Photo The Cover Photo should be 1200x800 pixels and help the user to understand the purpose of the Marketplace item. Please do not include the FlutterFlow logo in your cover image. Name The item name should be unique and help the user to understand the purpose of the Marketplace item. Description The description should give an overview of the key features, helping users decide if the item will meet their needs. If the item contains any 3rd party paid services, this should be included in the description. Marketplace Item Type In the first version of our Marketplace, three types of items can be submitted: Template apps: Contain multiple screens. Page or Component: Individual Page or Component Custom Code: Custom Widgets, Functions, or Actions If you would like to submit multiple unrelated custom code items (e.g. 2 custom widgets), please create and submit a separate project for each individual item. Marketplace submissions containing multiple unrelated custom code items will not be approved and will need to be resubmitted. Template Tags Template Tags help users sort and filter items. If the tags listed don't match your item, enter your desired search terms under Keyword. Supported Platforms You can submit Marketplace items for Android, iOS, and Web (or all three!). Please make sure to test on all supported platforms to ensure the item works without issues or errors. Run Mode URL A Run Mode link of your Marketplace allows users to better understand how your item looks and works. If your Run Mode link includes authentication functionality, please add a demo login button that uses Anonymous sign in. Documentation URL If there are complex installation or usage instructions, we highly recommend creating a documentation link for your Marketplace item. This can be written (e.g., Notion Doc, Google Doc) or video (e.g., YouTube, Loom). Include Contact Information To include Contact Information, select the toggle. We recommend creating a support email for users to contact you with questions and issues. There will also be a Community post created for users to ask questions about each Marketplace item. 3. Submit your marketplace item for review Once your Marketplace item is complete, you can submit it for review. To Submit A Marketplace Item For Review: Fill out the items in the Marketplace Item Submission Form Select Submit For Approval Your item will shown as Pending under your Marketplace Items: 4. Edit an approved marketplace item At this time, it is not possible to edit an Approved Marketplace Item. We are working to add this functionality soon. My Organization From here, you can manage billing for your team, edit projects simultaneously, and share code, design systems, APIs, and assets. This makes collaboration between team members much easier and helps to keep everyone on the same page. Even if you don't have team members, you can still benefit from this feature by using it to share resources between your own projects, keeping your development process organized and efficient. With the ability to easily collaborate and share resources, you can create amazing apps faster than ever before. Team code Imagine you are working on multiple apps. As the project progresses, you realize that some of the custom code can be used across multiple apps. With Team Code, you can create Custom Functions, Widgets, Actions and that will be shared between your team members and their projects. This helps you reduce building time, effort, and costs by allowing members to reuse existing code. Furthermore, shared code is easier to maintain as changes only need to be made in one place. Here's how you can share the custom code: Navigate to My Organization > Team Code. Click + Add and select what you want to create and share. See how to create Custom Function, Custom Widget, and Custom Actions. To use the shared custom code, open the project in which you want to use the code and click on Custom Functions from the Navigation Menu. Click + Add and select from the Team Function, Team Widget, and Team Action. A pop will open displaying the list of custom code names, click on it to add it to your project. You can't edit the shared custom code directly in your project. To do so, you can duplicate it and modify it as per your requirement. Team media assets Your team might be working on multiple projects simultaneously, and they may require the same icons, images, audio files, and other graphic resources for each project. If each project has its own set of assets, the team will have to upload the same resources multiple times. However, if the team shares their assets library between their projects, they can save time, increase productivity, and ensure consistency in design. Moreover, if any changes need to be made to an asset, the team can update it in one place, and the changes will reflect across all projects. Here's how you can share the media assets: Navigate to My Organization > Team Media Assets and click Upload Media. The uploaded media will be accessible via Project/Madia Assests from the Navigation Menu. The shared media assets will have the 'teams' icon at the bottom right side. Team design library A company may have a website, a mobile app, and a desktop app, each with its own user interface and user experience. In such a case, rather than creating the same UI configuration for each project, creating a shared design system can help speed up the work and ensure consistency across all projects. A design system includes colors, typography, fonts, icons, app assets, a nav bar, and an app bar, as well as pre-designed UI components such as buttons and text widgets. Here's how you can share the design library: Navigate to My Organization > Team Design Library and click + Create New. Provide a name to the Design System Project. A new project will open where you can configure the Theme, NavBar & AppBAr, and Assest. To use the shared design library, open the project in which you want to use the design system and navigate to Theme Settings (navigation menu) > Design System. Click on the No Design System Selected. A pop will open displaying the list of the shared design systems, click on it to add it to your project. Team API library Imagine a company that has multiple mobile apps for different purposes, such as a shopping app, a loyalty app, and a delivery app. All these apps require similar functionalities, such as user authentication, product information, and order management. However, each app is developed by a different team. To ensure consistency and efficiency across all the apps, the company decides to create a centralized API that can be used and modified as per the team's requirements. Sharing API calls also allows for easier testing and debugging, as any issues can be traced back to a single source. Here's how you can share APIs: Navigate to My Organization > Team API Library. Click on the + button and select Create API Call. To use the shared API, open the project in which you want to use the API and click on API Calls from the Navigation Menu. Click + and select Use Team API. A pop will open displaying the list of shared APIs, click on it to add it to your project. You can't edit the shared APIs directly in your project. To do so, you can duplicate it and modify it as per your requirement. Add domains We allow you to add more custom domains and share them with all team members. This makes it simple to connect domains to the right projects and collaborate seamlessly. To do so, click on Add Domains (under My Organization).