thumnail

Day 1: Introduction to Flutter and Setup

Sun, May 2025 19:14:43

Hello friends! On our first day of learning Flutter, we’re going to start from the very beginning: what is Flutter, why should we use it, and how to set it up so we can start coding our very first app. Let’s dive in!

What is Flutter?

Flutter is an open-source framework developed by Google for building mobile, web, and desktop applications from a single codebase. With Flutter, you can create Android and iOS apps with just one codebase. Awesome, right?

Flutter was first announced in 2017 and has continued to grow with an active community and direct support from Google. This framework uses the Dart programming language, which is also developed by Google.

Why Flutter?

Here are some reasons why many developers (myself included) love using Flutter:

  1. Cross-Platform
    • One codebase works for both Android and iOS. Flutter now also supports Web and Desktop.
  2. Hot Reload
    • A cool feature that lets us instantly see code changes without rebuilding the whole app. A real time-saver!
  3. Rich and Customizable UI
    • Flutter comes with a wide range of built-in widgets that are flexible and highly customizable.
  4. High Performance
    • Since Flutter is compiled directly to native ARM code, its performance is nearly equal to native apps.
  5. Strong Community Support and Complete Plugins
    • Tons of ready-to-use plugins so we don’t have to build everything from scratch.

Installing Flutter

Okay, now let’s set up our Flutter development environment. Follow these steps carefully.

1. Download and Install Flutter SDK

  1. Go to the official Flutter site: https://flutter.dev
  2. Choose your operating system (Windows, macOS, Linux)
  3. Download the SDK
  4. Extract it to a directory you prefer, for example C:\flutter

2. Add Flutter to PATH

To use the flutter command in your terminal, add C:\flutter\bin to your environment variables.

3. Check Installation with flutter doctor

Once your PATH is set, open your terminal or Command Prompt and type:

flutter doctor

This command will check if all Flutter dependencies are installed, including:

Follow the suggestions from flutter doctor to fix any issues.

4. Install VS Code or Android Studio

Flutter supports two popular IDEs:

You can use either one or both.

Creating Your First Flutter Project

Now it’s time to create our first Flutter project. Let’s name it hello_world to keep things simple and clear.

Steps:

  1. Open your terminal or command prompt
  2. Type the following command:
flutter create hello_world

Flutter will generate a hello_world folder with the standard structure and files for a Flutter app.

Flutter Project Structure

Once the project is created, you’ll see a structure like this:

hello_world/
├── android/           // Android platform code
├── ios/               // iOS platform code
├── lib/               // Main directory for coding
│   └── main.dart      // Entry point of the app
├── test/              // Unit testing
├── pubspec.yaml       // Dependency configuration

Running the App

  1. Open the hello_world folder in VS Code or Android Studio
  2. Launch an Android/iOS emulator, or connect your phone via USB (make sure USB debugging is enabled)
  3. Click the Run button, or run it from terminal:
flutter run

Voila! The default Flutter app should now appear on your emulator or phone, complete with a counter button.

Understanding main.dart

Let’s briefly go through the contents of main.dart:

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'),
    );
  }
}

You can start experimenting by changing the text, colors, or layout inside MyHomePage.

Conclusion

Today, we’ve covered a lot:

Tomorrow, we’ll dig deeper into widgets, layouts, and start designing a simple UI. Keep the spirit up! Don’t be afraid to explore and try things out—learning to code is most fun when you get hands-on.

See you on Day 2!