Skip to main content

Creating a Cross platform Mobile App with Flutter and Dart

Whenever we create a mobile application, we want our app to be compatible with as many different devices as possible. For Android, this means designing for devices with a range of hardware, software and screen configurations, but if we want our app to reach the largest possible audience, then we have to move beyond Android and make your app available on other mobile platforms as well. For example, you have to create an app for the android device but later on you have planned to target your app for iPhone and iPad then you need to port complete code to IOS and that is not an easy task, its required huge time and effort even for maintenance. Every single code change needs to write for both platforms. So in this post Creating a cross platform Mobile App with Flutter and Dart we are going to learn how to develop an application which runs cross the platform, i.e the same code base can be used for Android and IOS both.

Installing the Flutter and Dart Plugin in Android Studio for Cross platform Mobile App Development

We will start the tutorial with the installation of the all required plugin and SDK. To start the development of the cross platform we need to install the following two plugins.

  • Flutter

  • Dart

  • Flutter SDK

So go to File->Setting->Plugin and click on browse repository and search for Flullter.

Once you selected the Flutter plugin then you will be prompted to install the dart as well, click ok and install both plugins. When promoted take restart of the Android Studio.

After this, we have to install the Flutter SDK. So go to File -> New - >New Flutter Project

Select Flutter Application and click Next, you will notice that Flutter SDK is still not installed. So click on install SDK or provide the location of the SDK if it is already installed. Type the suitable project name and then next -> next.

Now our project has been created.

Testing the Hello World App

We can test the app by just starting the AVD from Tools menu from Android Studio Menu Bar, as by default when you run the app it will not provide you option to start the AVD. So we have to start it manually. Once started to connect device will be available. So Just click on the run once AVD is booted. You will get the screen like given below.

Adding the App Bar to the Flutter and Dart

For setting the App Bar and title text we need to update open the main.dart file and set the title as given below.

