Flutter

Build your own Flutter mobile feedback app with Canny in a few hours using DhiWise!

32
Saved hours
$640
Saved money
iconiconicon

Stop letting ideas slip through the cracks. Collect, and organize feedback and feature requests in a dedicated customer feedback tool. Canny helps to collect and organize feature requests to understand customer needs better and prioritize the roadmap.

The Challenge

Collect, and organize feedback and feature requests in a dedicated customer feedback tool. collect and organize feature requests to understand customer needs better and prioritize the roadmap.

The Solution

To create a single place for all customer feedback. Save time managing all the feedback while keeping customers in the loop. And to get an organized list of feedback to plan the roadmap.

Image

Steps

  1. Convert Figma to Flutter Code
  2. Select Splash Screen
  3. Constants
  4. API Integration
  5. Actions, Navigation, And Passing Arguments
  6. Camera + Gallery Permission

1. Convert Figma to Flutter Code

The Figma to Flutter feature of DhiWise generated each component with accurate Flutter UI with the required model, widgets, controller, and state management code using getX in a very structured way.

DhiWise also has a rich collection of Figma screens available, which can be used to create excellent working applications using DhiWise. Here, we had 3 screens of Figma.

The app panel had screens that were imported easily from Figma URL, and it also has a sync option to sync all changes at any time. It can be re-synced without interrupting your existing functionalities.

2. Select Splash Screen

After importing Figma, there is an option in the top right corner, where the Splash screen could be changed and sync the design from Figma.

The splash screen is the first graphical notification you receive when you visit any app. It can even appear as an introductory screen of an application. It also signifies that you have to wait for a few seconds before landing on the actual screen of the application.

A splash screen usually appears in full screen that covers the entire screen. It is used to log in visitors before getting access to the app/site, as an advertising method, allowing visitors to choose their native language or lower bandwidth version of the app/site.

Every good app uses a splash screen that gives them a unique identity. The splash screen is the first impression creator.

3. Constants

Here, the required values that were used in projects globally were stored. Here, constants are required to store ApiKey, BoardId, and AuthorId.

Image

4. API Integration

There were requirements of API cURL to perform all the operations whose documentation is available on https://developers.canny.io/api-reference.

Visit and use an existing account or create an account if it does not exist. Here, it was used as per requirements. It also requires an API that can store images uploaded by the user. To create it, visit https://www.convertapi.com/doc/upload, and import all the APIs in the project from API Runner.

Image

After importing the required cURLs, they can be integrated into the project; here, they were integrated through the “on ready” method of the Life cycle of the controller.

Image

5. Actions, Navigation, And Passing Arguments

After actions like the button click, it can be redirected to another screen using the Navigation feature of DhiWise, which also supports passing arguments in the state with Navigation. This saved more time and solved difficulties for passing, which DhiWise manages as it has a feature to bind API response with the state.

Here, DhiWise generated code provides the state passed from the previous screen using the Navigation arguments feature.

Image

6. Camera + Gallery Permission

Usually, working around images and permissions makes it complicated for many beginners. And this was exactly the case whenever capturing an image with a camera or from the gallery was concerned.

Image

Here, permission is required to upload images handled by DhiWise, which also has the functionality to bind uploaded images with API and validation.

Flutter Project which is generated through DhiWise; after a few manual business logic and after making a working application is available on GitHub; you can clone and modify the coding as per your requirement.