Zenn
🤟

初めてのFlutter 第0回・インストール編

2021/08/17に公開
Flutter
Dart
#
インストール
tech

今回からパートに分けてFlutter（Dart言語）を解説していきたいと思います。

プログラミングを経験したことのない人でもすぐに理解できるように噛み砕いて説明していきます。また、私が初めてFlutterに挑戦しているときに難しいと感じたところは掘り下げて解説します。

ぜひこの機会にFlutter（Dart言語）を始めてみてください。

Flutter（Dart言語）ってなに

1. Flutter

flutterアイコン

Flutter（フラッター）は、Googleによって開発されたフリーかつオープンソースのUIのSDKである。単一のコードベースから、Android、iOS、Linux、macOS、Windows、Google Fuchsia、向けのクロスプラットフォームアプリケーションを開発するために利用される。

出典：　Wikipedia

要するに、

「マルチプラットフォームに対応してるアプリを作るためのベースだよ」

ということです。

Flutterはマルチプラットフォームに対応しているという面だけではなく、非常に多くの外部パッケージが用意されていることもメリットに挙げられます。こんな機能がほしいといったものは大抵がもうすでにパッケージ化されていますので、それをインストールするだけで使えるものが多いです。私も個人開発ではパッケージを多用しています。

2. Dart言語

Dartアイコン

Dart（ダートもしくはダーツ。当初はDashと呼ばれていた）はGoogleによって開発されたウェブ向けのプログラミング言語である。2011年10月10日 - 12日似開催された デンマークのオーフスで開催された「GOTOカンファレンス」で公開された。この言語は、ウェブブラウザ組み込みのスクリプト言語であるJavaScriptの代替となることを目的に作られた。

Dart言語はJavaScript言語にある解決できない言語上の問題点を解決し、なおかつ、より優れたパフォーマンスを発揮し、大規模なプロジェクト用途にも耐え得る特徴を備え、セキュリティ面でもより優れた言語として、設計された。

出典：　Wikipedia

つまり、もともとはウェブページ用に作られた言語でアニメーションとセキュリティに強いということです。しかも、非常に高速に動きます。

余談

プログラミング経験者の方はこの時点でお気づきかもしれませんが、マルチプラットフォーム対応でかつもともとウェブ用ということで、各プラットフォームに対応するものにJavaScriptを生成してコンパイルする言語だと思われます。

間違ってたらごめんなさい。

インストール

私の開発環境

  • Mac mini (Late 2012)
    • macOS Catalina, Core i5, 16GB
  • いつまでそんなもん使っとるんやという質問は受け付けません（）

基本的には公式サイトである、下記リンクにのっとって行っていきます。

https://flutter.dev/docs/get-started/install/macos

1. Macへのインストール

1. SDKインストール

  • 公式サイトの見出し「Get the Flutter SDK」の 1. より、最新バージョンのFlutter SDK をダウンロードします。
    SDK場所

※ページ製作時では、バージョン2.2.3が正式リリースですが、ここは変化します。

  • ダウンロードした圧縮ファイルを解凍します。
  • ターミナル.appを開きます。

/Applications/ユーティリティ/ターミナル

（場所がわからない場合はSiriやSpotlight検索を利用してください。）

以下のコマンドを実行してください。

export PATH="$PATH: /Users/hogehoge（ユーザー名）/flutter/bin"

次に、以下のコマンドを実行してください。

source ~/.zshrc
  • 最後に、再度開いたターミナルの画面にて、以下のコマンドを実行してください。
flutter doctor

doctor

  • 上の画像のように表示されたら、Flutter SDKのインストール完了です。
    ※チェックが付いているものは環境によって違います。

2. IDEのインストール

今回はAndroid Studioを利用したいと思います。

  • 公式サイトの画面中央「Download Android Studio」ボタンより、最新のAndroid Studioをダウンロードします。
  • ダウンロードしたファイルを開き、Android Studioをインストールします。

インストールの設定は基本的に変更しなくて良いです。

  • Android Studioを開き、初期設定を行います。
  • 初期設定が終了したら、メニューバー＞Android Studio＞環境設定（Preferences...）より、設定画面を開きます。

設定

  • 上の画像のように「Plugins」を選択したあと、MarketPlaceにて「flutter」と検索してください。一覧にFlutterが表示されたら、「Install」ボタンを押してインストールしてください。
  • Android Studioを再起動して、インストールの完了です。

3. Xcodeのインストール

※すでにXcodeをインストールされている場合、この手順は不要です。

  • App Store アプリを開きます。
  • 検索欄より、「xcode」と検索して、Xcodeをインストールします。
  • インストールが完了したら、Xcodeを開きます。

※Xcodeは必ず一度立ち上げてください。

以上でMacへのFlutterインストール手順は完了です。

2. Windowsへのインストール

1. SDKインストール

  • 公式サイトの見出し「Get the Flutter SDK」の 1. より、最新バージョンのFlutter SDK をダウンロードします。
    SDK場所

※ページ製作時では、バージョン2.2.3が正式リリースですが、ここは変化します。

  • ダウンロードした圧縮ファイルを解凍します。
  • 下記のURLを参考にしてパスを通します。

ここで、パスを通したい実行ファイルが存在するフォルダのパスは、

C:¥src¥flutter¥bin

になります。

  • 最後に、PowerShellもしくはコマンドプロンプトにて、以下のコマンドを実行してください。
flutter doctor
  • コマンドが実行されたら、Flutter SDKのインストール完了です。
    ※チェックが付いているものは環境によって違います。

2. IDEのインストール

今回はAndroid Studioを利用したいと思います。

  • 公式サイトの画面中央「Download Android Studio」ボタンより、最新のAndroid Studioをダウンロードします。
  • ダウンロードしたファイルを開き、Android Studioをインストールします。

インストールの設定は基本的に変更しなくて良いです。

  • Android Studioを開き、初期設定を行います。
  • 初期設定が終了したら、メニューバー＞Android Studio＞環境設定（Preferences...）より、設定画面を開きます。

設定

  • 上の画像のように「Plugins」を選択したあと、MarketPlaceにて「flutter」と検索してください。一覧にFlutterが表示されたら、「Install」ボタンを押してインストールしてください。
    ※画像はMacを流用しているため、表示が多少異なります。
  • Android Studioを再起動して、インストールの完了です。

以上でWindowsへのFlutterインストール手順は完了です。

PostScript（あとがき）

Flutterのインストールは無事完了しましたでしょうか？次回は実際にアプリを起動して見るところまで勧めたいと思います。インストールについて質問がございましたら、是非コメントください。間違いがあったら指摘もお願いします。
ではまた次回お会いしましょう。

Discussion