Flutter is a cross-platform app development framework. In this post, we will do a basic setup for Flutter development in Windows and macOS.
Prerequisites
Before we dive into the installation process, make sure you have the following prerequisites:
- A computer
- git
- Google Chrome
- VSCode
Installing Flutter
First, let's download and install the Flutter SDK by following these steps:
- Visit the official Flutter documentation at docs.flutter.dev.
- Select your operating system (Windows or macOS) from the provided options.
- Follow the installation instructions until you reach the point where you are instructed to run the
flutter doctor
command.
Windows Setup
Once you've downloaded Flutter, ensure that your Flutter path is correctly configured. Here are the steps to set up Flutter on Windows:
- Open a console window within the Flutter directory.
-
Run the following command:
flutter doctor
-
Verify that the response includes the following entries:
- [✓] Flutter
- [✓] Chrome - develop for the web
- [✓] VS Code
macOS Setup
For macOS users, it's essential to select the appropriate SDK for your Mac (Intel or Apple Silicon) during installation. Follow these additional steps after unzipping the Flutter package:
Place the Flutter directory in a preferred location, such as
/your_username/Developer
.-
Open the Terminal and execute the following commands to add the Flutter path to your environment variables:
vi ~/.bash_profile
This will open your
bash_profile
in the VIM text editor. If you encounter difficulties using VIM, refer to online resources for assistance. -
Press 'i' to enter insert mode, then add the following line inside your
bash_profile
:
export PATH="$PATH:/Users/your_username/Developer/flutter/bin"
Be sure to replace "your_username" with your actual username and adjust the path accordingly if you placed the Flutter directory elsewhere.
After adding the path variable, press the ESC key and then type
Shift-z-z
to save and exit.-
In Terminal, run the following command to verify your setup:
flutter doctor
Ensure that the response includes the following entries:
- [✓] Flutter
- [✓] Chrome - develop for the web
- [✓] VS Code
Platform Setup
Congratulations! You have successfully set up Flutter for web development. If you intend to develop for other platforms, you can find detailed instructions in the official Flutter documentation here.
VSCode Extensions
To enhance your Flutter development experience in VSCode, install the following extensions:
- Flutter
- Dart
- Awesome Flutter Snippets (optional)
After installing these extensions, restart VSCode for the changes to take effect.
Running Your First Flutter Web App
Now that you have Flutter configured, it's time to create and run your first web app:
Creating a Flutter Project
You can create a Flutter project using either the terminal or VSCode:
via Terminal:
Navigate to the directory where you want to create the project and run:
flutter create project_name
via VSCode:
- Open the command palette in VSCode (Mac:
Cmd + Shift + P
, Windows:Ctrl + Shift + P
). - Search and select "Flutter: New Project."
Running the App
Once your project is created, you can run your web app as follows:
via Terminal:
Navigate to your project folder and execute the following command to launch the development server:
flutter run -d chrome
via VSCode:
Go to any Dart file in your project, click on the debug option, and run it from the top-right corner of VSCode.
Your Flutter web app will be accessible through a web browser by opening the following URL: http://localhost:5000 (note that the port may be different).
Conclusion
Congratulations! You've successfully set up Flutter for web development on both Windows and macOS. With Flutter's power and flexibility, you're now ready to create cross-platform web applications that provide exceptional user experiences. Dive into the Flutter documentation, explore different widgets, and embark on your web development journey. If you have any questions or thoughts, please share them in the comments below.
Happy Fluttering!
Top comments (0)