## Learning Objectives

By the end of this chapter, you will be able to:

- Describe the mobile development landscape and where Flutter fits
- Compare native, cross-platform, and Flutter approaches
- Install and verify the Flutter toolchain and editor integrations
- Create and run the first Flutter project and inspect its structure

1

## Mobile Development Approaches

Understanding the different approaches to mobile app development is crucial for making informed decisions. Let's explore the three main paradigms:

### Native Development

Platform-specific languages (Kotlin/Java for Android, Swift/Obj‑C for iOS) are used to build applications that run directly on the target platform.

Advantages:

- Deep platform access and native APIs
- Optimized performance
- Full access to platform-specific features

Disadvantages:

- Requires maintaining two separate codebases
- Higher development and maintenance costs
- Longer time to market for multiple platforms

### Cross-platform (Other Frameworks)

Frameworks like React Native and Xamarin allow sharing business logic across platforms while using platform-specific UI components.

Advantages:

- Shared business logic across platforms
- Faster development for multiple platforms
- Single team can work on both platforms

Disadvantages:

- Bridging gaps with native modules adds complexity
- Performance may not match native apps
- Platform-specific customization can be challenging

### Flutter

Flutter uses a single Dart codebase and renders UI with its own performant engine, delivering native-like performance and consistent UI across all platforms.

Key Strengths:

- Fast development cycle with hot reload
- Highly expressive and customizable UI
- Growing ecosystem and community support
- Consistent performance across platforms
- Single codebase for all platforms

2

## Installing the Toolchain (Essentials)

To begin developing with Flutter, you need to set up the development environment. Follow these steps in order:

Step 1

#### Download Flutter SDK

Download the Flutter SDK for your operating system from flutter.dev. Extract the archive to a location on your system. Important: Choose a path that contains no spaces, as this can cause issues with Flutter tools.

Step 2

#### Add Flutter to PATH

Add the Flutter bin directory to your system's PATH environment variable. After adding to PATH, open a new terminal window and run:

    flutter doctor

This command will check your environment and display a report of the status of your Flutter installation. Resolve any missing dependencies that are reported.

Step 3

#### Install a Code Editor

Choose and install a code editor. VS Code is recommended for beginners due to its simplicity and excellent Flutter support. Alternatively, you can use Android Studio, which provides a more comprehensive IDE experience.

After installing your editor, add the Flutter and Dart plugins/extensions from the editor's marketplace or plugin repository.

Step 4

#### Set Up Android Device or Emulator

For Android development, you have two options:

- Physical Device: Enable USB debugging on your Android device and connect it to your computer via USB.
- Emulator: Install the Android SDK, then use Android Studio to create an Android Virtual Device (AVD) that you can use for testing.

Step 5

#### Optional: Additional Platform Support

For web development, install Chrome browser. If you're on macOS and want to develop for iOS, install Xcode from the Mac App Store. These are optional and can be added later if needed.

3

## Verify Environment

After installation, verify that your Flutter environment is properly configured:

Terminal Command

    flutter doctor

#### Expected Outcome

You should see green checkmarks (✓) for the following components:

- Flutter SDK installation
- Android toolchain (if developing for Android)
- Connected device or emulator
- Editor plugins (VS Code or Android Studio)

If any items show warnings or errors, follow the instructions provided by `flutter doctor` to resolve them before proceeding with development.

4

## Create and Run the First Flutter App

Now that your environment is set up, let's create your first Flutter application:

1

#### Create a New Project

Open your terminal and navigate to the directory where you want to create your project. Run the following command:

    flutter create hello_afrilen

This creates a new Flutter project named "hello_afrilen" with all the necessary files and folder structure.

2

#### Navigate to Project Directory

Change into the project directory:

    cd hello_afrilen

3

#### Prepare Your Device

Ensure you have either:

- An emulator running (launch it from Android Studio or using `flutter emulators --launch`)
- A physical device connected with USB debugging enabled

Verify your device is detected by running `flutter devices`.

4

#### Run the Application

Execute the following command to build and run your app:

    flutter run

The app will compile and launch on your connected device or emulator.

#### What to Expect

A starter Flutter application will launch, displaying a counter app with a floating action button. This is the default Flutter template.

