Skip to main content

Quickstart Guide

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.

Before You Begin

To complete this guide, you need:

Below is a preview of what your completed app will look like:

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.

Follow these steps to build the app:

  1. Clone the starter project
  2. Build the UI
  3. Customize styles
  4. Manage state
  5. Run the app

1. Clone the Starter Project​

This guide uses a prepared starter app so you can focus on building the interaction. Open the FlutterFlow Quickstart project, click Clone, and the project will be added to your account.

To begin with a separate project instead, see Create a Project.

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

To learn more, see Building Layouts and the Widget Overview.

3. Customize Styles​

Next, style the quantity control to match the rest of the product page. Use the Properties Panel to adjust each selected widget.

  1. Adjust the spacing and alignment of the Row.
  2. Select the Container that holds the quantity control and adjust its background color, padding, size, and corner radius.
  3. Style the "Quantity" label and value so they are easy to read.
  4. Customize the decrease and increase controls with suitable icons, colors, and sizes.
  5. Compare the result with the completed preview and make any final visual adjustments.

4. Manage State​

Once your UI is set up, make your app interactive by adding a page state variable. A state variable stores data that can change as users interact with the page. In this exercise, it stores the current product quantity and updates the displayed value when users select the increase or decrease control.

4.1 Add a State Variable​

Add a page state variable that will hold the current quantity value. Here's how to add and use the state variable:

  1. Select the page's root widget in the Widget Tree.
  2. Open the page's state management settings and add a new field.
  3. Name the field quantity, set its data type to Integer, and give it an initial value of 1.
  4. Select the Text widget that displays the quantity.
  5. Set its value from Page State > quantity.
info

To learn more about this workflow, see Creating a Page State.

4.2 Update the State Variable​

Use actions to change quantity when a user selects the increase or decrease control:

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

See the Action Flow Editor and Update Page State guides for more details.

5. Run the App​

Use Test Mode to try the interaction and see changes quickly. Test Mode runs a web version of your app and can automatically sync changes from the FlutterFlow builder.

  1. Select Test Mode from the left-side menu.
  2. Wait for the test session to start.
  3. Click or tap the increase and decrease controls and confirm that the displayed quantity changes.

Run Mode creates a fully functional build that can include live data and be shared with project members. Because it creates a new build, it typically takes longer and does not support hot reload.

Congratulations! You've built your first app with FlutterFlow.

Verify the Result​

Before moving on, confirm that:

  • The initial quantity is displayed correctly.
  • The increase control raises the quantity.
  • The decrease control lowers the quantity.
  • The layout remains aligned as the value changes.
  • The interaction works in Test Mode.

Next Steps​

Continue learning with these guides:

Need Help?​

If you're experiencing any issues with the app, review the steps above and verify that each widget and action is configured as described.

For additional help, ask a question in the Community Forum or contact FlutterFlow Support.

Was this article helpful?

Edit this page
Last updated on by Pinkesh