I Built My First Flutter App Using ChatGPT — Here’s the Exact Setup That Worked

I tried learning Flutter multiple times and failed—until I used ChatGPT as my guide.
Instead of jumping between tutorials, I followed a simple setup process and built my first working Flutter app in one day. This article shares the exact steps, from installing Flutter and adding it to PATH to creating a real app that actually runs.

If you’re new to Flutter, the hardest part is often getting started—installing Flutter, adding it to PATH, and creating your very first app. This guide walks you through everything, step by step, with a working Flutter app example at the end.

No assumptions. No skipped steps.


Step 1: Download the Flutter SDK

  1. Visit the official Flutter website
    👉 https://flutter.dev/docs/get-started/install
  2. Download Flutter for your operating system:
    • Windows → ZIP file
    • macOS → ZIP file
    • Linux → TAR.XZ file
  3. Extract the file.

📁 Recommended locations:

  • Windows: C:\flutter
  • macOS: /Users/yourname/flutter
  • Linux: /home/yourname/flutter

⚠️ Avoid installing Flutter inside Program Files (Windows).


Step 2: Add Flutter to PATH

Adding Flutter to PATH allows you to run Flutter commands from anywhere.


✅ Windows: Add Flutter to PATH

  1. Right-click This PCProperties
  2. Click Advanced system settings
  3. Click Environment Variables
  4. Under System variables, select Path
  5. Click EditNew
  6. Add: C:\flutter\bin
  7. Click OK and restart Command Prompt

Verify:

flutter --version

✅ macOS: Add Flutter to PATH

  1. Open Terminal
  2. Edit your shell config: nano ~/.zshrc
  3. Add: export PATH="$PATH:$HOME/flutter/bin"
  4. Save and reload: source ~/.zshrc

Verify:

flutter --version

✅ Linux: Add Flutter to PATH

  1. Open Terminal
  2. Edit .bashrc: nano ~/.bashrc
  3. Add: export PATH="$PATH:$HOME/flutter/bin"
  4. Reload: source ~/.bashrc

Verify:

flutter --version

Step 3: Run Flutter Doctor

Flutter includes a diagnostic tool:

flutter doctor

This checks:

  • Flutter SDK
  • Dart
  • Android toolchain
  • Connected devices

Fix any issues marked in red by following Flutter’s suggestions.


Step 4: Install Android Studio

  1. Download Android Studio
    👉 https://developer.android.com/studio
  2. During installation, make sure these are selected:
    • Android SDK
    • Android SDK Platform Tools
    • Android Emulator
  3. Open Android Studio → Plugins
  4. Install Flutter plugin (Dart installs automatically)

Step 5: Set Up an Emulator or Device

Option 1: Android Emulator

  • Open Android Studio
  • Device Manager → Create Virtual Device
  • Start emulator

Option 2: Physical Device

  • Enable Developer Options
  • Enable USB Debugging
  • Connect phone via USB

Check devices:

flutter devices

Step 6: Create Your First Flutter Application (Example Included)

Now comes the exciting part—creating your first Flutter app.


Create a New Flutter Project

Run:

flutter create first_flutter_app
cd first_flutter_app
flutter run

You should see a default Flutter app running 🎉


Step 7: Build a Simple Example App (Counter App)

Let’s modify the app into a simple counter application.

What this app does:

  • Displays a counter value
  • Increases the value when a button is pressed

Replace lib/main.dart with This Code

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: CounterScreen(),
    );
  }
}

class CounterScreen extends StatefulWidget {
  const CounterScreen({super.key});

  @override
  State<CounterScreen> createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  int counter = 0;

  void incrementCounter() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('My First Flutter App'),
      ),
      body: Center(
        child: Text(
          'Counter Value: $counter',
          style: const TextStyle(fontSize: 24),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: incrementCounter,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Step 8: Run and Test the App

Save the file and run:

flutter run

Press the + button—the counter increases 🎯
You’ve successfully built your first Flutter app!


Understanding What You Just Built

Key concepts you learned:

  • MaterialApp → App wrapper
  • Scaffold → Screen structure
  • StatefulWidget → Handles changing UI
  • setState() → Updates the UI
  • FloatingActionButton → User interaction

How ChatGPT Helps During This Process

You can ask ChatGPT:

  • “Why is my Flutter command not working?”
  • “Explain StatefulWidget simply”
  • “Fix my flutter doctor error”
  • “Add dark mode to this app”

ChatGPT acts like a real-time Flutter mentor.


Final Thoughts

By correctly:

  1. Installing Flutter
  2. Adding it to PATH
  3. Running Flutter Doctor
  4. Creating your first app

—you’ve completed the hardest part of Flutter.

From here, everything gets easier 🚀