Flutter tutorial: Building your first cross-platform app

Thinking about building a mobile app, but don’t want to maintain separate codebases for iOS and Android? Flutter makes it possible to write one codebase that runs on multiple platforms—mobile, web, and desktop—without sacrificing performance.

Whether you’re a beginner or a seasoned developer looking to explore Flutter, this guide will walk you through the fundamentals of Flutter development and help you build your first app, step by step. Let’s get started!

Flutter for mobile development#

Mobile app development involves developing software intended to run on mobile devices (smartphones, tablets, etc.). While mobile development is similar to traditional software development, the differentiating factor is that mobile development will utilize unique features and hardware from mobile devices like touch, Bluetooth, GPS, cameras, and more.

While web-based applications simply need to run on a web browser, mobile applications depend upon the device itself. In terms of iOS devices, developers primarily need to support the iPhone and iPad. However, for Android, there are many types of hardware and operating systems for smartphones and tablets, making mobile apps more difficult to develop.

Learning Flutter helps strengthen your portfolio and build confidence in app development. Get started with the following course on Educative to continue learning through hands-on practice:

Types of mobile apps#

Similar to web applications, you can use an array of technologies and frameworks to develop a mobile application. Two popular mobile app types are native apps and hybrid apps.

• Native apps: Built specifically for iOS (Swift) or Android (Kotlin/Java). They offer the best performance but require separate codebases.

• Hybrid apps: Built using web technologies (HTML, CSS, JavaScript) and wrapped in a native shell (e.g., Ionic, Cordova). They run inside a WebView but may have performance limitations.

• Cross-platform apps: Built with frameworks like Flutter or React Native, allowing developers to write a single codebase that compiles to native apps. This balances performance and efficiency.

Example: Instagram and Airbnb use React Native, while Google Ads and Alibaba use Flutter.

Looking to read more about Android development? Our article “How to develop an Android App” dives into creating native Android applications.

Understanding the Dart language: Flutter’s core programming language#

In Flutter, applications are developed using Dart, an object-oriented language inspired by JavaScript and introduced by Google in 2013. Dart supports asynchronous operations and isolates, enabling concurrently running code with isolated memory heaps, avoiding conflicts common in shared-memory threads. Its ahead-of-time (AOT) compiler transforms code into fast, predictable, and native outputs, making Flutter applications efficient and high-performing. Additionally, Dart’s null safety feature ensures safer code by preventing null reference errors, while its Stream API facilitates real-time data handling for responsive apps.

Flutter itself is built on key features that streamline development. With a single codebase, developers write code once in Dart, which compiles to native code across platforms. Its widget-based UI system offers a reactive approach, ensuring instant updates to the user interface with state changes. Features like hot reload enable faster iterations, while expressive and customizable widgets create visually stunning interfaces. Native performance is achieved through ARM code compilation, and platform-specific functionalities can be seamlessly integrated using plugins. Together, these make Flutter an ideal framework for cross-platform development.

Creating a “Hello, World!” application in Flutter#

Let’s dive deep into Flutter and create our first “Hello, World!” application for the Android platform.

Key steps to build a “Hello, World!” app in Flutter#

1. Install Flutter SDK: Download from Flutter.dev and set up your environment.

2. Set up an IDE: Use Android Studio, VS Code, or Xcode for development.

3. Create a Flutter project: 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:

4. Edit lib/main.dart: We open the lib/main.dart file in our project directory and replace its content with the following code:

Let’s look at the directory structure first:

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.

Get step-by-step guidance from our answer: “How to create a new Flutter project.”

Now let’s discuss the code:

Code explanation#

• Line 1: We import the material.dart package to access StatelessWidget and 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 named StatelessWidget.

• Line 9: We let the application build itself inside the build(BuildContext context) method.

• Line 10: We return the instance of the MaterialApp widget. 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 MaterialApp widget that the home property is specified. This property specifies which widget will be displayed first when the application launches. We use home as a scaffold widget.

• 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 Center widget as the body since we want to show the message in the center. Its child is the Text widget.

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.

Creating a list-view-based application#

In many apps, displaying a scrollable list of items is essential. Whether you’re building a contacts app, a messaging platform, or an e-commerce catalog, Flutter’s ListView widget makes it easy to present and manage dynamic content efficiently.

Why use ListView?#

• Displays scrollable lists (e.g., contacts, messages, product catalogs).

• Supports dynamic data (e.g., fetching lists from an API).

• Improves performance by rendering only visible items.

Now, let’s build a simple ListView app in Flutter to understand its implementation.

We will create a list-view-based short resume. The application will have four rows: 

• The first row will have the name.

•  The second row will display the email.

•  The third row will show the contact number.

•  The last row will contain a description, as shown below.

Code explanation#

• Lines 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, subtitl, and the 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 27–30: 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.

Advantages of Flutter#

Flutter offers many benefits such as:

• Faster development: Flutter’s Hot Reload applies code changes in milliseconds, enabling rapid UI adjustments and improving productivity.

• Cross-platform support: A single codebase runs on Android, iOS, and web (with evolving support), reducing development effort while ensuring seamless performance.

• Cost-effective for startups and MVPs: Flutter reduces development costs by minimizing the need for separate Android and iOS apps, enabling rapid prototyping with visually appealing UIs.

• Strong documentation and community: Google provides extensive resources, and a large developer community ensures continuous improvements and support.

• Customizable UI: Expressive widgets offer a near-native experience with flexible design options.

Limitations of Flutter#

There are some limitations to Flutter:

• Large app size: Flutter apps tend to have a larger binary size than native apps due to the inclusion of the Flutter engine and framework components.

• Limited native support: While Flutter provides many plugins, certain platform-specific features require writing native code or using platform channels for full functionality.

• Newer technology: Although Flutter adoption is growing, it still has a smaller developer pool compared to React Native or Swift, which may affect hiring and community support.

Testing and debugging#

Testing is a crucial step in Flutter development, ensuring that apps run smoothly across devices. Flutter supports comprehensive testing strategies like unit testing, widget testing, and integration testing, all of which can be executed using tools like Flutter Test and Mocktail. For debugging, Flutter DevTools offers advanced profiling, memory inspection, and layout debugging features that help diagnose and resolve performance issues effectively.

Wrapping up and next steps #

Great job! You have created your first Flutter application. Now, you should have a good idea of what Flutter is and why it’s so popular.

This is just the beginning of your Flutter journey. From different kinds of widgets to Flutter themes and much more, there’s a lot to cover before you can use Flutter like a pro, such as refreshing an AlertDialog to create a confirmation when users make changes in the data.

To kickstart your journey toward proficiency, consider taking the following specialized learning path, curated for beginners aspiring to become professional Flutter developers.

Continue reading about Android app development#

To deepen your knowledge, explore these related blogs:

• Introducing Dart 2 language features: mixins, enums, and more

• Android Tutorial: How to Develop an Android App

• Top 7 Dart tips and tricks for cleaner Flutter apps