diff --git a/docs/intro/clone-project.png b/docs/intro/clone-project.png deleted file mode 100644 index 61572279..00000000 Binary files a/docs/intro/clone-project.png and /dev/null differ diff --git a/docs/intro/image.png b/docs/intro/image.png deleted file mode 100644 index 55b7f5fc..00000000 Binary files a/docs/intro/image.png and /dev/null differ diff --git a/docs/intro/imgs/clone-project.avif b/docs/intro/imgs/clone-project.avif new file mode 100644 index 00000000..c4acc3bc Binary files /dev/null and b/docs/intro/imgs/clone-project.avif differ diff --git a/docs/intro/imgs/final-quick-start.avif b/docs/intro/imgs/final-quick-start.avif new file mode 100644 index 00000000..6b1f75cc Binary files /dev/null and b/docs/intro/imgs/final-quick-start.avif differ diff --git a/docs/intro/layers.avif b/docs/intro/imgs/layers.avif similarity index 100% rename from docs/intro/layers.avif rename to docs/intro/imgs/layers.avif diff --git a/docs/intro/quickstart.md b/docs/intro/quickstart.md index 94efa39f..b96ccd20 100644 --- a/docs/intro/quickstart.md +++ b/docs/intro/quickstart.md @@ -2,50 +2,63 @@ slug: /quickstart title: Quickstart Guide tags: [] -description: Jumpstart your FlutterFlow journey with our Quick Start Guide. Learn to build a dynamic app and explore essential FlutterFlow features like UI building, state management, and app execution. +description: Build your first interactive FlutterFlow app by creating a layout, customizing its style, managing state, and testing the result. --- -# **Quick Start Guide** +# Quickstart Guide -Welcome to the FlutterFlow Quickstart Guide! This guide is tailored for those eager to dive right into building their first FlutterFlow application. Here, you'll build a screen that lets users adjust the quantity of a product before adding it to their shopping cart. +Welcome to the FlutterFlow Quickstart Guide! This guide introduces the basic FlutterFlow concepts through a short, hands-on exercise. You'll build a product quantity selector that allows users to adjust the quantity of an item before adding it to their shopping cart. -This quickstart is designed to be straightforward and accessible, introducing you to basic FlutterFlow concepts quickly. For those seeking a deeper understanding of FlutterFlow's capabilities, we recommend reading through the FlutterFlow concepts pages. - +:::info[Before You Begin] +To complete this guide, you need: -Below is a preview of what your app will look like once completed: +- A [**FlutterFlow account**](https://app.flutterflow.io/). +- A web browser. +- About 15-20 minutes. +::: + +Below is a preview of what your completed app will look like: ![Quick start demo app](../../static/img/flutterflow-quick-start-app-demo.avif) -## **What you'll learn** -- Creating layouts (add widgets) -- Adding interactivity to UI elements -- Handle app behavior in response to user interactions (manage state). -- Running your app +## What You'll Learn + +- Build a layout with widgets. +- Customize widget styles. +- Add interactivity with actions. +- Manage page state in response to user input. +- Run and test your app. -
-The steps to build the app are as follows: +Follow these steps to build the app: -1. [Clone or create project](#1-clone-or-create-project) -2. [Building UI](#build-ui) -3. [Customize style](#customize-style) +1. [Clone the starter project](#clone-project) +2. [Build the UI](#build-ui) +3. [Customize styles](#customize-style) 4. [Manage state](#manage-state) 5. [Run the app](#run-app) -## 1. Clone or create project +## 1. Clone the Starter Project {#clone-project} -To kick off your project, the first step is to [create a new project](../resources/projects/how-to-create-find-organize-projects.md#how-to-create-a-project). However, to make things easier, we've already created a starter app for you. Simply open [this link](https://app.flutterflow.io/project/f-f-quick-start-app-umu392), click the '**Clone**' button, and the project will be instantly added to your account. +This guide uses a prepared starter app so you can focus on building the interaction. Open the [FlutterFlow Quickstart project](https://app.flutterflow.io/project/f-f-quick-start-app-umu392), click **Clone**, and the project will be added to your account. -![clone-project.png](clone-project.png) +To begin with a separate project instead, see [Create a Project](../resources/projects/how-to-create-find-organize-projects.md#how-to-create-a-project). -After cloning the project, you’ll see a page with product images and descriptions. You’ll add a feature that allows users to update the product quantity. +![clone-project.avif](imgs/clone-project.avif) -![zero-to-final.png](../../static/img/zero-to-final.png) +After cloning the project, you’ll see a page with product images and a description. You’ll add a feature that allows users to update the product quantity. -## 2. Building UI {#build-ui} +![final-quick-start.avif](imgs/final-quick-start.avif) -In this section, we'll see how to build the user interface (UI) for this feature. This involves creating a layout and adding various widgets to our page. +## 2. Build the UI {#build-ui} -To build the UI: +Build the quantity control by combining layout and display widgets in the product page's Widget Tree. + +1. Open the product page and locate the content below the product description. +2. Add a **Container** to hold the quantity control. +3. Add a **Row** inside the Container. +4. Add a **Text** widget for the "Quantity" label. +5. Add controls for decreasing the quantity, displaying its current value, and increasing it. +6. Arrange the widgets so the label appears on the left and the quantity controls appear on the right.
-### 4.2 Update state variable +### 4.2 Update the State Variable + +Use actions to change `quantity` when a user selects the increase or decrease control: -To update the state variable, we will need to add actions. Actions are essentially functions that are triggered by the user's interaction, in this case, by clicking either the "Increase" or "Decrease" buttons. You can add actions to your buttons via the [Actions Panel](../resources/control-flow/functions/action-flow-editor.md). +1. Select the increase control and add an **On Tap** action. +2. Choose **Update Page State**, select `quantity`, and set it to its current value plus `1`. +3. Select the decrease control and add another **On Tap** action. +4. Update `quantity` to its current value minus `1`. +5. Confirm that both controls update the Text widget bound to `quantity`. -Here's how to add actions to your buttons and update the state variable: +:::info +See the [**Action Flow Editor**](../resources/control-flow/functions/action-flow-editor.md) and [**Update Page State**](../resources/ui/pages/page-lifecycle.md#update-page-state-action) guides for more details. +:::