{"componentChunkName":"component---src-templates-post-template-js","path":"/flutter-setup-mac-and-windows-en","result":{"data":{"markdownRemark":{"id":"ac487980-76d9-55a8-b8fa-16097af0cd19","html":"
\n

This page has been machine-translated from the original page.

\n
\n

This time, I will set up a Flutter development environment on both Windows and macOS.

\n

I left the steps here as a simple memo.

\n

You could say I should just do development on a Mac, since it can build both Android and iOS apps. But I was far too unfamiliar with using a Mac and did not want to develop on macOS, so I decided to prepare environments on both Windows and macOS.

\n\n

Table of Contents

\n\n

Create a Flutter development environment on Windows

\n

First, set up a Flutter development environment on a Windows machine.

\n

While I was at it, I also made it possible to emulate Android apps.

\n

Reference: Windows install | Flutter

\n

Install Flutter SDK

\n

First, download the Flutter SDK from Windows install | Flutter and extract it on the Windows machine.

\n

At the time of writing, I used the latest version, flutter_windows_2.10.3-stable.zip.

\n

After extracting the downloaded Flutter SDK, copy the extracted flutter folder directly under %USERPROFILE%\\Documents\\.

\n

As long as the folder can be managed with user privileges, it seems fine to place the Flutter SDK somewhere other than directly under %USERPROFILE%\\Documents\\.

\n

Configure environment variables

\n

Next, add the Flutter SDK you just placed to PATH.

\n

If you placed the SDK in the same folder as the official documentation, adding %USERPROFILE%\\Documents\\flutter\\bin to PATH is enough.

\n

Restart the OS so the PATH change is applied.

\n

To verify that the PATH is set correctly, open Command Prompt in any folder and run where flutter dart.

\n
$ where flutter dart\nC:\\Users\\kash1064\\Documents\\flutter\\bin\\flutter\nC:\\Users\\kash1064\\Documents\\flutter\\bin\\flutter.bat\nC:\\Users\\kash1064\\Documents\\flutter\\bin\\dart\nC:\\Users\\kash1064\\Documents\\flutter\\bin\\dart.bat
\n

If the paths for flutter and dart are displayed as shown above, you are good to go.

\n

Install the Flutter plugin for VSCode

\n

If you use Flutter in VSCode as your IDE, you need to install the Flutter extension in VSCode.

\n\n \n \n \n \n \n \n \n \n

\n

For the next option, select Application.

\n

\n \n \n \n \n \n \n \n \n

\n

Once the project was created, the tree looked like this.

\n

\n \n \n \n \n \n \n \n \n

\n

By default, DevTool is configured, and you can interact with a desktop-app UI like this.

\n\n \n \n \n \n \n \n \n \n

\n

If you want to use an Android emulator, you need to install it in advance with Android Studio or Visual Studio.

\n

Reference: Install Android Studio | Android Developers

\n

At this point, I was able to set up a Flutter environment on Windows and run an Android app.

\n

The whole process took about 10 minutes, so it was very easy to set up.

\n\n \n \n \n \n \n \n \n \n

\n

If you install XCode from the App Store in advance, the iOS emulator will be added to the device settings.

\n

\n \n \n \n \n \n \"image-20220308230039990\"\n \n \n \n

Summary

\n

I have also used Xamarin and React Native as frameworks for building mobile apps that can cross-compile in a similar way, but Flutter felt by far the easiest to set up.

","fields":{"slug":"/flutter-setup-mac-and-windows-en","tagSlugs":["/tag/flutter-en/","/tag/android-en/","/tag/i-os-en/","/tag/備忘録/","/tag/english/"]},"frontmatter":{"date":"2022-03-08","description":"","tags":["Flutter (en)","Android (en)","iOS (en)","備忘録","English"],"title":"Notes on setting up a Flutter development environment on Windows and macOS","socialImage":{"publicURL":"/static/611637edbfb6fae520f623ed460ec754/flutter-setup-mac-and-windows.png"}}}},"pageContext":{"slug":"/flutter-setup-mac-and-windows-en"}},"staticQueryHashes":["251939775","401334301","825871152"]}