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

Popular posts from this blog

Flutter Theme Creation, Programmatic Way

Flutter and Dart is an excellent combination for creating the mobile app with material design with nice GUI. Its lots of widget which help the developer for creating the app UI very fast with respect to the other language. You may face some problem in starting due to comm, curly brace and semicolon but after some time you will find the way how to work with these all stuff and it becomes very easy for you. But in this article, we are not going to discuss all these. In this article, we will handle a very interesting topic on how to create a custom theme or multiple themes and let's user decide which theme to use.



Create a flutter project



So let's create a flutter project by selecting the appropriate option from the File menu in android studio or Visual Code. If you are new to Flutter and Dart you can check out our recent post to get started Creating Cross-platform app using flutter.



Once your project is created you will get the default counter app and you try running the app in the…

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 sync completed.
Update the project build config …

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 of St…