Creating a settings page in your FlutterFlow app

Introduction

You have a FlutterFlow app, but haven’t yet created a settings page. Every app needs a settings page to some degree. A profile page usually lets the user update information about their profile or account, but a settings page lets them update their app preferences like notifications, theme mode, currency, and more. 

Why a settings page

Most app needs a settings page. Settings pages are crucial for improving the user experience by allowing users to customize their interaction with the app. They are usually very similar across different apps, with a few variations depending on the specific needs of the app.

To help you create a settings page without starting from scratch, we have created a FlutterFlow marketplace item (see here) with a settings page that we use in most of our apps (with variations). This marketplace item includes essential settings functionalities, and we’ll go through some of them here to show you how to integrate these into your project.

Key settings to include in your app

Most settings pages will have common functionalities like the“Theme mode selector” and the “Haptic feedback” toggle. Let’s dive into the essential settings.

Theme mode selector

There are three possible theme modes: light, dark, and device.

FlutterFlow has a beautiful integration with these modes, making it extremely easy to work with. The “Set Dark Mode Settings” action allows you to toggle between these modes seamlessly. However, it is crucial to know the current state of the app’s theme mode to display it correctly to the user. This is where a “Settings” custom data type comes in handy.

And of course an app state to use it.

This object keeps track of the current state and displays it to the user. To perfectly create this feature, combine the app state setting withFlutterFlow’s built-in feature to toggle the setting.

Haptic feedback

Some users dislike their mobile phone constantly vibrating, which is why it is good practice to let them turn this off for your app. This is best done by keeping an app state “Settings” (variable of type “Settings”that is a data type) that tracks whether the user wants to receive haptic feedback.Depending on this setting, you can trigger or suppress haptic feedback in your app.

These are the two most common ones we see. However, there are more. Try to integrate those by yourself using the same method we have just shown with the haptic feedback and the theme mode! This is a great way to practice. 

On the other hand, if you just want these as soon as possible, you can check out our marketplace item and just start using these instantly!

Additional settings included in our marketplace item

• Keyboard sound (yes/no): let users toggle keyboard sounds.
• Keep screen on (yes/no): give users the option to keep the screen on for continuous display, useful for reading or navigation apps.
• Select currency view: allow users to choose their preferred currency for displaying prices, for a global audience(only implemented USD & EUR in the item, but any currency can be added easily).
• Notifications (yes/no): enable users to turn notifications on or off, giving them control over how they receive updates from your app.

Conclusion

Creating a settings page is a fundamental (final) step in developing a production ready app. It adds to the user experience by allowing users to customize their app interactions. The guide above is a perfect way to start, and hopefully it gives enough for you to finish it as well! However, if you just want a quick start, check our marketplace item here.