A Beginner's guide: Setting up your first flutter Application

Abduqudus — Thu, 27 Mar 2025 22:35:27 +0000

Setting Up Flutter on Windows, macOS, and Linux

Setting up Flutter for the first time can be a rewarding experience, enabling you to develop high-performance applications for mobile, web, and desktop from a single codebase. This comprehensive guide will walk you through the installation process on Windows, macOS, and Linux, address common issues you might encounter, provide solutions to ensure a smooth setup, and guide you on setting up both emulators and physical devices for testing.

Prerequisites

Before you begin, ensure your system meets the following requirements:

Operating System:
- Windows: Windows 7 SP1 or later (64-bit)
- macOS: macOS (64-bit)
- Linux: Any recent 64-bit distribution
Disk Space: At least 1.64 GB of free space (excluding space for IDE/tools)
Tools:
- Windows: Windows PowerShell 5.0 or newer, Git for Windows
- macOS/Linux: bash, curl, git 2.x, mkdir, rm, unzip, which
Internet Connection: Required to download necessary files

1. Install Flutter SDK

Windows

Download Flutter SDK:
- Visit the official Flutter website: flutter.dev
- Download the latest stable Flutter SDK for Windows.
Extract the Flutter SDK:
- Extract the downloaded zip file to a desired location, e.g., C:\src\flutter.
Update Your Path:
- Add C:\src\flutter\bin to your system's PATH environment variable:
  - Press Win + R, type sysdm.cpl, and press Enter.
  - Navigate to the Advanced tab and click on Environment Variables.
  - Under System Variables, find Path and click Edit.
  - Add C:\src\flutter\bin to the list and save.

macOS

Download Flutter SDK:
- Visit the official Flutter website: flutter.dev
- Download the latest stable Flutter SDK for macOS.

Extract the Flutter SDK:

Open Terminal and run:

 cd ~/development
 unzip ~/Downloads/flutter_macos_<version>.zip

Update Your Path:
- Add Flutter to your PATH by adding the following line to your ~/.zshrc or ~/.bash_profile:
```
 export PATH="$PATH:`pwd`/flutter/bin"
```

Run source ~/.zshrc or source ~/.bash_profile to refresh the terminal.

Linux

Download Flutter SDK:
- Visit the official Flutter website: flutter.dev
- Download the latest stable Flutter SDK for Linux.

Extract the Flutter SDK:

Open Terminal and run:

 cd ~/development
 tar xf ~/Downloads/flutter_linux_<version>.tar.xz

Update Your Path:
- Add Flutter to your PATH by adding the following line to your ~/.bashrc or ~/.zshrc:
```
 export PATH="$PATH:`pwd`/flutter/bin"
```

Run source ~/.bashrc or source ~/.zshrc to refresh the terminal.

2. Install Development Tools

Visual Studio Code (VS Code)

Install VS Code:
- Download and install Visual Studio Code.
Install Flutter and Dart Extensions:
- Open VS Code.
- Go to the Extensions Marketplace.
- Search for and install the Flutter and Dart extensions.

Android Studio (Optional but Recommended)

Install Android Studio:
- Download and install Android Studio.
Install Flutter and Dart Plugins:
- Open Android Studio.
- Go to Preferences > Plugins.
- Search for and install the Flutter and Dart plugins.
Set Up Android Emulator:
- Open Android Studio.
- Go to Tools > AVD Manager.
- Click on Create Virtual Device.
- Select a device definition and click Next.
- Choose a system image and click Next.
- Click Finish to create the emulator.

Xcode (macOS Only)

Install Xcode:
- Download and install Xcode from the Mac App Store.

Install Command Line Tools:

Open Terminal and run:

 xcode-select --install
 xcodebuild -license accept

3. Verify Flutter Installation

After installing Flutter and setting up your environment, verify everything is correctly configured by running the following command in your terminal or command prompt:

flutter doctor

This command checks your environment and displays a report of the status of your Flutter installation. Ensure all checkmarks are green.

If any issues are reported, follow the provided instructions to resolve them.

4. Set Up a Physical Device

Android Devices

Enable Developer Options:
- Go to your Android device settings.
- Tap About phone and find Build number.
- Tap Build number seven times to enable developer mode.
Enable USB Debugging:
- In Developer options, turn on USB debugging.
Connect Your Device:
- Use a USB cable to connect your device to your computer.
- Ensure your device is recognized by running:
```
 flutter devices
```

iOS Devices (macOS Only)

Enable Developer Mode:
- Connect your iPhone or iPad to your Mac.
- Open Xcode and select Window > Devices and Simulators.
Trust Your Mac:
- Unlock your device and confirm the trust prompt.
Check Device Recognition:
- Ensure your device is recognized by running:
```
 flutter devices
```

5. Create and Run a Flutter Project

Create a New Flutter Project:

   flutter create my_app
   cd my_app

Run the Application:

   flutter run

You should see the default Flutter application running on your device or emulator.

6. Keep Flutter Updated

Regularly update Flutter and its dependencies to stay on the latest stable release:

flutter upgrade

Check for outdated packages in your Flutter project:

flutter pub outdated

Conclusion

Setting up Flutter correctly is the first step toward building high-quality, cross-platform applications. By following this guide, you've installed Flutter, configured your development environment, and learned how to create and run your first project. Continue exploring Flutter documentation and practice building applications to enhance your skills.

The Motives Driving My Change from React to Flutter (While Preserving Both)

Abduqudus — Thu, 20 Mar 2025 21:58:41 +0000

Introduction:
Developing Mobile apps or let me call it Applications generally, I was thriving on learning Java which is very popular for mobile development, But as a beginner that I was then, someone told me every developer must start with html, that's when I started web development gradually I became a front-end developer with react, in recent days I realized I need to switch to non-saturated path which triggers the passion I had then. making me jump to conclusion of entering app development with flutter.
Why I am keeping both:

Using react and Firebase have gave me a solid foundation of programming
I spent so much time learning reactjs, and I don't want that knowledge to go to waste
Keeping both will make me versatile in the job market

I'll like to hear your thoughts on this in the comment section.
and feel free to connect with me on Twitter: @techifydev_1 and feel free to reach out via email: techifydev1@gmail.com

DEV Community: Abduqudus

Feeling overwhelmed setting up you first flutter project?