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

‍

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.

‍

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.

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.

‍

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.

‍

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.

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.