How to setup Flutter and Dart with VSCode

Setting up Flutter and Dart with Visual Studio Code (VS Code) involves a few straightforward steps to configure your development environment for Flutter app development. Here’s a detailed guide:

Prerequisites:

1. Install Flutter SDK:

   • Download and install the Flutter SDK from the Flutter website.
   • Extract the downloaded ZIP file to a location on your machine (e.g., C:\src\flutter on Windows, or /Users/<your-username>/src/flutter on macOS/Linux).
   • Add the Flutter bin directory to your system's PATH variable.

2. Install Dart SDK:

   • Dart SDK comes bundled with Flutter, so once you install Flutter, Dart is also installed.

3. Install Visual Studio Code:

   • Download and install Visual Studio Code.

Setup Flutter and Dart in Visual Studio Code:

1. Install Flutter Extension:

• Open VS Code.
• Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window, or press Ctrl+Shift+X (Cmd+Shift+X on macOS).
• Search for "Flutter" in the Extensions Marketplace.
• Click "Install" to install the Flutter extension provided by Dart Code.

2. Set Flutter SDK Path:

• Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on macOS).
• Type and select "Flutter: Select Flutter SDK".
• Navigate to the location where you installed Flutter SDK and select the root directory (e.g., C:\src\flutter on Windows, or /Users/<your-username>/src/flutter on macOS/Linux).
• This sets the Flutter SDK path for your VS Code workspace.

3. Create a New Flutter Project:

• Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on macOS).
• Type and select "Flutter: New Project".
• Enter a project name and select a location for your new Flutter project.
• VS Code will create a new Flutter project for you.

4. Open and Run a Flutter Project:

• Open your Flutter project folder in VS Code.
• Open the lib/main.dart file (or any Dart file with a main() function).
• Click on the green "Run" button in the top right corner of the editor, or press F5.
• VS Code will prompt you to select a device (simulator/emulator or physical device).
• Select a device, and VS Code will build and run your Flutter app on the selected device.

5. Flutter and Dart Syntax Support:

• VS Code with the Flutter extension provides syntax highlighting, code completion, and linting for Flutter and Dart code out-of-the-box.
• Use the Problems panel to view any issues found in your code.

6. Hot Reload and Debugging:

• Make changes to your Flutter code and save (Ctrl+S or Cmd+S).
• Use Hot Reload (Ctrl+Shift+F5 or Cmd+Shift+F5) to instantly see changes reflected in your running app.
• Use the Debug panel to set breakpoints, inspect variables, and debug Flutter/Dart code.

Additional Tips:

• Terminal Integration: Use VS Code's integrated terminal (Ctrl+``) for running Flutter CLI commands like flutter doctor, flutter pub get`, etc.
• Extensions: Explore and install additional VS Code extensions for Flutter and Dart development to enhance your workflow.