Develop Flutter Application Using Visual Studio Code

Flutter has become one of the most popular frameworks for cross-platform mobile app development, enabling developers to build beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Visual Studio Code (VS Code), a lightweight but powerful source code editor, is a preferred tool for many flutter developers due to its speed, extensions, and developer-friendly features.

In this post, you'll learn how to develop a helow world flutter application using Visual Studio Code.

Develop Flutter Application Using Visual Studio Code

Getting Started

Before you begin, make sure you have installed flutter SDK and editor Visual Studio Code(VS Code), my previous post provides complete guide for setting up flutter development dnvironment.Please visit that post if you haven't completed the installation.

Create a New Flutter Project

Open VS Code and do the following:

• Press Ctrl + Shift + P to open the command palette.
• Type Flutter: New Project and select it.
• Choose the type of project (e.g., Flutter Application).
• Select Folder window will be opened
  1. Select the location to save the project.
  2. Then Click on the Select a Folder to Create the project in button.
• Enter a name for your project.
• Press Enter to Create Flutter project
• VS Code will generate a Flutter project template. with the default below code

 import 'package:flutter/material.dart';  
 void main() {  
  runApp(MyApp());  
 }  
 class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
   return MaterialApp(  
    title: 'My First Flutter App',  
    theme: ThemeData(primarySwatch: Colors.blue),  
    home: Scaffold(  
     appBar: AppBar(title: Text("Hello Flutter")),  
     body: Center(child: Text("Welcome to Flutter!")),  
    ),  
   );  
  }  
 }  

Explore the Project Structure

Once the project is created, open the folder if it isn’t already. You will find a list of folders and files related to Flutter and your project. However, we will cover only a few important files listed below.

• lib/main.dart: Entry point of your Flutter app.
• pubspec.yaml: Used to manage dependencies, assets, fonts, etc.
• android/ and ios/: Platform-specific code and configuration.
• test/: Contains unit and widget tests.

Run the App

You can run the app in a simulator, emulator, or physical device. Click on the device selector at the bottom right of VS Code and choose your target device then press F5 or use Ctrl+F5 to run the app

Edit Flutter Development File and Hot Reload

Modify the UI in lib/main.dart. For example, change the title or home widget.

 import 'package:flutter/material.dart';  
 void main() {  
  runApp(MyApp());  
 }  
 class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
   return MaterialApp(  
    title: 'My first flutter application',  
    theme: ThemeData(primarySwatch: Colors.blue),  
    home: Scaffold(  
     appBar: AppBar(title: Text("Hello Flutter")),  
     body: Center(child: Text("Welcome to Flutter!")),  
    ),  
   );  
  }  
 }  

Save the file, and VS Code will perform a hot reload to reflect changes instantly without restarting the app.

Tips

• Use flutter pub get to install dependencies
• Use flutter run to run from terminal
• Use flutter build apk to generate release APK

Summary

Visual Studio Code is a great IDE for Flutter development due to its speed, integrated terminal, plugin support, and seamless debugging experience. By following this guide, you should now be able to create, run, and debug Flutter apps efficiently using VS Code. I hope this was helpfult to you.

Thanks