DEV Community

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

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.

Prerequisites

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: https://flutter.dev/docs/get-started/install.

  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: https://flutter.dev/docs/get-started/install.

  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() {
     runApp(MyApp());
   }

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

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

     void _incrementCounter() {
       setState(() {
         _counter++;
       });
     }

     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: Text('Flutter Counter App'),
           ),
           body: Center(
             child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               children: <Widget>[
                 Text(
                   'Counter:',
                   style: TextStyle(fontSize: 24),
                 ),
                 Text(
                   '$_counter',
                   style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
                 ),
                 SizedBox(height: 20),
                 ElevatedButton(
                   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.

Conclusion

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 (1)

Collapse
 
liligrvs profile image
tata

While Flutter is still relatively young, it has attracted developers looking to explore and improve their abilities. However, the issue remains: is Flutter appropriate for long-term, complicated projects? Can it uphold its reputation for simplicity while satisfying the needs of major corporations and ambitious startups? In this post, we'll look at these factors and assess Flutter's suitability for large-scale projects.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.