Build a Flutter App

Flutter app builder is the fastest way to bring your app design to life without weeks of coding. Get everything right here in your app from design to code, to app sync on GitHub or GitLab, along with multiple app features like API integration, in-app permissions, Social authentication, and backend services integration like Firebase and Supabase.

Choose one from below to start creating your app:

App design from Figma, Adobe XD, or Sketch

Templates

Screen Library

note

DhiWise converts your design to code by auto-identifying all your screen UI, widgets, and generates complete code for the same. Easily setup actions on your widgets like Navigation, API integration, Social authentication, and many more to easily generate your complete app in no time!

Project set up

Follow the below steps to create a Flutter application:

• Create an application: Create a new application with your design, or create one from the vast collection of templates or screen library.
• Add APIs and Enviroment variables Add APIs manually or upload a Postman collection and start integrating APIs into your app.
• Change widgets: Change or modify the widgets easily along with their properties right here, rather than moving back to Figma.
• Manage app life cycle: Manage app life cycle actions and customise them all in just a few simple clicks.
• Build app: Build your app anytime and get your source code easily.

tip

Sign In to DhiWise, if you already haven’t!

Create an application

Click on New application.

You will have three options to create an application

1. Create a new app: Create an application from scratch by importing your app design from Figma, Adobe XD, or Sketch.
2. Create from Template: In case you do not have an app design file, create an application from the wide range of built-in templates based on various categories.
3. Create from Screen Library: Also you can pick screens of your category choice and create an application from 500+ screens provided by DhiWise.

Create a new app

Reference

Video tutorial to learn How to import Figma designs to build Flutter applications.

Step 1:

Select platform as Mobile to create a Flutter app. Next, enter your Application name and select Technology from the drop-down as Flutter.

Step 2:

Also, select the Design platform from which you want to import your app design,

Figma

Integrate your Figma account with DhiWise and import your designs to DhiWise with help of Figma URL.

Adobe

Upload your Adobe XD file and get your Figma design file on your registered email, to create your app.

Sketch

Upload your Sketch file and get your Figma design file on your registered email, to create your app.

Step 3:

For Figma, link your Figma account with DhiWise and add your app design’s Figma URL, and click on Create a new app.

caution

Select the same viewport size as that in your Figma design.

Next, select screens of your choice for which you want to create an app or directly click on Select all screens, also select viewport size, and click Submit.

caution

If you are trying to sync someone else’s private Figma, you won’t be able to access that design.

Create from Template

In case you do not have a design file or want to create one from a built-in template, choose one and create an app. DhiWise offers multiple production-ready app template designs with a various range of categories.

Reference

Video tutorial to learn how to Create Flutter app in DhiWise with templates.

Step 1:

Select a template based on category of your choice.

Step 2:

Next, click on Use template

Step 3:

Enter your Application name and select Technology as Flutter, click on Create app.

Create from Screen Library

In case you do not have a design file you can also pick individual screens based on screen categories to create your app design quickly. For example, a login screen, authentication screen, and similarly other screens.

Reference

Video tutorial to learn how to Create Flutter app in DhiWise with ready-made screens.

Step 1:

Select an app category for your screens.

Step 2:

From the list of screens available for the selected category, click on ➕ to add a screen and on 👁️ to preview the screen. To remove a screen click on ❌.

Step 3:

Enter your Application name and select Technology as Flutter, click on Create app.

Got a question? Ask here.