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.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Demo App Title',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      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;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              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;
  @override
  _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.

 @override
  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 flutter.dev.

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

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    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

dev_dependencies:
  flutter_test:
    sdk: flutter


# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
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 https://flutter.dev/custom-fonts/#from-packages

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.