FlutterとDartの開発環境構築をしよう(Mac)!iOSとAndroidのクロスプラットフォーム。エミュレータの起動方法も紹介!

Flatter Dart 環境構築
  • URLをコピーしました!

今回は、モバイルアプリフレームワークであるFlutterを使って開発するための環境を構築していこうと思います。
Flutterは、Dartという言語で開発していきます。聞き慣れない方も多いと思いますが、TypeScriptに似た言語だと捉えてもらえるといいかと思います!

学習に使った本はこちら!

¥4,048 (2022/06/26 16:39時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥3,509 (2022/06/26 16:39時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥1,480 (2022/06/26 16:39時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
クマじい

Amazon Kindle Unlimited でもFlutter、Dartの本はいっぱいあるぞ!

  • 技術書をたくさん読みたい!
  • 色々な技術を学びたい!
初回30日間無料体験があるので、どのような参考書があるか確認してみよう!

Kindle Unlimitedで技術書を読むならタブレットがあるとさらに便利ですよ!
10インチあるとより見やすいと思いますが、7インチでも十分見やすくなります!

¥9,980 (2022/06/23 23:52時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥15,980 (2022/06/24 09:39時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場

iOSとAndroid(正確にはWebなどもある)のクロスプラットフォームになってますので、iOSとAndroidのアプリの両方を作りたいと思っている方は勉強してみてもいいかもしれません!

目次

Flutterを使えるようにしよう!

クマじい

わしにもわかるかのう。。。

早速ですが、Flutterの開発環境を構築していきます。
今回は、Macを使っている方を対象としていますが、Windowsの方でも大きな違いはないので参考になると思います!

Flutterをダウンロードする!

まず、Flutterをインストールします。
インストール資材は、Flutterからダウンロードできます。

リンクを開くと、下のような画面になると思います。

Flutter 
flutter.dev 
Docs 
Showca 
Flutter 2.2 is here. Learn more. Also, see What's new on this site, which includes a list of the new instructor-led video 
nev 00.ci 
opacity: 
child: 
ible 
Text( 
beautiful. 
ter : 
assets: 
• amag•s/paraihvaliey. jpeg 
• images'The•ave. jpeg

この画面が表示されたら、右上の「Get started」を選択しましょう。

flutter.dev 
Flutter 
Get started 
1. Install 
2. Set up an editor 
3. Test drive 
4. Write your first app 
5. Learn more 
From another platform? 
Flutter for Android devs 
Flutter for iOS devs 
Flutter for React Native devs 
Flutter for web devs 
Flutter for xamarjn.Forms devs 
Introduction to declarative UI 
Dart language overview 
Building a web app 
Samples & tutorials 
Development 
User interface 
Docs 
Showca 
Flutter 2.2 is here. Learn more. Also, see What's new on this site, which includes a list of the new instructor-led video 
Install 
DOCS > Get started > Install 
Select the operating system on which you are installing Flutter: 
Windows 
macOS 
Linux 
O Important: If you're in China, first read Using Flutter in China. 
Set up an editor ) 
Chrome OS 
Set up an editor )

Install画面が表示されると思うので、対応するOSを選択します。
今回は、Mac用に説明していくのでmacOSを選択します。

flutter.dev 
Flutter 
Get started 
1. Install 
2. Set up an editor 
3. Test drive 
4. Write your first app 
5. Learn more 
From another platform? 
Flutter for Android devs 
Flutter for iOS devs 
Flutter for React Native devs 
Flutter for web devs 
Flutter for xamarjn.Forms devs 
Introduction to declarative UI 
Dart language overview 
Building a web app 
Samples & tutorials 
Development 
User interface 
Docs 
Showca 
Flutter 2.2 is here. Learn more. Also, see What's new on this site, which includes a list of the new instructor-led video 
macOS install 
DOCS > Get started > Install > macOS 
System requirements 
Set up an editor ) 
To install and run Flutter, your development environment must meet these minimum requirements: 
• Operating Systems: macOS (64-bit) 
• Disk Space: 2.8 GB (does not include disk space for IDE/tooIs). 
• Tools: Flutter uses git for installation and upgrade. We recommend installing which includes git, but you can also 
install git separately. 
O Important: If you're installing on a Mac with the latest Apple Ml processor, you may find these supplementary notes 
useful reading as we complete support for the new Apple Silicon architecture. 
Get the Flutter SDK

すると、macOS用のインストール手順が表示されます。
インストール手順は、表示の通りなのですが英語でわかりにくいと思うので、説明していきます。

まずは、「Get the Flutter SDK」の手順1にある「flutter_macos_2.2.2-stable.zip」を選択してダウンロードしましょう!

ダウンロードしたらZIPを展開して、Userフォルダ配下にDeveloperフォルダを作りそこに格納します。(どこでもいいのですが、今回はここにしました。)

公式だと、下のようにコマンドでやるようになっています。
どちらでやっても問題ありません。

cd ~/development
unzip ~/Downloads/flutter_macos_2.2.2-stable.zip

パスを通してFlutterを使えるようにする!

Flutterをダウンロードできたので、次はパスを通して使えるようにします。

最近のMacであれば、.zshrcを編集してパスを通すことができます。

vim ~/.zshrc

.zshrcを編集できる状態になったら、[i]を押してInsertモードにして下記を入力してください。

export PATH="$PATH:/User/*****/Developer/flutter/bin"

入力できたら、escキーを押して、「:wq」で上書きして終了しましょう。

ターミナルを閉じて、再度ターミナルを開いてください。

echo $PATH
/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/Users/*****/Developer/flutter/bin

Users/*****/Developer/binが表示されていればOKです!

Android をセットアップしよう!

Flutterが使えるようになったので、続いてAndroid Studioをセットアップしていきます。
公式のページだと下記の部分に当たります。

flutter.dev 
C, 
Docs 
Flutter 
Get started 
1. Install 
2. set up an editor 
3. Test drive 
4. Write your first app 
5. Learn more 
From another platform? 
Flutter for Android devs 
Flutter for iOS devs 
Flutter for React Native devs 
Flutter for web devs 
Flutter for Xamarin.Forms devs 
Introduction to declarative UI 
Dart language overview z 
Building a web app 
Samples & tutorials 
Development 
User interface 
Data & backend 
Accessibility & internationalization 
Showca 
Android setup 
O Note: Flutter relies on a full installation of Android Studio to supply its Android platform dependencies. However, you 
can write your Flutter apps in a number of editors; a later step discusses that. 
Install Android Studio 
1. Download and install Android Studio. 
2. Start Android Studio, and go through the 'Android Studio Setup Wizard'. This installs the latest Android SDK, Android SDK 
Command-line Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android. 
Set up your Android device 
To prepare to run and test your Flutter app on an Android device, you need an Android device running Android 4.1 (API level 16) 
or higher. 
1. 
2. 
3. 
4. 
Enable Developer options and USB debugging on your device. Detailed instructions are available in the Android 
documentation. 
Windows-only: Install the Google USB Driver. 
Using a USB cable, plug your phone into your computer. If prompted on your device, authorize your computer to access 
your device. 
In the terminal, run the flutter devices command to verify that Flutter recognizes your connected Android device. By 
default, Flutter uses the version of the Android SDK where your adb tool is based. If you want Flutter to use a different

Android Studio をインストールする!

Install Android Studioから下記の画面に遷移します。

developer.android.com 
developers 
ANDROID STUDIO 
Android Studio 
'LAE-.— 
Google Play 
Jetpack 
Kotlin 
android 
studio J&ÅJ 
Android Studio provides the fastest tools for building apps on every type of Android 
device. 
Download Android Studio 
4.2.1 for Mac (936 Mid) 
Download options 
Applicatim —src rnain 
Release notes 
•X Applicatim C

上記の「Download Android Studio」を選択しましょう!

ダウンロードしたファイルを実行すると、下記のようなダイアログが表示されると思います。

ooo 
C) Android Studio 4.2.1 
android stu«

これは、Applicationsにドラック&ドロップしてあげれば大丈夫です。

ここまでできたらAndroid StudioをApplicationsから開きましょう!

00 e 
Import Android Studio Settings 
o 
Config or installation folder: 
Do not import settings

Import Android Studio Settingsは、「Do not import settings」でOKです!

あとは、説明に従ってNextを押していけば問題ありません。

Welcome 
Arüoid Stißio 
Welcome! This wizard will set up your development environment for Android Studio. 
Additionally, the wizard will help port existing Android apps into Android Studio 
or create a new Android application project. 
CtÖC3R@

Install Typeは今回はStandardにします。

Install Type 
Choose the type of setup you want for Android Studio: 
Standard 
Android Studio will be installed with the most common settings and options. 
Recommended for most users. 
O 
Custom 
You can customize installation settings and components installed.

Select UI Themeは、お好きな方を選択してください。
個人的にかっこいいなと思うDarculaにします。

Select UI Theme 
u • Darcula 
C) Light 
module src Helloworld 
HelloWorld.java v 
import javax. swing.*; 
import javax.awt.*; 
public class Hettowortd { 
public HeltoWorld() { 
JFrame frame = new JFrame ("Hello wc 
Jl-abel label = new JLabel(); 
label. SetFnnt(npw Fnnt( 
Fnn• 
label. 
frame. 
frame. 
frame. 
1 
Line Breakpoints 
IV Line 6 in HelloWorld.Hel 
Java Exception Breakpoin 
Any Exception 
public 
sta

問題なければ、Finishをします!

Verify Settings 
If you want to review or change any of your installation settirv, click Previous. 
Current Settings: 
Setup Type: 
Standard 
SDK Folder: 
IUsers/takumi/Library/Android/sdk 
JDK Location: 
/Applications/Android 
Total Download Size: 
1.69GB 
SDK Components to Download: 
Android Emulator 
Android SDK Build-Tools 30.0.3 
Android SDK Platform 30 
Android SDK Platform-Tools 
Android SDK Tools 
Google APIs Intel x86 Atom System Image 
Intel x86 Emulator Accelerator (HAXM installer) 
SDK Applier va 
Sources for Android 30 
295 MB 
49.3 MB 
49.9 MB 
13.2 MB 
98.2 MB 
1.15 GB 
603 KB 
1.74 MB 
41.3 MB

ダウンロードが終わると下のような画面が表示されます!

Android Studio 
Version 4.2 
+ Create New Project 
Open an Existing Project 
Get from Version Control 
L! Profile or Debug APK 
L! Import Project (Gradle, Eclipse ADT, etc.) 
Import an Android Code Sample

Flutterを扱えるようにする!

このままではFlutterを扱えないので、Flutterを扱えるようにしていきます。

Configure>Preferencesを選択します。

Android Studio 
Version 4.2 
+ Create New Project 
Open an Existing Project 
Get from Version Control 
L! Profile or Debug APK 
L! Import Project (Gradle, Eclipse ADT, etc.) 
Import an Android Code Sample

PluginsでFlutterを検索して下の画面で表示されているものをインストールします。

Android Studio 
Preferences for New Projects 
v Appe•ance & Behavior 
4 
Plugins 
Q• Flutted 
Search Results (52) 
Marketplace 
Sort By: Relevance 
Instdled O 
Flutter 
9.4M 4.19 flutter.dev 
Languages 57.0.2 6B 13, 2021 
Plugin hornepage 
Install 
> 
> 
> 
Appearance 
Menus and Toolbars 
> System Settings 
File Colors 
Scopes 
Notifications 
Quick Lists 
Path Wriables 
Keymap 
Editor 
Plu#is 
Control 
Build, Execution, Deploymalt 
& Frameworks 
Tools 
Oth« Settings 
Experimental 
U9.4M 04.19 
flutter -sync 
u 48.1K 04.59 
FhJtterJsonBemFactory 
u 190.6K 0 480 
FKJtter Enhancemmt S 
u 118.9K 04.84 
FKJtterAssetA utoComp L „ 
U 57.8K 04.46 
U 165.7K 04.89 
Fhltter 
•229.9K 04.59 
Support for developing Flutter applications. Flutter gives 
developers an easy and productive way to and deploy 
cross-platform, high-performance mobile apps for both 
Android and iOS. Installing this plugin will also install the 
Dart 
For some tools, this plugin uses Chromium through 
JxBrowser to display content from the web. JxBrowser 
complies with LGPL and offers an option to replace 
Chromium with another component. To do this: 
• Find the JxBrowser files stored in the plugins directory, 
under /flutter-intellij/jxbrowser. 
• Use the instructions and build script from JxBrowser to 
relink it with rnodified components. 
Notes 
Size: 11.3M

FlutterをインストールするとDartもインストールしますか?と聞かれるので一緒にインストールしてください!

v Appe•ance & Behavior 
Plugin: 
Fluti 
Search F 
Android Studio 
Preferences for New Projects 
Install Required Plugins 
The •Fkltt«• øugh rmuies "Dart" to 
be instaled. 
Flutter 
Appearance 
Menus and Toolbars 
> System Settings 
File Colors 
Scopes 
Notifications 
Quick Lists 
Path Wriables 
Keymap 
Editor 
Control 
> 
> 
> 
01, 
Build, Execution, Deploymalt 
& Frameworks 
Tools 
Oth« Settings 
Experimental 
4 
4 
flutter-ing-sync 
u 48.1K 04.59 
FhJtterJsonBemFactory 
u 190.6K 0 480 
FKJtter Enhancemmt S 
u 118.9K 04.84 
FKI tterAssetA utoComp L „ 
U 57.8K 04.46 
U 165.7K 04.89 
Fhltter 
•229.9K 04.59 
9.4M 4.19 flutter.dev 
Languages 57.0.2 6B 13, 2021 
Plugin hornepage 
Support for developing Flutter applications. Flutter gives 
developers an easy and productive way to and deploy 
cross-platform, high-performance mobile apps for both 
Android and iOS. Installing this plugin will also install the 
Dart 
For some tools, this plugin uses Chromium through 
JxBrowser to display content from the web. JxBrowser 
complies with LGPL and offers an option to replace 
Chromium with another component. To do this: 
• Find the JxBrowser files stored in the plugins directory, 
under /flutter-intellij/jxbrowser. 
• Use the instructions and build script from JxBrowser to 
relink it with rnodified components. 
Notes 
Size: 11.3M

インストールできたら、Restert(再起動)をしましょう!

v Appe•ance & Behavior 
Plugin: 
Fluti 
Search F 
4 
Android Studio 
Preferences for New Projects 
IDE and Plugin Updates 
Restart Andrdd Stuü to ct•nges in 
plL0ins? 
Flutter 
Restart IDE 
> 
> 
> 
Appearance 
Menus and Toolbars 
> System Settings 
File Colors 
Scopes 
Notifications 
Quick Lists 
Path Wriables 
Keymap 
Editor 
Control 
Build, Execution, Deploymalt 
& Frameworks 
Tools 
Oth« Settings 
Experimental 
flutter -sync 
u 48.1K 04.59 
FhJtterJsonBemFactory 
u 190.6K 0 480 
FKJtter Enhancemmt S 
u 118.9K 04.84 
4 
FKJtterAssetA utoComp L „ 
U 57.8K 04.46 
4 
U 165.7K 04.89 
Fhltter 
•229.9K 04.59 
9.4M 4.19 flutter.dev 
Languages 57.0.2 6B 13, 2021 
Plugin hornepage 
Support for developing Flutter applications. Flutter gives 
developers an easy and productive way to and deploy 
cross-platform, high-performance mobile apps for both 
Android and iOS. Installing this plugin will also install the 
Dart 
For some tools, this plugin uses Chromium through 
JxBrowser to display content from the web. JxBrowser 
complies with LGPL and offers an option to replace 
Chromium with another component. To do this: 
• Find the JxBrowser files stored in the plugins directory, 
under /flutter-intellij/jxbrowser. 
• Use the instructions and build script from JxBrowser to 
relink it with rnodified components. 
Notes 
Size: 11.3M

ここまでできたら、「Create New Flutter Project」が表示されると思います

Android Studio 
Version 4 2.1 
+ Create New Project 
+ Create New Flutter Project 
Open an Existing Project 
Get from Version Control 
L! Profile or Debug APK 
L! Import Project (Gradle, Eclipse ADT, etc.) 
Import an Android Code Sample

Flutter Projectを作ってみよう!

では、実際にFlutter Projectを作ってみましょう!

Create New Flutter Projectを選択します!

Android Studio 
Version 4 2.1 
+ Create New Project 
+ Create New Flutter Project 
Open an Existing Project 
Get from Version Control 
L! Profile or Debug APK 
L! Import Project (Gradle, Eclipse ADT, etc.) 
Import an Android Code Sample

Flutter App を選択して、Flutter SDK pathが選択されていなければFlutterをインストールした場所を選択しておきましょう!

次の画面に関しては、下に表示の通りでnameなどは適当に変えてもらえればいいと思います。

Android Studio 
New Project 
Project name: 
Project location: 
Description: 
Organization: 
sample 
—'StudioProjects/sample 
A new Flutter project. 
com.teech.sample 
Android language: C) Java 
@ Kotlin 
@ Swift 
iOS language: 
Platforms: 
C) Objective-C 
@ Android @ iOS 
Linux MacOS Web Windows 
Platform availability might depend on your Flutter SDK channel, 
and which desktop platforms have been enabled. 
Additional desktop platforms can be enabled by, for example, running 
"flutter config --enable-linux-desktop" on the command line. 
When created, the new project will run on the selected platforms (others can be added later).

ここまでできるとサンプルコードが書かれたものができていると思います。

sample lib main.dart 
Kno device selected> 
Project 
main-dart 
23 • 
4 main.dart 
> 4 sample -/StudioProjects/sample 
Scratches and Consoles 
1 
2 
3 
5 
6 
8 
9 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
35 
36 
import 'package: flutter/materiat. dart' ; 
» •oid main() { 
runApp (MyApp ; 
•tass MyApp extends StatelessWidget { 
// This widget is the root of your application. 
@override 
Widget build (BuitdContext context) { 
return materiaUpp( 
title: ' Flutter Demo' , 
theme: ThemeData( 
This is the theme of your application. 
Try running your application with "flutter run". You'll see the 
application has a blue toolbar. Then, without quitting the app, try 
changing the primarySwatch below to Colors. green and then invoke 
// "hot reload" (press "r" in the console where you ran "flutter run" 
or simply save your changes to "hot reload" in a Flutter IDE) . 
Notice that the counter didn't reset back to zero; the application 
is not restarted. 
primarySwatch: Colors.btue, 
// ThemeData 
home: NyHomePage (title: ' Flutter Demo Home Page ' ) , 
// MateriaUpp 
class NyHomePage extends StatefutWidget { 
key, required this. title}) 
. super(key: key); 
This widget is the home page of your application. It is stateful, meaning 
that it has a State object (defined below) that contains fields that affect 
how it looks.

エミュレータの起動をしよう!

せっかくなのでエミュレータを起動してみましょう!

画面右上のAVD Managerを選択してください!
下の画面が表示されていると思います。

sample lib main.dart 
Project 
> 4 sample -'Studio Projects/sample 
Scratc 
1 
main-dart 
import 
' package: flutter/materiat. dart ' ; 
Type 
Your Virtual Devices 
Android Studio 
Name 
Play Store 
Resolution 
1080 x 2220. 
• 440dpi 
API 
30 
Android Virtual Device Manager 
Target 
Android 11.0 (Google APIs) 
Kno device selected> 
CPU/ABI 
x86 
4 main.dart 
Size on Disl 
801 MB

初期状態でもPixel_3aが入っているのですが、今回はせっかくなのでデバイスを追加します。
Create Virtual Deviceを選択してください。

下のような画面が表示されたら、今回はPixel 4aを選択します。

sample lib main.dart 
Project 
> 4 sample -/StudioProjects/sample 
Scratc 
main-dart 
import 
' package: flutter/materiat. dart ' ; 
Pla 
Select Hardware 
Choose a device definition 
Android Virtual Device Manager 
Virtual Device Configuration 
Kno device selected> 
Pixel 4a 
1080px 
4 main.dart 
1 
2 
Type 
Your Virtual Devices 
Android Studio 
Name 
Pixel_3a-APL30-x86 
Category 
Phone 
Wear OS 
Tablet 
Automotive 
Pixel XL 
Pixel 4a 
Pixel 4 XL 
Pixel 4 
Pixel 3a XL 
Pixel 3a 
Pixel 3 XL 
Pixel 3 
Play Store 
Import Hardware Profiles 
Size 
5.5" 
6.3" 
5.7" 
6.0" 
6.3" 
5.46" 
Resolution 
1440k.. 
1080x... 
1440k.. 
1080x... 
1080x... 
1080x... 
1440k.. 
1080x... 
Density 
560dpi 
44 Odpi 
560dpi 
44 Odpi 
400dpi 
44 Odpi 
560dpi 
44 Odoi 
New Hardware Profile 
Size: large 
Ratb: bng 
DensiW. 440dpi 
2340px 
Clone Device...

Nextを選択したら、下の画面になるのでバージョンを選択してNextを選択します。

sample lib main.dart 
Project 
> 4 sample -/StudioProjects/sample 
Scratc 
main-dart 
import 
' package: flutter/materiat. dart ' ; 
Pla 
System Image 
Select a system image 
Android Virtual Device Manager 
Virtual Device Configuration 
Target 
Android 11.0 (Google APIs: 
Kno device selected> 
API Level 
30 
Android 
11.0 
Google Inc. 
System Irnage 
x86 
4 main.dart 
1 
2 
Type 
Your Virtual Devices 
Android Studio 
Name 
Pixel_3a-APL30-x86 
Recommended 
Release Name 
x86 Images Other Images 
AP I Level 
30 
ABI 
x86 
We recommend these images because they run the 
fastest and support Google APIs. 
Questions on API level? 
See the API level distribution chart

できたらYour Virtual DevicesにPixel 4aが追加されていると思います!

sample lib main.dart 
Project 
> 4 sample -'Studio Projects/sample 
Scratc 
1 
main-dart 
import 
' package: flutter/materiat. dart ' ; 
Type 
Your Virtual Devices 
Android Studio 
Name 
Pixel 4a API 30 
Play Store 
Resolution 
1080 x 2220. 
• 440dpi 
1080 x 2340. 
• 440dpi 
API 
30 
30 
Android Virtual Device Manager 
Target 
Android 11.0 (Google APIs) 
Android 11.0 (Google APIs) 
Kno device selected> 
CPU/ABI 
x86 
x86 
4 main.dart 
Size on Disl 
801 MB 
513 MB

ここまでできたらActions>再生ボタンを押して実行してみましょう!

エミュレーターが起動できたと思います!

sample lib main.dart 
Project 
> 4 sample -'Studio Projects/sample 
Scratches and Consoles 
qemu-system-x86_64 
23 • 
sample — main.dart 
Sdk gphone x86 arm (mobile) 
1 
2 
3 
5 
6 
8 
9 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
24 
25 
26 
27 
28 
29 
31 
32 
33 
main.dart 
import 'package:flutter/materiat. dart' ; 
» •oid main() { 
runApp (NyApp ; 
•tass NyApp extends StatelessWidget { 
// This widget is the root of your application. 
@override 
Widget build(BuitdContext context) { 
return materiaUpp( 
title: 'Flutter Demo' , 
theme: ThemeData ( 
This is the theme of your application. 
Try running your application with "flutter run". You'll see the 
application has a blue toolbar. Then, without quitting the app, try 
changing the primarySwatch below to Colors.green and then invoke 
// "hot reload" (press "r" in the console where you ran "flutter run" 
or simply save your changes to "hot reload" in a Flutter IDE) . 
Notice that the counter didn't reset back to zero; the application 
is not restarted. 
primarySwatch: Colors. blue, 
// ThemeData 
home: NyHomePage (title: ' Flutter Demo Home Page ' ) , 
// MateriaUpp 
class NyHomePage extends StatefutWidget { 
key, required this. title}) 
. super(key: key) ; 
11 // This widget is the home page of your application. It is stateful, 
meaning

AVD Manager Unable to locate abd エラーになってしまう場合

File>Project Structure>Project SDKに「Android API ~」を選択してください!

Project Structure 
Project Settings 
Project 
Modules 
Libraries 
Facets 
Artifacts 
Platform Settings 
SDKS 
Global Libraries 
Problems 
project narne: 
sample 
Project SDK: 
This SDK is default for all project modules. 
A module specific SDK can be configured for each of the modules as required. 
Android API 30 Platform java version "1' 
Project language level: 
Edit 
This language level is default for all project modules. 
A module specific language level can be configured for each of the modules as required. 
14 - Switch expressions 
Project compiler output: 
This path is used to store all project compilation results. 
A directory corresponding to each module is created under this path. 
This directory contains two subdirectories: Production and Test for production code and test 
A module specific compiler output path can be configured for each of the modules as required. 
'Users/takumi/StudioProjects/sample/out

サンプルコードを実行してみよう!

せっかくなので、サンプルコードをエミュレータで確認してみましょう!

メニュー>Preferences >Appearance&Behavior>System Settings>Android SDKを選択します。

SDK PlatformsからAndroid 11.0 (R)でチェックが付いていないものをチェックしてOKを押しましょう!
インストールが始まると思いますので、完了するまでお待ちください。

v Appearance & Behavior 
Appearance 
Menus and Toolbars 
v System Settings 
Passwords 
HTTP Proxy 
Data Sharing 
Date Formats 
Updates 
Android SDK 
Memory Settings 
File Colors 
Scopes 
Notifications 
Quick Lists 
Path Variables 
Key map 
> Editor 
Plugins 
> Version Control 
Preferences 
Appearance & Behavior System Settings Android SDK 
Manager for the Android SDK and Tools used by Android Studio 
Android SDK Location: /Users/takumi/Library/Android/sdk 
SDK Platforms SDK Tools 
SDK IJpdate Sites 
Each Android SDK Platform package includes the Android platform and sources 
API level by default. Once installed, Android Studio will automatically check for 
"show package details" to display individual SDK components. 
Name 
DI Android S Preview 
LA Android SDK Platform S 
Google APIs ARM 64 v8a System Image 
Google APIs Intel x86 Atom_64 System Image 
Google Play ARM 64 v8a System Image 
Google Play Intel x86 Atom_64 System Image 
Android 11.0 (R) 
LV Android SDK Platform 30 
Sources for Android 30 
Google APIs Intel x86 Atom System Image 
Google APIs Intel x86 Atom_64 System Image 
Google Play Intel x86 Atom System Image 
Google Play Intel x86 Atom_64 System Image 
v Android 10.0 (Q) 
Android SDK Platform 29

ここまでできたらエミュレータを起動して、デバッグボタンを選択することでサンプルコードを起動することができます!
(デバッグボタンは、右上のメニューの左から2番目の虫みたいなボタンです。)

qemu-system-x86_64 
sample lib main.dart 
23 • 
sample — main.dart 
Project 
> 4 sample -'StudioProjects/sample 
Scratches and Consoles 
Debug: main.dart 
Debugger Console 
1 
2 
3 
5 
6 
8 
9 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
24 
25 
26 
77 
main.dart 
import 'package:flutter/materiat. dart' ; 
» •oid main() { 
runApp (NyApp ; 
•tass NyApp extends StatelessWidget { 
// This widget is the root of your application. 
@override 
Widget build(BuitdContext context) { 
return materiaUpp( 
title: 'Flutter Demo' , 
theme: ThemeData ( 
This is the theme of your application. 
Try running your application with "flutter run". You'll see the 
application has a blue toolbar. Then, without quitting the app, try 
changing the primarySwatch below to Colors.green and then invoke 
// "hot reload" (press "r" in the console where you ran "flutter run" 
or simply save your changes to "hot reload" in a Flutter IDE) . 
Notice that the counter didn't reset back to zero; the application 
is not restarted. 
primarySwatch: Colors. blue, 
// ThemeData 
home: NyHomePage (title: ' Flutter Demo Home Page ' ) , 
// MateriaUpp 
Sdk gphone x86 arm (mobile) 
9:53 a 
Flutter Demo Home I 
You have pushed the bl 
Launching lib/main.dart on sdk gphone x86 arm in debug mode... 
Running Gradie task 'assembteDebug' 
Built buitd/app/outputs/flutter-apk/app-debug. apk. 
Debug service listening on

iOS をセットアップしよう!

続いて、iOSをセットアップしていきます。
iOSは、Macでしかできないので注意しましょう!

Xcodeをインストールする!

まず、Xcodeをインストールします。
Xcodeは、AppStoreからインストールが可能です。

く 
Q 検 索 
Xcode 
開 発 ツ ー ル 
☆ 見 つ け る 
Arcade 
創 作 す る 
1245 件 の 評 価 
マ 仕 事 す る 
4 + 
楽 し む 
☆ ☆ ☆ ☆ ☆ 
Apple 
参 開 発 す る 
ア ッ プ デ ー ト 
器 カ テ ゴ リ 
ア ッ プ デ ー ト 
Xcode 12.5 supports iOS 14 向 iPadOS 14.5 ハ VOS 14 向 watchOS 7.4. and macOS Big Sur 11.3 
New in Xcode 12.5 
プ レ ビ ュ ー 
円 0 ・ ・ 0 ・ 朝 ・ ・ 第 S 響 0 第 ■ 0

シュミレータを起動してみる!

Xcodeをインストールできたら、AndroidStudioからiOSシュミレータを起動してみましょう!

Android Studio の右上のメニューの一番左のデバイスドロップボックスから、Open iOS Similatorを選択します!

Android Studio 
sample lib main.dart 
23 
File 
Edit 
View 
Navigate 
Code 
Analyze 
Refactor 
Build 
Run 
Tools 
dart' • 
VCS 
Window 
Help 
Project 
> 4 sample —IStudioProjects/sample 
Scratches and Consoles 
Debug: main dart 
Debugger 
Frames 
Frames are not available 
1 
2 
3 
5 
6 
8 
9 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
24 
25 
26 
main.dart 
import ' package : flutter/material. 
Lvoid main() { 
runApp (myApp ( ) ) ; 
sample — main.dart 
«no device selected> 
Chrome (web) 
Open iOS Simulator 
Open Android Emulator: P 
Open Android Emulator: P 
Refresh 
L!ctass MyApp extends StatelessWidget { 
S/ This widget is the root of your application. 
@override 
Widget build (BuildContext context) { 
return MateriaUpp( 
title: • Flutter Demo' , 
theme: ThemeData( 
This is the theme of your application. 
Try running your application with "flutter run". You •ti see the 
application has a blue toolbar. Then, without quitting the app, try 
changing the primarySwatch below to Colors . green and then invoke 
"hot reload" (press "r " in the console where you ran "flutter run" 
or simply save your changes to "hot reload" in a Flutter IDE) . 
Notice that the counter didn't reset back to zero; the application 
is not restarted. 
L? 
primarySwatch: Colors. blue, 
// ThemeData 
home: myHomePage(titIe: 'Flutter Demo Home Page • ) , 
// MateriatApp 
Variables 
Variables are not available

このようにiPhone 12 Pro Max(最新の機種が表示されるようです。)が表示されると思います。

Simulator File 
sample lib main.dart 
23 
Edit 
Device 
I/O 
Features 
Debug 
Window 
Help 
iPhone 12 Pro Max 
i0S 14.5 
Project 
> 4 sample —IStudioProjects/sample 
Scratches and Consoles 
Debug: main dart 
Debugger 
Frames 
Frames are not available 
1 
2 
3 
5 
6 
8 
9 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
24 
25 
26 
main.dart 
import ' packagr 
Lvoid main O 
runApp (my 
L!ctass myApp 
// This w 
@overridf 
Widget bu 
lo:oo 
SUN 
Calendar 
News 
Photos 
Health 
Maps 
Reminders 
Settings 
L? 
return 
titu 
them 
pri 
home : 
Variables 
sample — main.dart 
iPhone 12 Pro (mobie) 
L see the 
the app, try 
hen invoke 
flutter run" 
er IDE). 
application 
Variables are not available

iOSでもサンプルコードを実行してみよう!

せっかくなのでiOSでもサンプルコードを実行しましょう。
こちらもiOS Similatorを表示して、デバッグボタンを選択するだけです!

Simulator File 
sample lib main.dart 
23 
Edit 
Device 
I/O 
Features 
Debug 
Window 
Help 
iPhone 12 Pro Max 
i0S 14.5 
Project 
> 4 sample —IStudioProjects/sample 
Scratches and Consoles 
Debug: main dart 
Debugger 
Frames 
Frames are not available 
1 
2 
3 
5 
6 
8 
9 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
24 
25 
26 
main.dart 
import ' packagr 
Lvoid main O 
runApp (my 
L!ctass myApp 
// This w 
@overridf 
Widget bu 
lo:oo 
SUN 
Calendar 
News 
Photos 
Health 
Maps 
Reminders 
Settings 
L? 
return 
titu 
them 
pri 
home : 
Variables 
sample — main.dart 
iPhone 12 Pro (mobie) 
L see the 
the app, try 
hen invoke 
flutter run" 
er IDE). 
application 
Variables are not available

これで、iOSでもサンプルコードが実行されたことを確認できたかと思います!

Simulator File 
sample lib main.dart 
23 
Edit 
Device 
I/O 
Features 
Debug 
Window 
Help 
sample — main.dart 
iPhone 12 Pro Max 
i0S 14.5 
10:02 
Flutter Demo Home Page 
You have pushed the button this many times: 
iPhone 12 Pro (mobie) 
Project 
> 4 sample —IStudioProjects/sample 
Scratches and Consoles 
Debug: main dart 
Debugger 
Frames 
Frames are not available 
1 
2 
3 
5 
6 
8 
9 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
24 
25 
26 
main.dart 
import ' package : flutter/material. 
Yvoid main() { 
runApp (myApp ( ) ) ; 
dart' • 
L!ctass MyApp extends StatelessWidget { 
// This widget is the root of your apptil 
@override 
Widget build (BuildContext context) { 
return MateriaUpp( 
title: • Flutter Demo' , 
theme: ThemeData( 
This is the theme of your appli 
Try running your application wi 
application has a blue toolbar . 
changing the primarySwatch belc 
"hot reload" (press "r " in the 
or simply save your changes to 
Notice that the counter didn't 
is not restarted. 
L? 
primarySwatch: Colors. blue, 
// ThemeData 
home: myHomePage(titIe. 
• Flutter Dem/ 
// MateriatApp 
Variables 
+ O Connected

まとめ!

今回は、FlatterとDartの開発環境の構築をしていきました!

学習に使った本はこちら!

¥4,048 (2022/06/26 16:39時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥3,509 (2022/06/26 16:39時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥1,480 (2022/06/26 16:39時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
クマじい

Amazon Kindle Unlimited でもFlutter、Dartの本はいっぱいあるぞ!

  • 技術書をたくさん読みたい!
  • 色々な技術を学びたい!
初回30日間無料体験があるので、どのような参考書があるか確認してみよう!

Kindle Unlimitedで技術書を読むならタブレットがあるとさらに便利ですよ!
10インチあるとより見やすいと思いますが、7インチでも十分見やすくなります!

¥9,980 (2022/06/23 23:52時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥15,980 (2022/06/24 09:39時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場

iOSとAndroidの両方に対応するクロスプラットフォームになっているのでぜひ参考にしてください!

Flatter Dart 環境構築

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

東京在住で20代のエンジニアです。
特に特技があるわけではありませんが、誰もが楽しくプログラミングができたらいいと思い、「teech lab.」を開設いたしました。

Enjoy Diaryという、ガジェットや雑貨を紹介しているブログもあります!
ぜひ、みてください!!

目次
閉じる