Your first Flutter app

Getting Started with Flutter: Your first Flutter app

If you’re new to app development or want to create your first cross-platform mobile app, Flutter is one of the best frameworks to get started with. Backed by Google, Flutter enables developers to build fast, beautiful, and natively compiled apps for mobile, web, and desktop from a single codebase. This means you can write your app once and run it on both Android and iOS devices without needing separate codebases.

In this blog, we’ll guide you through the process of building your first Flutter app, step by step. By the end of this tutorial, you’ll have a working Flutter app that runs on both Android and iOS.

What is Flutter?

Flutter is an open-source UI toolkit that allows you to build natively compiled apps using a single codebase. It uses Dart, a programming language created by Google, and provides a rich set of pre-designed widgets that make it easy to create beautiful and responsive user interfaces.

Some of the key benefits of Flutter include:

Cross-platform development: Build apps for multiple platforms (Android, iOS, web, desktop) with one codebase.
Hot reload: See the changes you make to your app’s code in real time without restarting the app.
Native performance: Flutter’s apps are compiled directly to native code, which improves performance.
Beautiful UI: Flutter has a rich set of customizable widgets for both Material Design (Android) and Cupertino (iOS).

Prerequisites for Building Your First Flutter App

Before we begin, make sure you have the following installed on your system:

Flutter SDK: Follow the official Flutter installation guide to set up Flutter on your machine.
IDE: You can use Android Studio or Visual Studio Code. Both have excellent support for Flutter and Dart.
Android Emulator or iOS Simulator: You’ll need either an Android emulator (part of Android Studio) or an iOS simulator (requires Xcode on macOS) to run your app.

Once you’ve installed Flutter, open your terminal and run the following command to ensure Flutter is properly set up:

flutter doctor

This command will check for any missing dependencies and show instructions on how to fix them.

Step 1: Create a New Flutter Project

To create a new Flutter project, open your terminal (or command prompt) and navigate to the directory where you want to store your project. Then run the following command:

flutter create my_first_app

This command creates a new Flutter project named my_first_app with a basic structure already set up.

Once the project is created, navigate into the project’s directory:

cd my_first_app

Project Structure

After creating the project, you’ll notice that Flutter sets up several folders and files for you. Here’s an overview of the key directories and files:

lib/: This is where the main application code resides. The main.dart file is the entry point of your app.
android/: Contains Android-specific configuration files and native code.
ios/: Contains iOS-specific configuration files and native code.
pubspec.yaml: This file manages the dependencies of your Flutter project (similar to package.json in Node.js).

Step 2: Run the Default Flutter App

Before making any changes, let’s run the default Flutter app that was generated when we created the project.

On an Android Emulator:

Open Android Studio.
In the toolbar, click on the AVD Manager (Android Virtual Device Manager) icon.
Create a new Android virtual device or start an existing one.
In the terminal, run the following command: flutter run This will launch the app on the Android emulator.

On an iOS Simulator:

If you’re on macOS, open Xcode.
Select Xcode > Open Developer Tool > Simulator.
In the terminal, run the same flutter run command to launch the app on the iOS simulator.

By default, Flutter creates a simple counter app that increments a number each time you press the floating action button. This is a great starting point to understand the basic structure of a Flutter app.

Step 3: Understanding the Default Flutter Code

Open the lib/main.dart file in your code editor. This file contains the code for the default Flutter app. Let’s break it down:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> 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>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Key Parts of the Code:

Main Function: This is the entry point of the app. It calls runApp() to initialize the app.
MyApp Class: A StatelessWidget that defines the overall structure of the app. It returns a MaterialApp, which is the root of the application.
MyHomePage Class: A StatefulWidget that manages the state (in this case, the counter). It returns a Scaffold, which provides the basic layout structure like the app bar, body, and floating action button.

Step 4: Modifying the App

Now that you understand the basic structure, let’s make some changes to the app. We’ll modify the text and add a simple feature to reset the counter.

Changing the App Title and Text

Open the MyHomePage widget and modify the title and body text.

In the home parameter of the MyApp widget, change the title:

dartCopy codehome: const MyHomePage(title: 'Welcome to My First Flutter App'),

Then, modify the Text widget inside the body to update the message:

const Text(
  'You have pressed the button this many times:',
),

Change it to:

const Text(
  'Number of times you pressed the button:',
),

Adding a Reset Button

To add a reset button, we’ll modify the _MyHomePageState class. Add the following method to reset the counter:

void _resetCounter() {
  setState(() {
    _counter = 0;
  });
}

Next, add another floating action button below the existing one. Inside the Scaffold, update the floatingActionButton section like this:

floatingActionButton: Column(
  mainAxisAlignment: MainAxisAlignment.end,
  children: <Widget>[
    FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: const Icon(Icons.add),
    ),
    const SizedBox(height: 10), // Add some space between buttons
    FloatingActionButton(
      onPressed: _resetCounter,
      tooltip: 'Reset',
      child: const Icon(Icons.refresh),
    ),
  ],
),

Hot Reload to See Changes Instantly

Thanks to Flutter’s hot reload feature, you can save your changes and see them immediately without restarting the app. Just press Ctrl + S (or Cmd + S on macOS), and your updated app should reflect the changes instantly.

Step 5: Running the App on a Physical Device

Testing your app on a physical device ensures that it works as expected in real-world scenarios. Follow these steps to run the app on an actual Android or iOS device:

For Android:

Connect your Android device to your computer via USB.
Enable Developer Mode and USB Debugging on your device.
Run flutter devices in the terminal to ensure Flutter recognizes your device.
Run the app using flutter run.

For iOS:

Connect your iPhone or iPad to your Mac.
Open Xcode and enable the necessary permissions to run the app on your device.
Run flutter run from the terminal.

Conclusion

You’ve successfully created and modified your first Flutter app! You learned how to set up your development environment, understand the basic Flutter structure, and make changes to your app’s UI and logic. Flutter’s flexibility, ease of use, and powerful features like hot reload make it one of the best frameworks for building cross-platform apps.

Now that you have a working app, you can explore more complex layouts, animations, and even integrate backend services. The possibilities are endless!

Explore Other Flutter Topics…