App Design II - Task 3: Interaction Design
16/6/2025 - 7/7/2025
Edwin Choo Quan Rong / 0348305 / Bachelor of Design (Hons) In Creative Media
DST 61004 / Application Design II
Task 3
Task 3: Interaction Design
Fig 1.0 - Home Menu in Flutterflow
Published Web URL: https://weatherbug-app-80wdfy.flutterflow.app (ps: realized version is not responsively built for web, view mobile version for intended effect)
Process
Section 1: Constructing Figma's layout inside Flutterflow
Adjusting to Flutterflow's design elements is not as simple as Figma's drag and drop interface, allowing users to interact with elements easily. To begin designing in Flutterflow, I had to learn the main elements of its layout which consists of columns, rows, and containers.
Fig 1.1 - Stack feature usage
The way columns, rows, and containers work in Flutterflow is placed top to bottom in the order that they are added into the widget tree, making it a hurdle to my opening layout in Figma. Which is where the "Stack" widget is used, allowing the elements of columns and rows to exist together in the same space. This allows me to overlay text info over the background container instead of it being below the image container.
Fig 1.2 - Scrollable Row and Column usage
The row and column elements are used to recreate the scroll elements in Figma, made possible by utilizing the scrollable feature as displayed above for rows (scrollable vertically for columns). Inside the row, by adding containers with elements inside and applying padding to space them out evenly, a scrollable section to check the "Hourly Forecast" section is made. The same is done for the "Weekly Forecast" section.
Fig 1.3 - GridView usage
An effective way to display modular blocks inside Flutterflow is using the GridView widget. On the image's right side under GridView Properties, adjusting its elements allows me to manipulate the spacing between containers in the gridview. As for the elements inside the container itself, I used the combination of rows under a stack to display the info inside the container as close as possible to its Figma variant, adjusting the padding to best fit the spacing in Flutterflow.
Fig 1.4 - Nav Bar usage
The navigation bar is edited through the styling and properties tab. Styling simply changes the color of its elements, while the properties panel edits text and icon selection and size.
Fig 1.5 - Actions usage: Navigate To
The original design in Figma uses the cloud icon using prototype features of clicking to navigate to another page containing the weather alert details. A similar simulation is done here in Flutterflow to navigate to the weather alert page.
The Actions tab allows me to edit the action type, transition effect and speed similar to the prototype feature in Figma.
Fig 1.6(A) - Alert Pop-up feature
To simulate the alert pop-up feature I had in Figma, this "Alert Dialog" Action in Flutterflow allows me to display pop-ups like in the image shown above. The text can be edited but as of this project's task, I had not found a way to manipulate the design of the pop-up.
Fig 1.6(B) - "Alert Dialog" Action feature
Underneath Actions bar, the Alert Dialog feature allows me to edit the text details of the pop-up, which is activated in the test run on tap. On double tap, it allows me to navigate back to the main home menu of the weather app to simulate as if users had dismissed the alert notice. This is done to sidestep the alert dialog function as its "Confirm Text" function does not allow for any navigation back to the main page, at least at the current point of my research using this function.
Video Presentation
Fig 2.0 - Video Showcase
Fig 1.0 - Home Menu in Flutterflow
Published Web URL: https://weatherbug-app-80wdfy.flutterflow.app (ps: realized version is not responsively built for web, view mobile version for intended effect)
Process
Section 1: Constructing Figma's layout inside Flutterflow
Adjusting to Flutterflow's design elements is not as simple as Figma's drag and drop interface, allowing users to interact with elements easily. To begin designing in Flutterflow, I had to learn the main elements of its layout which consists of columns, rows, and containers.
Fig 1.1 - Stack feature usage
Fig 1.2 - Scrollable Row and Column usage
Section 1: Constructing Figma's layout inside Flutterflow
Adjusting to Flutterflow's design elements is not as simple as Figma's drag and drop interface, allowing users to interact with elements easily. To begin designing in Flutterflow, I had to learn the main elements of its layout which consists of columns, rows, and containers.
Fig 1.1 - Stack feature usage
The way columns, rows, and containers work in Flutterflow is placed top to bottom in the order that they are added into the widget tree, making it a hurdle to my opening layout in Figma. Which is where the "Stack" widget is used, allowing the elements of columns and rows to exist together in the same space. This allows me to overlay text info over the background container instead of it being below the image container.
Fig 1.2 - Scrollable Row and Column usage
The row and column elements are used to recreate the scroll elements in Figma, made possible by utilizing the scrollable feature as displayed above for rows (scrollable vertically for columns). Inside the row, by adding containers with elements inside and applying padding to space them out evenly, a scrollable section to check the "Hourly Forecast" section is made. The same is done for the "Weekly Forecast" section.
Fig 1.3 - GridView usage
An effective way to display modular blocks inside Flutterflow is using the GridView widget. On the image's right side under GridView Properties, adjusting its elements allows me to manipulate the spacing between containers in the gridview. As for the elements inside the container itself, I used the combination of rows under a stack to display the info inside the container as close as possible to its Figma variant, adjusting the padding to best fit the spacing in Flutterflow.
Fig 1.4 - Nav Bar usage
The navigation bar is edited through the styling and properties tab. Styling simply changes the color of its elements, while the properties panel edits text and icon selection and size.
Fig 1.5 - Actions usage: Navigate To
The original design in Figma uses the cloud icon using prototype features of clicking to navigate to another page containing the weather alert details. A similar simulation is done here in Flutterflow to navigate to the weather alert page.
The Actions tab allows me to edit the action type, transition effect and speed similar to the prototype feature in Figma.
The Actions tab allows me to edit the action type, transition effect and speed similar to the prototype feature in Figma.
Fig 1.6(A) - Alert Pop-up feature
To simulate the alert pop-up feature I had in Figma, this "Alert Dialog" Action in Flutterflow allows me to display pop-ups like in the image shown above. The text can be edited but as of this project's task, I had not found a way to manipulate the design of the pop-up.
Fig 1.6(B) - "Alert Dialog" Action feature
Underneath Actions bar, the Alert Dialog feature allows me to edit the text details of the pop-up, which is activated in the test run on tap. On double tap, it allows me to navigate back to the main home menu of the weather app to simulate as if users had dismissed the alert notice. This is done to sidestep the alert dialog function as its "Confirm Text" function does not allow for any navigation back to the main page, at least at the current point of my research using this function.
Video Presentation
Fig 2.0 - Video Showcase
%20-%20Edwin.jpg)
Comments
Post a Comment