Are you a great fan of Flutter and want to know how to make the process of Flutter app development highly efficient and effortless?
If yes, then you have landed on the right article!
The following article explains how to quickly build a Flutter application using DhiWise’s Flutter Builder with a step-by-step guide, all without compromising on your code quality.
So, let's get started with a brief introduction to Flutter!
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 from a single codebase.
Flutter provides stable support for the following platforms.
Flutter is written in Dart language and designed by Google for client development. Though it’s a young language it is simple, highly stable, and provides a smooth development experience.
Explore more about Flutter and DhiWise capabilities with our articles
To start building the Flutter application with DhiWise Flutter Builder, you must have,
If you already have a DhiWise account, just log in to your account navigate to Dashboard, select technology as Mobile, and click New application.
Dashboard
It will then open the Create new application page where you need to add information that includes:
After entering this information click Create a new app. This will initiate the process of connecting DhiWise account to Figma and will access your Figma design file into the DhiWise platform.
Create a new app
Here you can select mobile screen or screens that you want to fetch, customize and generate code for. Once the selection is done click Submit.
Select mobile screens
Next, DhiWise will start fetching your design data from Figma. During the process, you can set up the application’s configuration.
Platform fetching design data
After the design data is fetched completely, you can see how DhiWise auto-identifies widgets and the auto-setup actions in your application.
Auto-identified widgets and auto-setup actions
The platform allows you to set up the splash screen and the screen next to the splash screen as shown in the snap below.
Set up splash screen and the screen next to splash screen
Next, you can see the screen list page, where you can search and configure screens, delete them, and export code for single or multiple screens. Also, you can edit the screen name and view the associated files with the screens.
Screen list
The Flutter Builder allows you to create actions (Such as API Integration and Navigation) onReady method. Also, you can Sync the Figma design changes for single or multiple screens all from the platform.
Create action and sync Figma design changes
Moreover, you can choose and customize components and styling as shown below.
Customize components and styling
API integration feature in DhiWise Flutter Builder allows you to Add, View, Edit, and Delete APIs. With the platform you can either import Postman or Swagger files or you can Create a new API using API Runner.
API Integration
Constant file in the application gives you easy access to the values which are globally used in the app. With the platform, you can create and manage constant files.
Add Constant
Next, you can manage your Flutter application setting, which allows you to change,
Change the application name, Icon, bundle ID, and Package name, and under the advanced setting you can delete the application.
General setting
With GitHub or GitLab integration you can automatically push your application code to the repository and share it with the other team members, and create a Pull Request in your repository every time you commit new changes.
GitHub and GitLab integration
With the support for VS Code, Android Studio, & IntelliJ IDEA, you can easily sync the project in your favorite IDE. You just need to install the plugin in your IDE, then copy-paste the token into the plugin to successfully sync the project in your IDE.
Code synchronization
With the Screen setting, you can integrate your custom LottieFiles loader into your application to display it throughout various sections.
App screen setting
After completing the screen configuration, and other setups, click Build app. During the process, DhiWise will ask you to select the preferred state management library to generate code accordingly.
Select the state management library
Here, I have selected BLoC as the state management library, therefore Flutter Builder will start building the application with BLoC.
Build application
Finally, you can download the code generated by the Flutter Builder with the Sync and download code option. Also, you can synchronize the code with the GitHub and GitLab repositories.
Download Flutter code
Click here, to view the sample code generated with DhiWise Flutter Builder.
This is how you can use DhiWise Flutter Builder for Flutter app development. Flutter is a popular technology for building cross-platform applications from a single codebase.
With DhiWise you can ensure faster delivery of your Flutter application by eliminating the boring and monotonous tasks giving extra freedom to coding creativity. To know more about DhiWise Flutter app builder and its upcoming releases check out our Flutter Builder page.
For detailed information about how to use the Flutter app builder, watch a webinar on “Create a Flutter app in no time using DhiWise” or visit our DhiWise user documentation.
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.
Keep fluttering with full freedom!😊