class MyApp extends StatelessWidget {
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: 'My Demo App Title',
theme: ThemeData(
home: MyHomePage(title: 'Flutter Demo Home Page'),

Here title: 'My Demo App Title' using which we can set the title. Further, if you want to change the color of the app bar to modify the primarySwatch value under the ThemeData, there are other things as well which can be used to modify it further.

If you see the last thing then it's the home parameter. The home parameter defines the Widget of the home screen. In flutter and dart, everything is a widget, for example, a text view, button, list view, etc these all are a widget. So let's focus on the home section of the of our app and create or modify the home widget.

Creating the home Widget

If you create the project with the android studio below will be the default code stub will automatically get generated.

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
_MyHomePageState createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;

void _incrementCounter() {
setState(() {

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
body: Center(
child: Column(
children: <Widget>[
'You have pushed the button this many times:',
style: Theme.of(context).textTheme.display1,
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),

We will go step by step for each section and explain the above code. So that you can get a clear understanding to start the creating amazing app into the flutter. So, First of all, we will focus on the Widget.

Type of Widget in the Dart and Flutter

We have two types of Widget in flutter Stateless and Stateful. So let's go into the details of this and understand what is the difference between the stateless and stateful widget.

Stateless Widget

The widget type name is self-explanatory that Stateless widget is the widget whose state can't be changed. For example, if you set any value to text view which is Stateless Widget then the value of the text filed can't be changed, like a label of any view.

Stateful Widget

Stateful Widget is the widget which has state and behavior of the widget can be changed on the basis of the state of the view. For example in the below sample stub which was generated by default by android studio stateful widget are used.

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
_MyHomePageState createState() => _MyHomePageState();

So the data of the widget can be changed depending on the state of the widget. So the question arises now is how we can create the state of the widget. In the above code below the line is used to create the state of the widget and used to update the data of the view.

_MyHomePageState createState() => _MyHomePageState();

State of the flutter Widget

If you see the above full stub of the MyHome class then you find that class _MyHomePageState extends State { is the class of the state and everything will happen in this sate class. so, in short, we can say that this is the actual home where all your GUI and logic will go. In the above simple code base if you look at the below stub then you will found that we are overriding Widget build.

Widget build(BuildContext context) {
return Scaffold(

In the above stub, we are returning the Scaffold. The scaffold is also a widget which provides us the basic app hierarchy under which we can add the other widget. It holds several other default widgets like AppBar, BottomNavigationMenu, FlottingActionButton, etc. All this view comes from the material.dart file so you must import this library from the package. For further reference about these widgets, you can check the at the

import 'package:flutter/material.dart';

Adding package dependency in Flutter

In flutter, we have a file in the home with the name of pubspec.yaml, it is a YAML file so every space and tab matter. So make sure to YAML pattern when editing these files. Below is the sample files which will be created automatically when you create any new project.

name: flutter_page_navigation
description: Flutter Page Navigation Demo.

version: 1.0.0+1

sdk: ">=2.1.0 <3.0.0"

sdk: flutter

# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2

sdk: flutter

# For information on the generic Dart part of this file, see the
# following page:

# The following section is specific to Flutter.

# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true

# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
# For details regarding fonts from package dependencies,
# see

Wrapping Up

I hope you enjoyed this tutorial, getting started with Flutter and Dart in Android Studio for cross-platform Mobile App is not so difficult, it's quite easy, Yes? Will coming soon with the next tutorial... keep tuned.


  1. I am very grateful that I found some helpful content about cross-platform mobile application development. After reading it, I think that you have good knowledge. Thanks for posting it. Keep it up. App Development Company in Pune

  2. I am attracted by the info which you have provided in the above post. It is genuinely good and beneficial info for us. Continue posting, Thank you. ios app development company in indore


Post a Comment

Popular posts from this blog

Flutter How to Start Android Activity from Flutter View

Flutter and Dart is an excellent combination for creating the UI, but for accessing the platform-specific service we need to open platform-specific activity. So lets in this article we will explore how to start an android activity and access the service from Flutter View. Create a Project for this Android Activity Flutter View Demo Create a Project From File menu select the New Flutter Project Enter the project name Select the AndroidX support and click on next After the above, we step click on Finish We will have the following project structure created. Create the Second Activity in Android Just go to the android folder and open it in separate windows. We will have the following project structure. Create the Activity Just right-click on the Kotlin folder and create a blank activity from the menu. If you create the activity then you may be required to upgrade the Gradle and do some import. So Just click on update and wait for the project s

WordPress Android App with REST API And Retrofit

Retrofit is the library which converts your JSON data into Java object. In this tutorial, we will learn about how to implement the Retrofit to create a WordPress Mobile App. As we all know, WordPress is the one of the biggest CMS (Content Management System) of the world. Wordpress full fill the requirements for all most every type of the website. So, in this tutorial, I am going to learn how to create an Android App using the WordPress REST API and Retrofit. What is Retrofit? If you want to know about Retrofit, I would like to give you just a simple one-line explanation of the Retrofit. It is a library which converts your REST HTTP request to Java interface. We will learn how we can do all these stuff using some very simple steps. Further, you can check the Retrofit Library here . So, In this tutorial, we will use the Retrofit to retrieve all post and there except ( A short Description of Post) form a WordPress website. Prerequisite for using the Retrofit for WordPress Android App Ther

Flutter State Management With Provider and ChangeNotifier

Flutter state management with provider library and why it's so important? There are lots of topics in flutter which are very important but out of those state management of your flutter application is the most important and little bit complicated as well. So in this article, I will try to explain how to use the provider package for managing the state of flutter and dart application and how to access the data down the hierarchy of the widget tree without recreating the whole UI. Basic knowledge of the state management and data flow in the Flutter Before starting the coding I would like to explain some basics about the Flutter application so that you can understand, why it's important to manage the state of your application in the correct way. In Flutter, everything is a widget and whenever the state of your application changes the UI is recreated the UI with the new data. Let's list out the topic or problem that we are going to explore about state management. Challenge o