Hot Reload: One of Flutter's powerful features is hot reload. While your app is running, you can:

- Press `r` in the terminal to hot reload
- Press `R` for a full restart
- Use the hot reload button in your editor (VS Code or Android Studio)

Changes to your code will appear instantly in the running app without losing the current application state.

5

## Anatomy of a Flutter Project

Understanding the structure of a Flutter project is essential for effective development. Here are the key directories and files:

`pubspec.yaml` Configuration File

This file contains project metadata, dependencies, and asset declarations. It's the central configuration file for your Flutter project, similar to package.json in Node.js or requirements.txt in Python.

`lib/main.dart` Source File

The main entry point of your application. This file contains the `main()` function and typically sets up the root widget of your app. Most of your application code will be organized within the `lib/` directory.

`lib/` Directory

The primary source code directory. Organize your Dart files here, typically in subdirectories like `screens/`, `widgets/`, `models/`, and `services/` as your project grows.

`android/` and `ios/` Directories

Platform-specific configuration and build files. The `android/` directory contains Android-specific code, resources, and configuration (like AndroidManifest.xml). The `ios/` directory contains iOS-specific files (like Info.plist). You'll rarely need to modify these unless you're adding platform-specific features.

`build/` and `.dart_tool/` Generated Directories

These directories contain generated files and build artifacts. They are automatically created by Flutter and should be excluded from version control (added to `.gitignore`). Never commit these directories to your repository.

`.gitignore` Configuration File

Specifies which files and directories Git should ignore. Flutter provides a default `.gitignore` that includes build artifacts, IDE files, and other files that shouldn't be version controlled. It's recommended to use Flutter's default settings.

6

## First Code Walkthrough (Conceptual)

Before diving into detailed coding, let's understand the fundamental concepts that form the basis of every Flutter application:

#### The main() Function

Every Dart program, including Flutter apps, starts execution from the `main()` function. This is the entry point where your application begins running. In Flutter, `main()` typically calls `runApp()` with your root widget.

#### Top-Level Widget

A Flutter app typically creates a top-level widget that defines the overall structure. The two most common choices are:

- `MaterialApp` - Implements Material Design guidelines (Android-style)
- `CupertinoApp` - Implements Cupertino Design guidelines (iOS-style)

These widgets provide essential app-level configuration including routes, theme, localization, and the home screen widget.

#### Widget Types

Flutter's UI is built entirely from widgets. There are two fundamental widget types:

- StatelessWidget: Used for UI elements that don't change over time. Once built, they remain static unless their parent rebuilds them with new data.
- StatefulWidget: Used for UI elements that can change dynamically. They maintain state that can trigger rebuilds when updated using `setState()`.

Understanding when to use each type is crucial for building efficient Flutter applications.

## Assignment (Session 1)

Objective: Set up your development environment and create your first Flutter application.

1. Install Flutter SDK on your system following the steps outlined in Section 2.
2. Set up an emulator or connect a physical Android device for testing.
3. Create a new Flutter project named `hello_afrilen` using the `flutter create` command.
4. Run the project on your device or emulator using `flutter run`.
5. Modify the home screen to display centered text: "Hello Afrilen" instead of the default counter app.
6. (Optional) Initialize a Git repository and commit your initial project.

Deliverable: Submit a screenshot or description of your running application showing the "Hello Afrilen" text, along with the terminal output from `flutter doctor` showing all green checkmarks.

## Quick Follow-up Tasks (Self-Study)

To reinforce your understanding, complete these additional exercises:

1. Explore the Default Code: Open `lib/main.dart` in your editor and identify the following elements:
   - The `main()` function and its purpose
   - The `runApp()` function call
   - The `MaterialApp` widget and its properties
   - The `Scaffold` widget and its role in the layout
2. Experiment with Hot Reload: Make a simple change to the displayed text in your app. Save the file and observe how the UI updates instantly without restarting the application. Try changing colors, text sizes, or adding new widgets to see hot reload in action.
3. Device Management: Use the following commands to familiarize yourself with device management:
   - `flutter devices` - Lists all connected devices and emulators
   - `flutter emulators --launch <emulator_id>` - Launches a specific emulator
   - `flutter emulators` - Lists all available emulators

Chapter 1 of 20