Flutter is Google’s UI toolkit that has gained high popularity in recent years with its cross-platform application development capabilities. It is designed to build natively compiled applications for multiple platforms such as Android, iOS, desktop, and embedded devices from a single codebase.
It is written in Dart language and designed by Google for client development. Also, it can be used to build server and desktop applications. Though it’s a young language its tools are stable and provide a smooth development experience.
In this post, I am going to explain how to create a Flutter application using DhiWise- A developer-centric platform for building web and mobile applications faster without compromising on the code quality.
To start building the Flutter application with DhiWise, first, you need to create a project on the DhiWise platform. Click Add project as shown in the snippet below. It will redirect you to the next screen where you can add the Project name.
Here you can add your desired project name and create a new project.
DhiWise currently provides support for six technologies that include Node, Android(Kotlin), React Admin Panel(React), Flutter, Laravel, and iOS(Swift). Select Flutter from the available technologies to create a flutter app.
Next, you can start creating a flutter application using these three options
1. Converting your Figma, Sketch, or Adobe XD design to Flutter code.
Here in the next step, you need to fetch Your Figma design. If you have sketch or Adobe XD design, you can upload it on the platform. DhiWise will convert your Adobe XD or Sketch to Figma design. To fetch Figma design, you will require Figma File ID and a Figma token.
2. Ready to use App templates
If you don’t have a design to use, there is another option that DhiWise provides, ready-to-use app templates for different applications.
3. Pick screens from the DhiWise screen library
Another option DhiWise provides is Screen Library, where you can pick an individual screen of your choice as shown in the snapshot below.
Once you enter Figma ID and Figma token while creating an application, all the screens in your Figma design with prototyping will be fetched and displayed on the interface.
In the following screenshot, you can see the screens of the Food delivery app.
On this page, you can search and manage your app screens, set up splash screens, check the detailed view of the screen, and also create action and view for each screen.
Furthermore, if you update your design or add a screen in Figma, simply refresh your screen with the refresh button, it will be updated on the DhiWise. The updated screen views, actions, edit history can be seen under the Summary section.
To see your screen component click on the Detail view. The screen components will be auto-detected and highlighted in the red box.
When you click on the screen component, you will find three options,
Dhiwise identifies the view components and attaches the respective code for each. If the view components are misinterpreted, you can make the necessary changes.
With the create action option, you can map out the application flow. Here you can create the following four actions,
DhiWise enables you to add action on create method for all screens. Here, you can add Three actions i.e Navigation, show alert, and API integration.
Currently, the DhiWise Flutter app builder supports only the On Ready method, the support for other methods i.e On Init, On Update and On Close is scheduled to be released soon.
To create an API you can either upload a file from the existing postman collection or add new APIs manually with the help of DhiWise API Panel.
To create a new API just click on the Add new API, it will open the following page where you can manage your REST API call code.
To create an API select from the API methods i.e POST, GET, PUT, DELETE, PATCH, HEAD, OPTIONS, PURGE, LINK, and then enter the request URL.
Next, in API integration you can set header configuration, add query parameters, add API request body.
Once, you have created an API method for each API, you can check, edit and delete any API methods. The created APIs can be accessed and managed while creating action- API integration for the screen components.
Furthermore, You can manage your general application setting. Here in the general setting, you can edit your application details, and in the advance setting, you can archive or delete the application.
Finally, once you have done managing screen components, click on a Build app, which will generate application code.
The generated code will look like this,
The generated code can be directly downloaded to your device, reviewed, and also synchronized with the GitHub and GitLab repository.
This is how you can use DhiWise Flutter app builder to quickly create a Flutter application. Not only that, DhiWise is coming up with new functionalities such as Firestore integration, Product flavors, Constants, workflow builder, and more.
To know more about DhiWise Flutter app builder and its upcoming releases check out our Flutter app builder page.
For detailed information about using the Flutter app builder, watch a webinar on “Create a Flutter app in no time using DhiWise. ”
Flutter is a popular technology for building cross-platform applications from a single codebase. DhiWise is created to speed up the process of app development by eliminating the boring and repetitive tasks giving extra freedom to developers’ creativity to build amazing apps.
With its features, developers can efficiently collaborate with the team and build a quality app in weeks with the full flexibility to view and update the code at any time.
So, if you are going to build your next app try DhiWise– An intuitive and developer-friendly platform to build a production-ready app faster.
