Skip to main content

How to create a Scroll View.

This doc goes over how to implement a scroll view by first:

  • How to prepare a Scroll View using Figma
  • Implementing the Scroll View in the Parabeac Figma to Flutter code generation

How to prepare a Scroll View using Figma

To create a scrolling view in a screen in Figma, it is important to name the frames with a <custom>tag (Example: foo_scrollview<custom>). If you know how to create your own figma project, scroll-down to the next section.

Let’s design a checkout-screen for better understanding using auto-layout and plug-ins. You can download images and insert them from your desktop or try to insert pictures or emoji using plugins.

Step 1: To create the top bar, click on the pen like drawing tools button from the Figma tool bar, draw the menu button, cart emoji can be copy/pasted, and Checkout is written using Text from the Figma Menu.

checkout1

Step 2: Place all in a frame(#). By selecting frame in the Figma menu or right click and select frame selection.

Step 3: To create the following component, create a square shape, to insert picture of burger or other food items, we will use plugin.

To install Blush plugin click here.

Right click in the square, select plugin -> blush. Click on the picture and the picture will be automatically filled and adjusted in the square. You may also try dropping pictures in various shapes. Add in the text and everything, then click on the diamonds shape in the menu to create component(Food card). Add a couple of different food cards in the frame.

checkout2

Select the frame and right-click to select auto-layout, this is necessary to generate a neat code.You can adjust the auto-layout settings in the right column.

Step 4: Create promo code and rest of the screen as follows and you may apply auto layout settings to the buttons.

checkout3

Step 6: Right click for frame selection. Note that the scrolling effect can be given to a frame and not components individually. Make sure to rename the frame followed by <custom>. For example: scrollview<custom>. (Note: We don't support the use of prototyping to understand scrolling as we have found that there isn't enough information to interpret effectively.)

checkout4

Implementing the Scroll View in the Figma to Flutter code generation using Parabeac

To convert Figma to Flutter apply the steps here till step6.

After you have used parabeac Nest, git pull the repository. Or if you have used Parabeac Core using

pcheck

the code files has been generated in your project folder as follows

pcheckout

Now, if you see under the screens folder the checkout_screen file has all the code needed to paint your screen. This conversion from Figma to Flutter is done through Parabeac automatically for you. You will now use the class name(CheckoutScreen), and create it’s object in the main.dart file to use the functions and methods of the CheckoutScreen class. pcheckout1 Navigate to lib>controller/tag>scrollview_custom.dart file. Right click and refractor the return widget, then select wrap with widget. Now, rename the widget as SingleChildScrollView. pcheckout2 Now, run the main.dart file. Congratulations for a creating scrolling view on your screen!

If you have any questions- Contact us in Discord