Promptless AI is here soon - Production-ready contextual code. Don't just take our word for it. Know more
Know More
Education

Flutter App Development: A Step-by-Step Tutorial With DhiWise’s Flutter Builder

No items found.
logo

DhiWise

June 6, 2023
image
Author
logo

DhiWise

{
June 6, 2023
}

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!

What is 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.

  •  Android
  •  iOS
  •  Web
  • Windows
  • macOS
  • Linux 

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 

Flutter app development using DhiWise Flutter Builder

To start building the Flutter application with DhiWise Flutter Builder,  you must have,

  1. DhiWise account 
  2. Basic knowledge of Flutter framework and Dart language.

Step 1: Sign up or log in with DhiWise account

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
Dashboard

Step 2: Create a new Flutter app

It will then open the Create new application page where you need to add information that includes:

  1. Application name
  2. Technology as Flutter
  3. Design platform as Figma 
  4. Figma account 
  5. Figma URL of your Figma design file

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
Create a new app 

Step 3: Select mobile screens

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
Select mobile screens

Step 4: Fetch your design data 

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
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
Auto-identified widgets and auto-setup actions

Step 5: Set up splash screen and screen next to splash screen

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
Set up splash screen and the screen next to splash screen

Step 6: Select screen and configure

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
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
Create action and sync Figma design changes

Moreover, you can choose and customize components and styling as shown below.

Customize components and styling
Customize components and styling

Step 7: Integrate API

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
API Integration

Step 8: Add Constant

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
Add Constant

Step 9: Manage application setting

Next, you can manage your Flutter application setting, which allows you to change,

General Setting: 

Change the application name, Icon, bundle ID, and Package name, and under the advanced setting you can delete the application.

General setting
General setting

Integration with GitHub and GitLab

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
GitHub and GitLab integration

Support for Android Studio, VS Code, and IntelliJ

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
Code synchronization

Application screen setting

With the Screen setting, you can integrate your custom LottieFiles loader into your application to display it throughout various sections.

App screen setting
App screen setting

Step 10: Build the app and generate Flutter app code

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
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
Build application
Hurray! Here is your code ready to download. 

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
Download Flutter code

Click here, to view the sample code generated with DhiWise Flutter Builder. 

Summing Up

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!😊

Frequently asked questions

Frequently asked questions

No items found.