DEV Community

Cover image for Getting Started with Flutter: Building a Cross-Platform Mobile App

Posted on

Getting Started with Flutter: Building a Cross-Platform Mobile App

Flutter, developed by Google, is a popular open-source UI framework for building natively compiled applications for mobile, web, and desktop from a single codebase. It enables developers to create beautiful and high-performance apps for iOS, Android, and the web with a single codebase. In this tutorial, we'll walk through the process of getting started with Flutter and building a simple cross-platform mobile app.

Before we get into this article, if you want to learn more on Flutter, I would recommend the tutorials over at Educative, who I chose to partner with for this tutorial.


Before we begin, ensure that you have the following tools and knowledge:

  1. Flutter SDK installed on your system. You can download it from the official website:

  2. An integrated development environment (IDE) like Visual Studio Code (recommended) or Android Studio with the Flutter plugin installed.

  3. Basic knowledge of Dart, the programming language used by Flutter.

Step 1: Setting Up Flutter

Let's start by setting up Flutter on your system:

  1. Install Flutter by following the official installation guide:

  2. Verify your installation by running the following command:

   flutter doctor
Enter fullscreen mode Exit fullscreen mode

This command will check for any issues with your Flutter installation and provide recommendations to resolve them.

Step 2: Creating a New Flutter Project

Now that Flutter is set up, let's create a new Flutter project:

  1. Open your terminal and run the following command to create a new Flutter app:
   flutter create my_first_flutter_app
Enter fullscreen mode Exit fullscreen mode

Replace my_first_flutter_app with your preferred project name.

  1. Navigate to the project directory:
   cd my_first_flutter_app
Enter fullscreen mode Exit fullscreen mode

Step 3: Building the App

Let's build a simple counter app to get started:

  1. Open the lib/main.dart file in your project directory. This is the entry point for your Flutter app.

  2. Replace the existing code with the following:

   import 'package:flutter/material.dart';

   void main() {

   class MyApp extends StatefulWidget {
     _MyAppState createState() => _MyAppState();

   class _MyAppState extends State<MyApp> {
     int _counter = 0;

     void _incrementCounter() {
       setState(() {

     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: Text('Flutter Counter App'),
           body: Center(
             child: Column(
               children: <Widget>[
                   style: TextStyle(fontSize: 24),
                   style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
                 SizedBox(height: 20),
                   onPressed: _incrementCounter,
                   child: Text('Increment Counter'),
Enter fullscreen mode Exit fullscreen mode

This code defines a simple Flutter app with a counter that increments when a button is pressed.

Step 4: Running the App

You can run your Flutter app on an emulator or a physical device:

  1. Ensure you have an emulator or a physical device connected and recognized by Flutter.

  2. Run the following command to start the app:

   flutter run
Enter fullscreen mode Exit fullscreen mode

This command will build and run the app on the selected device.


Congratulations! You've successfully created a basic Flutter app. Flutter's extensive widget library and cross-platform capabilities make it a powerful choice for developing mobile applications. You can expand on this tutorial by exploring more Flutter widgets, adding navigation, integrating APIs, and building more complex and feature-rich apps. Happy coding!

Top comments (0)