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.
@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.


Comments

  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

    ReplyDelete
  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

    ReplyDelete
  3. Very well written article. It was an awesome article to read. Read more info about Mobile App Development Cost UAE. Complete rich content and fully informative. I totally Loved it.

    ReplyDelete
  4. Excellent knowledge, You are providing important knowledge. It is really helpful and factual information for us and everyone to increase knowledge. Continue sharing your data. Thank you. Read more info about Mobile App Development Company Recruitment In Usa

    ReplyDelete

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

Kotlin Parcelable Array Objects Send To Activity

We know that IPC (Inter Process Communication) between the activity is an extremely important part of any application development. We often required that we need to send some data to other activity. For example, we may be required to send an array of data, data could be an Integer, String, Long, Double, Float or any other custom data objects. So, In this example, we are going to learn how to implement the Kotlin Parcelable Array object to send the data from one activity to second activity. What is Parcel? The parcel class is designed as a high-performance IPC transport. A Parcel can contain both flattened data that will be unflattened on the other side of the IPC, and references to live IBinde r objects that will result in the other side receiving a proxy IBinder connected with the original IBinder in the Parcel. Create Kotlin Parcelable Array Objects Parcelable is API for placing the arbitrary objects into the Parcel. In Actual in android app development, Parcelable is an interface

Create Custom EditText View in Android

We use the EditText for taking the input from the user and use it at several places in our project. We required to do lots of customization for each time and there are lots of redundant code we write. Writing and managing these redundant codes is very difficult for example if we want to change the look and feel of the view them we need to modify it at each place where our EditText is getting used. So to avoid these kinds of the problem we can create our own Custom EditText View by just. The EditText view is just an extension of the TextView with lots of editing option and properties that required for the user input. How To Create Custom EditText View For creating the Custom EditText we need to extend the AppCompatEditText and override all three constructors of the view as given below. import android.content.Context; import android.graphics.Typeface; import android.support.annotation.Nullable; import android.support.v7.widget.AppCompatEditText; import android.util.AttributeSet; public