Lab 1: Introduction to Flutter - Personal Finance Tracker

Objectives

Set up Flutter development environment
Create your first Flutter application
Understand basic Flutter concepts and hot reload
Build the initial shell of your finance tracker app

Prerequisites

Basic programming knowledge
Computer with Windows, macOS, or Linux
Minimum 8GB RAM recommended
At least 10GB of free disk space

Setup Instructions

1. Install Flutter SDK

For Windows:

Download the Flutter SDK from flutter.dev/docs/get-started/install/windows
Extract the zip file to a location like C:\src\flutter (avoid spaces in the path)
Add Flutter to your PATH:
- Search for "Environment Variables" in Windows search
- Click "Edit the system environment variables"
- Click "Environment Variables"
- Under "System variables", find and select "Path"
- Click "Edit" and add the path to flutter\bin directory
- Click "OK" to save

For macOS:

Download the Flutter SDK from flutter.dev/docs/get-started/install/macos
Extract the file to a location like ~/development
Add Flutter to your PATH:
- Open Terminal
- Run nano ~/.zshrc or nano ~/.bash_profile (depending on your shell)
- Add export PATH="$PATH:[PATH_TO_FLUTTER_DIRECTORY]/flutter/bin"
- Save and exit (Ctrl+X, then Y)
- Run source ~/.zshrc or source ~/.bash_profile

For Linux:

Download the Flutter SDK from flutter.dev/docs/get-started/install/linux
Extract to a location like ~/development/flutter
Add Flutter to your PATH:
- Run nano ~/.bashrc
- Add export PATH="$PATH:[PATH_TO_FLUTTER_DIRECTORY]/flutter/bin"
- Save and exit (Ctrl+X, then Y)
- Run source ~/.bashrc

2. Install an IDE

Choose one of the following:

Visual Studio Code (Recommended for beginners):

Download and install from code.visualstudio.com
Open VS Code and install the Flutter extension:
- Click on Extensions icon on the left sidebar
- Search for "Flutter"
- Click "Install" on the Flutter extension by Dart Code

Android Studio:

Download and install from developer.android.com/studio
Open Android Studio and install the Flutter plugin:
- Go to Preferences/Settings > Plugins
- Search for "Flutter"
- Click "Install" and restart Android Studio when prompted

3. Set up an Emulator or Connect a Physical Device

Android Emulator:

Open Android Studio
Click on "AVD Manager" (Android Virtual Device Manager)
Click "Create Virtual Device"
Select a phone (like Pixel 8) and click "Next"
Download a system image (recommend API 30 or newer) and click "Next"
Name your emulator and click "Finish"

iOS Simulator (macOS only):

Install Xcode from the App Store
Open Xcode and accept the license agreement
Install additional components if prompted
Open Terminal and run open -a Simulator

Physical Device:

For Android: Enable Developer Options and USB Debugging on your device
For iOS: Register as an Apple Developer and set up your device in Xcode

4. Verify Installation

Open Terminal or Command Prompt
Run flutter doctor
Address any issues that appear with red X marks
When most items have green checkmarks, you're ready to proceed

Creating Your First Flutter App

1. Create a New Flutter Project

Open Terminal or Command Prompt
Navigate to your desired project location

Run the following command:

flutter create personal_finance_tracker

Wait for the project to be created
Navigate into the project directory:
```
cd personal_finance_tracker
```

2. Explore the Project Structure

Open the project in your IDE and explore the key files:

lib/main.dart - Main entry point of your application
pubspec.yaml - Project configuration and dependencies
android/ and ios/ - Platform-specific code

3. Run the Default App

Start your emulator or connect your physical device
In Terminal/Command Prompt (in your project directory), run:
```
flutter run
```
Wait for the app to compile and launch
You should see the default Flutter counter app

4. Understand Hot Reload

With the app running, open lib/main.dart in your IDE
Find the text 'Flutter Demo' and change it to 'My Finance Tracker'
Save the file
Notice how the app updates immediately without restarting - this is hot reload!
Try changing the colors or counter text to experiment further

Building the Finance Tracker Shell

Now that you understand the basics, let's create the initial shell for your finance tracker app.

1. Clean the Default App

Replace the entire content of lib/main.dart with this simplified code:

import 'package:flutter/material.dart';

void main() {
  runApp(const PersonalFinanceApp());
}

class PersonalFinanceApp extends StatelessWidget {
  const PersonalFinanceApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Personal Finance Tracker',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
        useMaterial3: true,
      ),
      home: const DashboardScreen(),
    );
  }
}

class DashboardScreen extends StatelessWidget {
  const DashboardScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Personal Finance Tracker'),
        backgroundColor: Theme.of(context).colorScheme.primary,
        foregroundColor: Theme.of(context).colorScheme.onPrimary,
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.account_balance_wallet, size: 100, color: Colors.green),
            SizedBox(height: 20),
            Text(
              'Welcome to Your Finance Tracker!',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 10),
            Text(
              'Track your expenses and income',
              style: TextStyle(fontSize: 16, color: Colors.grey),
            ),
          ],
        ),
      ),
    );
  }
}

2. Save and Run the App

Save the file
If the app is already running, it will hot reload
If not, run flutter run in the terminal

3. Understand the Code

Let's break down what this code does:

void main() - The entry point of the app that runs our main app widget
PersonalFinanceApp - A StatelessWidget that sets up the MaterialApp
- MaterialApp - Provides the overall structure and theme
- title - The title shown in recent apps on mobile devices
- theme - The color scheme and visual properties
- home - The main widget to display
DashboardScreen - A StatelessWidget that creates our main screen
- Scaffold - Provides the basic material design layout
- AppBar - The top bar with the app title
- body - The main content area

Lab Exercises

Exercise 1: Customize the App Theme

Change the primary color to a color of your choice. Try different colors from the Colors class, such as Colors.blue, Colors.purple, or Colors.teal.

Exercise 2: Add an App Icon to the AppBar

Modify the AppBar to include an icon. Add this before the title:

leading: Icon(Icons.account_balance_wallet),

Exercise 3: Add a Simple Action Button

Add a floating action button that will eventually be used to add transactions:

floatingActionButton: FloatingActionButton(
  onPressed: () {
    // Will implement this in future labs
    debugPrint('Button pressed!');
  },
  tooltip: 'Add Transaction',
  child: Icon(Icons.add),
),

Add a bottom navigation bar that will be expanded in future labs:

bottomNavigationBar: BottomNavigationBar(
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.pie_chart),
      label: 'Statistics',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.settings),
      label: 'Settings',
    ),
  ],
  currentIndex: 0,
  onTap: (index) {
    // Will implement navigation in future labs
    debugPrint('Tapped item $index');
  },
),

Deliverables

By the end of this lab, you should have:

A working Flutter development environment
A basic understanding of Flutter project structure
Experience with hot reload
A simple app shell for your finance tracker with:
- Customized app title
- Basic theme
- App bar
- Floating action button
- Bottom navigation bar

Troubleshooting Common Issues

Flutter Doctor Shows Errors: Follow the suggestions provided by the flutter doctor command to resolve each issue.
App Won't Run: Ensure your emulator is running or device is connected and recognized by running flutter devices.
Hot Reload Not Working: Make sure you're saving the file and that there are no syntax errors.
Missing Dependencies: If you see errors about missing packages, run flutter pub get in your project directory.

Next Steps

In the next lab, we'll expand our app by adding widgets and layouts to create a proper dashboard for our finance tracker.

Mobile Application Development