Flutter Installation and First App

Let's start developing our application by setting up Flutter. Here's a reminder of what we are going to build:

Installing Flutter

First, we need to install Flutter. The installation instructions are on the official Flutter website.

In our case, we chose the following installation method:

• MacOS - since we are using a Mac.
• Android - for more straightforward setup and testing.

Then, you have two choices - VS Code or Android Studio. We chose VS Code as it was recommended by the Flutter team:

Once everything is installed, you can run the following command to check if everything is set up correctly:

flutter doctor

Here's what we got:

Even with a few issues, we were able to work with Flutter. So don't worry if you have some licenses missing or other issues.

Note: When developing on Linux/Windows, you will not see the iOS-related issues. iOS development requires a Mac (there's no clean way around it).

Setting up Virtual Devices

Before we start developing, we suggest setting up a virtual device. This way, you can test your application on different devices without owning them.

Here's an official Flutter Guide on how to set up an Android emulator.

Once that is done, you can run your device:

Press Cmd + Shift + P in VS Code and type Flutter: Select Device. Then, select your device. Once it loads, you should see it open:

Creating a new Flutter project

Now, we are ready to create a new Flutter project. You can do this in VS Code by pressing Cmd + Shift + P and typing Flutter: New Project. Then, select the folder where you want to create the project:

Once done, you can run the project by pressing F5 or typing Flutter: Run in the command palette. This will start the application on your device:

That's it! We are ready to start developing our application.

First Code Changes

Let's immediately make some changes to our application. We will take it slow and change our Home screen:

Note: We will replace the lib/main.dart file with the following code.

Our goal here is:

1. Display custom AppBar with a title.
2. Display the custom Text widget in the center of the screen.

lib/main.dart

import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({super.key});
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Welcome to Flutter',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Welcome to Flutter'),
          ),
          body: Center(
            child: Text(
              'Hello World',
              style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
            ),
          ),
        ));
  }
}

But wait, what is this code? Let's break it down:

1. main function that runs our application.
2. MyApp class that extends StatelessWidget. This is our main application widget. (We will talk more about this in the future).
3. MaterialApp widget that sets up our application with Material Design.
4. Scaffold widget that sets up our screen with an AppBar and a body.
5. AppBar widget that displays a title using a Text widget.
6. Center widget that centers the Text widget.
7. Text widget that displays the text 'Hello World' with a custom style.

Okay, but that's a lot of new stuff. Let's break it down with Laravel terms:

Note: This is a very simplified explanation.

• The main function is like the index.php file in Laravel.
• The MyApp class is like a controller in Laravel.
• Everything else is like Blade components in Laravel.

That's how we will think about Flutter. We put together a bunch of widgets (components) to create our application.

Okay, now let's save our main.dart file. This should restart the application and show the changes:

And that's it! We have our first Flutter application running. Let's continue building our application in the next chapter.

In the next lesson, we will create a simplified Login screen with no functionality to get a feel for Flutter development.

Check out the GitHub Commit for App Installation and GitHub Commit for Main Screen.