# Hello Flutter

Now that you’ve got a grip on Dart, it's time to dive into Flutter. Flutter allows you to build beautiful and interactive apps for iOS, Android, and the web from a single codebase. Let's create your first Flutter app!

## 1. Installing Flutter 💻

Before anything else, you need to have Flutter installed on your machine. If you haven’t done so yet, follow our [Flutter installation guide](https://flutteruniversity.gitbook.io/docs/learn-flutter/basics/setup-and-installation) to set it up.

## 2. Creating a New Flutter Project 🎉

Once Flutter is installed, open your terminal, and run the following command to create a new Flutter project:

```bash
flutter create hello_flutter
```

This command creates a new Flutter project called `hello_flutter`. Navigate to your project directory:

```bash
cd hello_flutter
```

## 3. Exploring Your New Flutter Project 🕵️

In the `hello_flutter` directory, you’ll find a bunch of files and folders. The main file you’ll be working with is `lib/main.dart`. Open it in your favorite text editor.

```dart
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('Hello Flutter'),
        ),
        body: Center(
          child: Text('Welcome to Flutter University!'),
        ),
      ),
    );
  }
}
```

This is a simple Flutter app that displays a greeting message.

## 4. Running Your Flutter App 🚀

Back in the terminal, ensure you are in the `hello_flutter` directory, then run the following command to launch your app:

{% tabs %}
{% tab title="Command" %}

```bash
flutter run
```

{% endtab %}

{% tab title="Result" %}

<figure><img src="https://522858097-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdSyMra5vx5HbARBPAir%2Fuploads%2FvN7mzVCUHu6Zf82oDuJk%2FScreenshot%202023-10-27%20at%204.43.39%E2%80%AFPM.png?alt=media&#x26;token=fd352679-5ac5-44f8-9962-f56a05694846" alt="" width="336"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

You should now see your app running in your default web browser or on your connected device/emulator.

## 5. Understanding The Code 🔍

Let’s break down the code you see in `lib/main.dart`:

* `void main() { runApp(MyApp()); }` is the entry point of your Flutter app.
* `class MyApp extends StatelessWidget` defines a new widget.
* `Widget build(BuildContext context)` method returns a widget, which is the UI of your app.
* `MaterialApp`, `Scaffold`, `AppBar`, and `Center` are all widgets provided by Flutter to help structure and style your app.

## 6. Making a Small Change ✏️

Let's make a small change to see how easy it is to update your app. Change the message in the `Text` widget to say 'Hello, Flutter University!'. Save the file, and you’ll see the app update automatically.

***

## Assignments 📝

Now, it’s your turn to experiment and learn. Here are some assignments for you:

* [ ] Change the title in the AppBar to 'My First Flutter App'.
* [ ] Add a button to the screen, when pressed, it changes the text on the screen.
* [ ] Change the theme of your app by modifying the `theme` parameter of `MaterialApp`.
* [ ] Add an image to the screen from the internet or from your local machine.

{% hint style="info" %}
Practice by completing these assignments, and don't hesitate to refer to the [official Flutter documentation](https://flutter.dev/docs) for help. Once you're comfortable, move on to the next topic: Widgets. Flutter is all about widgets, and understanding them is crucial to becoming proficient in Flutter development!
{% endhint %}