Education

A step by step tutorial using DhiWise’s Flutter app builder

logo

DhiWise

October 23, 2021
image
Author
logo

DhiWise

{
October 23, 2021
}

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 are landed on the right article!

The following article explains how to quickly build a Flutter application using DhiWise’s Flutter app builder, 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

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

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

If you already have a DhiWise account, just log in to your account and click New application.

Image

It will then open the Create new application page where you need to select the Flutter as your Mobile app development technology.

Image

Step 1: Create a new Flutter application 

Start creating a Flutter application by adding the Application name and then quickly importing the app design-Figma, XD, or Sketch to DhiWise. 

Image

In the case, you don’t have your design ready, DhiWise provides you with the following options.

  • Select templates of popular applications such as e-commerce, and healthcare.
  • Select multiple screens from DhiWise screen library.
Image

Step 2: Import Figma, AdobeXD, or Sketch design to DhiWise 

Here in the next step, you can fetch your Figma or other design to DhiWise platform. 

1. Fetching Figma to DhiWise 

If you have your Figma design ready then connect the Figma account with the DhiWise to convert Figma to Flutter code. For that, you have to simply log in to your Figma account and then select the Figma design URL you wish to import. 

Image

2. Fetching Sketch, or Adobe XD design 

In the case you have your design in Sketch or Adobe XD. Drag and drop or browse your design file to the DhiWise. 

Image

As we have seen in “Step1” if you don’t have your design ready get ready to use screens and templates from DhiWise library to quickly start your app development.

Step 3: Go from design to code in minutes with DhiWise’s Flutter app builder

After importing your Figma or other design select the pages that you want to sync with your application and click Next. 

Image

Now, it will start fetching your screen resources….

Image

Once resource fetching is done you can view all the selected app screens. The following screenshot shows the app screens of the food delivery application. Here, each screen can be viewed and configured as per the app's requirements. 

Moreover, if your Figma design prototyping is already done, the navigation and other interactions will be automatically detected and fetched from the screens. In such a case, developers can preview their app in advance. 

If everything goes well, developers can build their app without making further configuration changes, making your Figma to Flutter conversion greatly simplified. 

Image

Step 4: Configure your Flutter application 

To configure your Flutter application, select the screen component you want to configure and right-click to change widget or set actions. 

DhiWise Flutter app builder allows you to change misidentified UI components to the desired view type such as text, button, list view, image, and so on using the Change widget option. 

 

Image

Similarly, with Create action option you can set navigation, permission, authentication, API integration, and much more. 

Image

DhiWise allows you to create conditional flow in Flutter ui builder. With the Conditional flow feature, you can define conditions on lifecycle events and button clicks.  

Image

Step 5: Integrate API

API integration feature in DhiWise Flutter app builder allows you to Add, View, Edit and Delete APIs. To create a new API  you can either upload a file from the existing Postman collection or add new APIs manually with the help of DhiWise API Panel

Image

The screenshot below shows two options for adding a new API. 

Image

The Add new API will open the following page where you can manage your REST API call code.

Image

To create an API, select from the API methods i.e POST, GET, PUT, DELETE, PATCH, HEAD, CONNECT, OPTIONS, TRADE, CUSTOM, and then enter the request URL. 

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.  

Step 6: Firestore integration

DhiWise Cloud Firestore integration comes in handy for accessing backend resources. With Firestore integration, you can pair a real-time database with the app and retrieve unstructured database collection already created in the Firestore.

If you don’t have a database in the Firestore, you can create them from the Flutter app builder and also set rules for each database collection. 

Image

Step 7:  Managing application setting

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

  • General Setting:  Change app name, Icon, bundle ID, Package name, and delete the application.
  • Integrate with GitHub and GitLab
  • Support for Android studio, VScode, and IntelliJ: Generate application token to sync app code with IDE.
  • Application screen setting: Authentication with Google and/or Facebook, configuration setting with custom loader, and theme support.
Image

Step 8: Generate Flutter application code

After completing your app configuration, and other settings, click Build app. During the process, DhiWise will identify the UI actions, and other configurations before generating the Flutter app. 

Image

The generated code will look like this,

Image

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

The generated code can be directly downloaded to your device, reviewed, and also synchronized with the GitHub and GitLab repositories. 

Summing Up

This is how you can use DhiWise Flutter app builder to quickly create a Flutter application. 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 repetitive tasks giving extra freedom to coding creativity.To know more about DhiWise Flutter app builder and its upcoming releases check out our Flutter app builder page.

For detailed information about how to use Flutter app builder, watch a webinar on “Create a Flutter app in no time using DhiWise”  or visit our DhiWise Knowledge hub.

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