Introduction to Flutter: building mobile apps for iOS and Android
Flutter is an open-source framework for creating native applications for Android and iOS. It was proposed by Google, and its basic purpose was to develop mobile, web, and desktop applications from a single code base. It allows us to create high-quality and visually appealing interfaces that can be used across multiple platforms, leading to a consistent user experience.
It has emerged as a popular framework that speeds up application development and reduces its cost as compared to building separate applications for different platforms. Not only this, but developers don’t need to have experience with diverse programming languages targeting different platforms. According to its official documentation, anyone who has knowledge of object-oriented concepts and imperative programming concepts can start using it.
The Dart language#
In Flutter, applications are written in Dart. It is an object-oriented language that is heavily inspired by JavaScript. Its first version was released in 2013 by Google for the purpose of building mobile apps and web applications. Dart provides us the ability to execute asynchronous operations along with concurrently running code in what are known as isolates. Every isolate has its own memory heap, providing the advantage that no isolate’s state can be modified by any other isolate as compared to traditional shared memory threads. Another benefit of Dart is that it has an ahead-of-time (AOT) compiler that compiles to fast, predictable, and native code, which makes Flutter efficient.
Key features of Flutter#
Let’s summarize the key features of Flutter.
Single codebase: The biggest advantage of Flutter is that we can write code once in Dart, and it is compiled to native code for different platforms.
Widget-based UI: In Flutter, we use a reactive approach for creating UIs using widgets. This provides us the benefit that if there is any change in a widget’s state, it is instantly reflected in the UI.
Hot reload: Any change we make in the code is instantly reflected in the running app because of this feature. This leads to faster deployment.
Expressive UI: Flutter has a rich set of widgets that can be customized and used to create aesthetically pleasant user interfaces.
Native performance: In Flutter, code is compiled to native ARM code that makes its performance comparable to the code compiled using traditional native development tools.
Access to Native Features: In Flutter, we can use plugins to integrate native features and APIs targetting different platforms. This way, we can access any platform-specific features when needed.
Creating a "Hello, World!" application in Flutter#
Let’s dive deep into Flutter and create our first “Hello, World!” application for the Android platform. The first step is to install the Flutter SDK on our system. We can download it from the
After the SDK is installed and our IDE is set up, we can create a new Flutter project and give it a name.
Note: All the coding examples in this blog are executed on the Educative platform for Android. The folder structure might appear different for you depending on your chosen project name and development target.
The development target is the operating system (OS) on which the application will run during development. You can choose from Android, Windows, macOS, Linux, and the web.
We should have the following project structure after creating the project:
We open the lib/main.dart file in our project directory and replace its content with the following code:
import 'package:flutter/material.dart';void main() {runApp(MyApp());}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Hello, Flutter!'),),body: Center(child: Text('Hello, World!'),),),);}}
Code explanation#
Line 1: We import the
material.dartpackage to accessStatelessWidgetand other material widgets.Lines 3–5: We declare the main entry point of our application.
Line 7: The name of our application is
MyApp, and it extends the Flutter widget namedStatelessWidget.Line 9: We let the application build itself inside the
build(BuildContext context)method.Line 10: We return the instance of the
MaterialAppwidget. This core widget is at the root of the application and provides access to other useful Flutter elements needed to build an app.Line 11: It is a requirement of the
MaterialAppwidget that thehomeproperty is specified. This property specifies which widget will be displayed first when the application launches. We usehomeas ascaffoldwidget.Lines 12–13: We define the top application bar as
AppBar. It typically contains an application’s title, navigation icons, and other actions or widgets.Lines 15–16: We use the
Centerwidget as the body since we want to show the message in the center. Its child is theTextwidget.
When we execute the above code, we will see the following output:
Let’s understand the contents of the directory structure and the code we wrote above.
Directory structure#
android: This directory has all the native Android code, including the AndroidManifest.xml file.
lib: This folder has all the Dart files. Basically, it has all the shared code across all the platforms like iOS, web, desktop, and embedded devices.
test: This folder has all the unit testing classes.
pubspec.yaml: This is a file that contains the dependency management and configuration data for the Flutter application.
Creating a list-view-based application#
Now, let’s create a more interesting application. In all mobile applications, when we need to display data that can’t be shown on a single screen, we need to create a scrollable list for it. For example, let’s say we are developing a school management app and want to display all the campuses in a country; we need to use a list view for that. Another use case might be that we want to display a list of all the students in a particular campus; we need to use a list view for that, too. In Flutter, we have a widget named ListView that can be used to display a scrollable list of items. Basically, it serves as a fundamental building block for creating scrollable lists of content, such as text, images, or other widgets.
We will be creating a list-view-based short resume. The application will have four rows. In the first row, we will have the name. In the second row, we will display the email. In the third row, we will have the contact number. Finally, in the last row, we will have a description, as shown below.
import 'package:flutter/material.dart';void main() {runApp(MyApp());}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('My Short Intro'),),body: ListView(children: <Widget>[ListTile(title: Text('Name: '),subtitle: Text('Awais'),leading: Image.network('https://www.educative.io/static/imgs/logos/LinkImageV3.png'),),ListTile(title: Text('Email:'),subtitle: Text('awais.qasim@educative.io'),),ListTile(title: Text('Cell:'),subtitle: Text('0320xxxxxx'),),ListTile(title: Text('Description:'),subtitle: Text('Hello, My name is Awais and I work at Educative. It is a leading online learning platform made by developers, created for developers.'),),// Add more ListTiles as needed],),),);}}
Code explanation#
Line 12–13: We set the title of our application in AppBar as My Short Intro.
Line 15: We set the body as ListView.
Lines 17–22: We create the first cell of ListView. We set the title, subtitle, and logo of Educative. The leading attribute specifies that the logo should be displayed on the leftmost side of the cell.
Lines 23–26: We set the heading as Email:, and then in subtitle, we set the actual email.
Lines 23–26: We set the heading as Cell:, and then in subtitle, we set the actual contact number.
Lines 31–35: We set the heading as Description:, and then in subtitle, we add the text of the description.
This wraps up our blog about building mobile apps for iOS and Android using Flutter. We started by describing what Flutter is and its relation to the Dart language. We then discussed the benefits of developing applications in Flutter. After that, we discussed how to develop a basic “Hello, World!” application for Android and explained the code. Finally, we created a list-view-based application displaying a user profile.
Your next learning steps#
To deepen your understanding and expertise in developing mobile and web applications in Flutter, we strongly recommend you look through the following selection of specialized courses on the Educative platform.
Don’t pass up this chance to increase your knowledge and expertise in Flutter. Take the first step toward becoming a cross-platform mobile application developer in Flutter by immediately enrolling in Educative courses!
Free Resources
