Introduction

Social apps like Instagram often have a feature to pin images or videos to the top of a list. Similarly, many apps allow users to add images to their profiles, and it can be incredibly useful to enable them to pin their best images to the top. Additionally, a scrolling / swiping feature for image lists is a must-have for a great user experience. In this guide, we will cover how to create these two features in FlutterFlow. If you prefer, you can download our free marketplace item and implement these features in seconds.

• Showcase of the features in this blog.

Backend setup

First, let's set up the backend. This can be done in any backend you prefer. You will need a table/collection containing the following fields:

• image_url: the URL of the image.

• pinned: a Boolean field indicating if the image is pinned.

• Backend setup for the "pinned" feature.

Pinning images

Now, let's set up the pinning functionality. 

1.   Create the UI:

• Add a wrap widget to display the images.

• Query backend: fetch the images and order them by the pinned field in descending order on the wrap.

• Inside the wrap, add a stack widget.

• In the stack, add an Image widget and a conditional builder.

• Widget tree for the pinning feature.
  
  

2.   Conditional builder:

• The conditional builder changes based on the pinned field.

• If pinned is true, display an icon with a filled pin.

• If pinned is false, display an icon with an empty pin.

3.   Update document actions:

• On the filled pin icon, add an action to set the pinned field to true.

• On the empty pin icon, add an action to set the pinned field to false.

Scrolling through images

Next, let's set up the image scrolling functionality.

1.   Create a component:

• The component takes two parameters: a list of images (name it images) and an index (name it index).

• The images parameter is a list of all the images that can be scrolled.

• The index parameter is the index of the clicked image.
  
  

2.   PageView:

• The first element in the component is a PageView.

• Generate children from the images list.

• Set the initial page index to the index parameter.
  
  

3.   Stack with image and close button:

• Add a stack widget with an image widget and a close button (icon button).

• Component setup with the PageView widget.
  
  

4.   Bottom sheet action:

• On the home page, add an action to open a bottom sheet when an image is clicked.

• Use the newly created component in the bottom sheet.

• Pass the images list from the backend query to the images parameter.

• Pass the current index of the clicked image to the index parameter.

Conclusion

By following these steps, you can easily implement the pinning and scrolling features in your FlutterFlow app. These features are highly expected by users and improve the overall user experience. If you prefer not to go through the hassle of creating these features from scratch, you can download our free marketplace item and implement them in seconds!