🐣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 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:

flutter create hello_flutter

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

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.

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:

Command

flutter run

Result

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.

Practice by completing these assignments, and don't hesitate to refer to the official Flutter documentation 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!