Write your first Flutter app in 5 minutes

Hello everyone and welcome to this tutorial on how to write your first Flutter app. Flutter is an open-source mobile application development framework created by Google. It allows you to build beautiful, fast, and native apps for both Android and iOS platforms with a single codebase.

Before we get started, make sure you have the latest version of Flutter installed on your system. You can check this by running this command in your terminal flutter doctor. If you don’t have Flutter installed visit the website flutter.dev and follow the instructions for your specific operating system.

Now, let's create a new Flutter project. Here I am using vs code. Launch Visual Studio Code and open the command palette (with Shift+Cmd+P on Mac and Ctrl+Shift+P on Windows). Start typing "flutter new". Select the Flutter: New Project command. Next, select Application and then a folder in which you want to create your project. Finally, name your project. I am giving it the name my_first_app.

Once the project is created, open the main.dart file in the lib folder. This is the entry point of your Flutter app. You'll see some boilerplate code already present in this file which is an example of a counter app. We'll be modifying this code to build our first app.

Let’s first remove the code we don’t need. Now Let's start by creating a basic layout for our app. Flutter uses a widget-based approach to building user interfaces. In Flutter, everything is a widget, from simple text to complex animations.

To create a basic layout, we'll use a Scaffold widget. A Scaffold widget provides a basic visual structure for your app, including an AppBar, BottomNavigationBar, and a body where you can place your app's content.

Add the following code to your main.dart file:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My First Flutter App'),
        ),
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

In this code, we're importing the material package which provides pre-built widgets for building material design apps. We're also defining our main function which tells Flutter to run our app defined in MyApp.

Next, we're defining a StatelessWidget named MyApp which will return our MaterialApp widget. The MaterialApp widget is a container for your app, and it provides several pre-built widgets, such as Scaffold, that you can use to build your app's user interface.

Inside the MaterialApp widget, we're defining our Scaffold widget. We're setting the AppBar widget as the top bar of our app, and we're setting the body of the Scaffold widget to a Center widget which contains a Text widget with the text 'Hello World!'.

Save the file and run your app by clicking on the run button in your IDE or by running the command flutter run in your terminal. You should see a basic app with a top app bar and the text 'Hello World!' in the center of the screen.

Now let’s create two screens to understand how navigation works in Flutter.

First, let’s create a home screen. When the application will start this will be the first screen to open. To create a home screen we will add a new file in the lib folder and name it home_screen.dart. We will create a stateless widget here and name it HomeScreen. We can also use a stateful widget here. I am not explaining what a stateful and stateless widget is as we are learning to create a basic app.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

Now we can add this HomeScreen here in the MaterialApp.

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

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

Now we will follow the same process to create another screen. We will add a new file in the lib folder and let’s name it first_screen.dart. Create a stateless widget here and name it FirstScreen.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

Now let’s add a button in the HomeScreen to navigate to the FirstScreen. There are different types of buttons available. Here I am using a MaterialButton. It will require an onPressed and a child parameter. We will add Text as a child here. Let’s write Go to First Screen in the button text. In a onPressed parameter, we will use the Navigator.push() method to switch to a new route. The push() method adds a Route to the stack of routes managed by the Navigator. Push will require two parameters: context and MaterialPageRoute.

MaterialButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) {
          return const FirstScreen();
        },
      ),
    );
  },
  child: const Text('Go To First Screen'),
)

Now let’s test that our navigation is working as expected. Yes, It is working perfectly.

Now let’s add back navigation from FirstScreen to the HomeScreen. We will add the MaterialButton in FirstScreen as well. To navigate back we have a Navigator.pop() method. The pop() method removes the current Route from the stack of routes managed by the Navigator. Now back navigation should work perfectly.

MaterialButton(
  onPressed: () {
    Navigator.pop(context);
  },
  child: const Text('Go To Home Screen'),
)

Here is the final code of all three files.

main.dart

import 'package:flutter/material.dart';
import 'package:my_first_app/home_screen.dart';

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

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

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

home_screen.dart

import 'package:flutter/material.dart';
import 'package:my_first_app/first_screen.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: Center(
        child: Column(
          children: [
            MaterialButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) {
                      return const FirstScreen();
                    },
                  ),
                );
              },
              child: const Text('Go To First Screen'),
            ),
          ],
        ),
      ),
    );
  }
}

first_screen.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Screen'),
      ),
      body: Center(
        child: MaterialButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go To Home Screen'),
        ),
      ),
    );
  }
}

Congratulations! You've just built your first Flutter app. From here, you can start adding more widgets and functionality to your app.

Thank you for reading this article. If you have any questions or comments, please leave them in the comments section below. Don't forget to like the article and follow me for more Flutter tutorials.