How to Set Up Flutter with Visual Studio Code and Run Your First App

Flutter is an open-source UI software development kit from Google that allows you to build natively compiled applications for mobile, web, and desktop from a single codebase. If you want to use Flutter for mobile development, Visual Studio Code (VS Code) is a great lightweight code editor that provides excellent support for Flutter.

In this guide, we’ll walk through the steps to configure Flutter with Visual Studio Code and run your first Flutter app.

Step 1: Install Flutter SDK

Before you start, you need to install the Flutter SDK on your computer. Follow these steps:

1. Download Flutter SDK

• Go to the official Flutter website: https://flutter.dev.
• Download the Flutter SDK for your operating system (Windows, macOS, or Linux).

2. Extract the Flutter SDK

• Extract the downloaded zip file to a desired location on your system. For example, on Windows, you can extract it to C:\flutter.

3. Add Flutter to Your Path

• On Windows: Right-click on "This PC" > Properties > Advanced system settings > Environment Variables. In the System variables section, find and select Path, then click Edit. Add the full path to your Flutter bin directory (e.g., C:\flutter\bin).
• On macOS/Linux: Open the terminal and run the following command:

  export PATH="$PATH:`pwd`/flutter/bin"

  You can also add this to your ~/.bashrc or ~/.zshrc file for persistent changes.

4. Run Flutter Doctor

Open a terminal and run:

flutter doctor

This command checks your environment and shows any dependencies you need to install, such as the Android SDK or Xcode (for iOS development).

Step 2: Install Visual Studio Code

If you don't have Visual Studio Code installed, follow these steps:

1. Download and Install VS Code

• Go to the official website: https://code.visualstudio.com and download the appropriate version for your OS.

2. Install Flutter and Dart Plugins

• Launch VS Code and go to the Extensions tab (you can open it with Ctrl+Shift+X on Windows or Cmd+Shift+X on macOS).
• Search for Flutter and click on the Install button for the Flutter extension by Dart Code.
• The Dart plugin will automatically be installed along with Flutter, as Dart is the programming language used in Flutter.

Step 3: Set Up Your First Flutter App

Now that Flutter is installed, you can create and run your first Flutter app.

1. Create a New Flutter Project

• Open VS Code and open the command palette (use Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS).
• Type Flutter: New Project and select it.
• Select Application as the project type.
• Choose a location to save the project and give it a name (e.g., my_first_flutter_app).
• VS Code will create a new Flutter project with default files and directories.

2. Run Your App

Connect a physical Android or iOS device to your computer, or start an emulator or simulator. In VS Code, open the command palette and select Flutter: Select Device to choose your device or emulator.

Press F5 or click on the green play button in the VS Code toolbar to start the app. Flutter will build the app and install it on the selected device or emulator.

3. See the Results

Once the app is running, you should see the default Flutter application on your device or emulator. The default Flutter app includes a floating action button that you can click to change the text.

Step 4: Modify the App

To explore Flutter’s capabilities further, let’s modify the app slightly:

• Open the lib/main.dart file in your project.
• Replace the default code inside the MyHomePage widget with the following code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}
        

Save the file and see the changes in real-time on your emulator or device.

Step 5: Hot Reload and Debugging

Flutter’s Hot Reload feature allows you to instantly see changes in your app without restarting it. You can press r in the terminal or use the hot reload button in VS Code to see your changes immediately.

For debugging, you can set breakpoints and use VS Code’s debugging tools to step through the code and inspect variables.

Step 6: Build and Run for Release

When you’re ready to release your app, you can build it for production. You can run the following commands in the terminal:

1. Build for Android

flutter build apk

2. Build for iOS (macOS only)

flutter build ios

Conclusion

Now that you’ve set up Flutter with Visual Studio Code and run your first app, you can start exploring more Flutter widgets, add functionality, and create fully-featured mobile applications.

Happy coding!