diff --git a/docs/intro/ff-ui/imgs/Warning-and-errors.avif b/docs/intro/ff-ui/imgs/Warning-and-errors.avif deleted file mode 100644 index 1505789b..00000000 Binary files a/docs/intro/ff-ui/imgs/Warning-and-errors.avif and /dev/null differ diff --git a/docs/intro/ff-ui/imgs/command-palette.avif b/docs/intro/ff-ui/imgs/command-palette.avif index c31b1392..e9e6f149 100644 Binary files a/docs/intro/ff-ui/imgs/command-palette.avif and b/docs/intro/ff-ui/imgs/command-palette.avif differ diff --git a/docs/intro/ff-ui/imgs/keyboard-shortcut.avif b/docs/intro/ff-ui/imgs/keyboard-shortcut.avif deleted file mode 100644 index dca4df13..00000000 Binary files a/docs/intro/ff-ui/imgs/keyboard-shortcut.avif and /dev/null differ diff --git a/docs/intro/ff-ui/imgs/keyboard-shortcuts.avif b/docs/intro/ff-ui/imgs/keyboard-shortcuts.avif new file mode 100644 index 00000000..2f9ef202 Binary files /dev/null and b/docs/intro/ff-ui/imgs/keyboard-shortcuts.avif differ diff --git a/docs/intro/ff-ui/imgs/optimizations-UI-enhancements.avif b/docs/intro/ff-ui/imgs/optimizations-UI-enhancements.avif new file mode 100644 index 00000000..a0593f37 Binary files /dev/null and b/docs/intro/ff-ui/imgs/optimizations-UI-enhancements.avif differ diff --git a/docs/intro/ff-ui/imgs/toolbar.avif b/docs/intro/ff-ui/imgs/toolbar.avif index 25a8f344..fb92242a 100644 Binary files a/docs/intro/ff-ui/imgs/toolbar.avif and b/docs/intro/ff-ui/imgs/toolbar.avif differ diff --git a/docs/intro/ff-ui/imgs/warnings-errors.avif b/docs/intro/ff-ui/imgs/warnings-errors.avif new file mode 100644 index 00000000..7e6a9734 Binary files /dev/null and b/docs/intro/ff-ui/imgs/warnings-errors.avif differ diff --git a/docs/intro/ff-ui/toolbar.md b/docs/intro/ff-ui/toolbar.md index 78028992..7cefc8c3 100644 --- a/docs/intro/ff-ui/toolbar.md +++ b/docs/intro/ff-ui/toolbar.md @@ -1,7 +1,7 @@ --- slug: /flutterflow-ui/toolbar title: Toolbar -description: Navigate the Toolbar in FlutterFlow for efficient access to essential tools and features. This includes project management, version control, interactive help resources, and direct actions like running your app, reporting issues, and customizing your workspace. +description: Learn how to use the FlutterFlow Toolbar to access project management, version control, help, testing, and development tools. tags: [Toolbar, FlutterFlow, UI, Tools, Project Management] sidebar_position: 1 keywords: [Toolbar, FlutterFlow, UI, Tools, Project Management] @@ -9,117 +9,118 @@ keywords: [Toolbar, FlutterFlow, UI, Tools, Project Management] # Toolbar -The Toolbar, located at the top of the app builder, provides easy access to numerous tools and features. It includes options for project configuration, saving your app version, accessing help, reporting or debugging issues, viewing project comments, downloading your app code, and running your app directly in FlutterFlow. +The Toolbar, located at the top of the app builder, provides easy access to numerous tools and features. It includes options for project configuration, saving versions of your app, accessing help, reporting or debugging issues, viewing project comments, downloading your app code, and running your app directly in FlutterFlow. ![toolbar](imgs/toolbar.avif) ## Project Info -Hovering over this section reveals the essential information about your project. Here, you can easily check the project name, branch name, environment name and the current version of FlutterFlow that you're using, along with its release date. Additionally, it shows the Flutter version that your project is currently running on. +Click on the project info to view the project name, branch, environment, FlutterFlow version and release date, and the Flutter version used by the project. ## Help Menu -From here, you will get access to essential resource links that will come in handy while building your apps. +From here, you can access essential resource links that can help you while building your app. -1. **Search Docs**: If you are a paid user, we allow you to conduct a direct search from our documentation. -2. **Community Forum**: We have a vibrant [community](https://community.flutterflow.io/) of users comprising individuals who share a mutual interest in FlutterFlow. This community actively engages in discussions, knowledge-sharing, and collaborative projects centered around FlutterFlow. +1. **Search Docs**: Paid users can search the FlutterFlow documentation directly from the builder. +2. **Community Forum**: Visit the [Community Forum](https://community.flutterflow.io/) to participate in discussions, share knowledge, and collaborate with other FlutterFlow users. 3. **Feedback**: You can provide feedback and help us improve the product. -4. **Bug report**: You can submit a bug report from here. -5. **Tutorials**: You can start the tutorial for building your first app right inside FlutterFlow. -6. **FAQs and Docs**: While building your app, you might need to consult our official documentation frequently. This option will redirect you to FlutterFlow documentation. -7. **What's New?**: We want to keep you updated with all the latest features and changes that are being made in FlutterFlow. Using this option, you can directly access the updates regarding what's new in FlutterFlow. -8. **Current Status/Known Issues**: We want to keep you informed about the current status of FlutterFlow and provide updates regarding any known issues. We aim to ensure transparency and keep you in the loop about the platform's performance and potential issues. -9. **Show/Hide Chat**: You can use this option to show or hide the chat button at the bottom right of the app builder. +4. **Bug Report**: You can submit a bug report from here. +5. **Generate Bug Report Code**: Click this option to generate a unique code that helps the FlutterFlow team assess and troubleshoot your issue. Include this code when submitting a bug report. +6. **Tutorials**: You can start the tutorial for building your first app directly in FlutterFlow. +7. **FAQs and Docs**: While building your app, you might need to consult our official documentation frequently. This option opens the FlutterFlow documentation. +8. **What's New?**: View the latest FlutterFlow features, improvements, and product updates. +9. **Current Status/Known Issues**: View FlutterFlow's current system status and any known issues. +10. **Show/Hide Chat**: You can use this option to show or hide the chat button at the bottom right of the app builder. ## Keyboard Shortcuts -With keyboard shortcuts, you can perform common actions related to widgets and run your project in Test or Run mode with just a few keystrokes, saving you time and effort. Select this option to see all the shortcuts. +With keyboard shortcuts, you can perform common actions related to widgets and run your project in Test Mode or Run Mode with just a few keystrokes, saving you time and effort. Select this option to see all the shortcuts. -![keyboard-shortcut.avif](imgs/keyboard-shortcut.avif) +![keyboard-shortcuts.avif](imgs/keyboard-shortcuts.avif) ## Command Palette -The Command Palette makes it easy to find and use things in the App Builder. Open the Command Palette by clicking the search button or pressing **Cmd/Ctrl + K**. Search for anything, and to find out where it's used, click the right arrow – we'll show you every place. To directly access the item, just click on it. +Open the Command Palette by selecting the search button or pressing **Cmd/Ctrl + K**. Search for an item, then select the right arrow to see where it is used. Select a result to open it directly. ![command-palette.avif](imgs/command-palette.avif) ## AI Generation History -The **AI Generation History** panel lets you track the status of your AI-generated items. It provides a list of all previously generated pages and components, and you can easily preview them from here. +The **AI Generation History** panel lets you track the status of your AI-generated items. It provides a list of all previously generated pages and components, and you can easily preview them in the panel. ## Project Comments -This helps you leave your thoughts, opinions, questions, or feedback on a specific widget with your project team or a client. While adding a comment, you can tag users, and they will be able to respond, creating a thread of conversation. +Project Comments let you leave thoughts, questions, or feedback on a specific widget for your project team or client. While adding a comment, you can tag users, and they will be able to respond, creating a thread of conversation. :::info -To tag users, select the @ symbol and choose the project team member(s). +To tag users, select the **@** symbol and choose the project team member(s). ::: ## Project Suggestions -We scan and suggest enhancements to elevate your app's design and speed. Imagine having a personal consultant for design and performance dedicated to improving the user experience of your app. +Project Suggestions identifies opportunities to improve your app's design and performance. -**Optimizations**: We spotlight elements that may slow down your app. For example, a query on a column, unused and duplicate backend query, a widget with unbounded size, etc. +**Optimizations**: This identifies elements that may slow down your app, such as queries on columns, unused or duplicate backend queries, and widgets with unbounded sizes. -**UI Enhancements**: We offer tips for a more visually appealing and user-friendly design, like resizing a small tap target of any widget. +**UI Enhancements**: This provides tips for creating a more visually appealing and user-friendly design, such as increasing the size of a widget's tap target. :::info -You can control what kind of suggestions you would like to receive by clicking on the settings icon on the right. +You can control which types of suggestions you receive by selecting the settings icon on the right. ::: -![Optimization.avif](imgs/Optimization.avif) +![optimizations-UI-enhancements.avif](imgs/optimizations-UI-enhancements.avif) ## Project Issues -If there are any issues or warnings present in your current project that might result in a build failure or app crash, they will be displayed in this section. You can click this option to view a short description of each issue and navigate to the place where you can fix the issue by clicking on the respective issue. +This section displays errors and warnings that may cause build failures or app crashes. Select an issue to view its description and navigate to the relevant location in your project. :::tip[Errors vs Warnings] **Errors** prevent your app from compiling and running. These must be resolved in order to run the app. They can be due to missing actions, errors in custom code, incorrect data types, and so on. -**Warnings** while not preventing compilation, indicate potential issues such as incorrect rules setup or performance problems. Although it's possible to ignore warnings, addressing them can enhance the quality of your app and prevent future issues. +**Warnings**, while not preventing compilation, indicate potential issues such as incorrect rule configuration or performance problems. Although it's possible to ignore warnings, addressing them can enhance the quality of your app and prevent future issues. ::: -![Warning-and-errors.avif](imgs/Warning-and-errors.avif) +![warnings-errors.avif](imgs/warnings-errors.avif) ## Version Control -**Version Control** is a system that tracks changes to your project's files over time, allowing you to revert to previous states if needed. In FlutterFlow, you can utilize [Branching](../../testing-deployment-publishing/branching-collaboration/branching.md) to create a separate copy of your project to build or test features without affecting the main version. +**Version Control** is a system that tracks changes to your project's files over time, allowing you to revert to previous states if needed. In FlutterFlow, you can use [Branching](../../testing-deployment-publishing/branching-collaboration/branching.md) to create a separate copy of your project to build or test features without affecting the main version. ## Developer Menu -The Developer Menu provides developers with access to tools such as code viewing, GitHub integration, and source code download capabilities. +The Developer Menu provides access to tools such as code viewing, GitHub integration, and source code download capabilities. -1. **View Code**: This option lets you display the *Dart* code for all the pages of your FlutterFlow project. You can also take a look at the dependencies being used by the app here. +1. **View Code**: This option lets you view the *Dart* code for all the pages of your FlutterFlow project. You can also view the dependencies used by the app here. -2. **Connect GitHub Repo**: You can use this option to connect and upload your project to [GitHub](https://github.com/) repository. See the step-by-step guide [here](../../testing-deployment-publishing/exporting-code/push-to-github.md#connect-a-github-repo). +2. **Connect GitHub Repo**: You can use this option to connect your project to a [GitHub](https://github.com/) repository and upload its code. See [Connect a GitHub Repository](../../testing-deployment-publishing/exporting-code/push-to-github.md#connect-a-github-repo) for step-by-step instructions. 3. **Download Code**: You can download the entire codebase of the app generated by FlutterFlow using this option. -4. **Download APK**: Use this to generate a release build of your Android app. It will automatically download the `.apk` file after the building process is complete. +4. **Download APK**: Use this to generate a release build of your Android app. It will automatically download the `.apk` file after the build is complete. 5. **FlutterFlow CLI**: You can also download the code using *[FlutterFlow CLI](https://pub.dev/packages/flutterflow_cli)*. See instructions [here](../../ff-concepts/advanced/flutterflow-cli/exporting-projects.md). :::note -_Connect GitHub Repo_, _Download Code_, and _Download APK_ features requires a [**paid plan**](https://flutterflow.io/pricing). +_Connect GitHub Repo_, _Download Code_, and _Download APK_ features require a [**paid plan**](https://flutterflow.io/pricing). ::: -6. **Open in VSCode**: This option lets you open your entire FlutterFlow project in a VS Code environment, offering a richer development experience. You’ll have real-time autocomplete and error detection, easier access to existing Flutter & Dart tooling, and the ability to leverage the AI ecosystem. +6. **Open in VSCode**: This option lets you open your entire FlutterFlow project in a VS Code environment, offering a richer development experience. You’ll have real-time autocomplete and error detection, easier access to existing Flutter and Dart tooling, and the ability to leverage the AI ecosystem. 7. **Refactor Project**: This option opens your FlutterFlow project in a YAML-based file editor, allowing you to perform bulk edits more efficiently. You can search, edit, and replace values across multiple files—useful for renaming keys, updating data types, or migrating resources to a Library. Check out the [**Refactor Project**](../../resources/projects/refactor-project.md) documentation for more details. ## Share Project -You can make a project public so that others can view and clone your project. Before you share your project, make sure to remove any sensitive information. +You can make a project public so that others can view and clone your project. Before sharing your project, make sure to remove any sensitive information. :::note - You can only share projects where you are the owner. -- The share feature can be used to create Marketplace items. You can learn more about this [here](../../marketplace/index.md). +- The share feature can be used to create Marketplace items. See [**FlutterFlow Marketplace**](../../marketplace/index.md) for more information. ::: @@ -129,4 +130,4 @@ You can use this option to run your app in [Preview mode](../../testing-deployme ## Test Mode -This menu allows you to run your app in [Test](../../testing-deployment-publishing/running-your-app/run-your-app.md#test-mode) or [Run](../../testing-deployment-publishing/running-your-app/run-your-app.md#run-mode) mode. +Use this menu to run your app in [Test Mode](../../testing-deployment-publishing/running-your-app/run-your-app.md#test-mode) or [Run Mode](../../testing-deployment-publishing/running-your-app/run-your-app.md#run-mode).