[初心者]flutterをインストールしてみる

プログラミングを勉強し始めて1年になりました!
初めてプログラミングを勉強し始めたのはRubyでProgateで勉強した程度です。
開発環境はAWSのクラウド9しか使った事がなく、スマホアプリを作った事がない私が、今回初めてローカルで環境構築からflutterでアプリを作ってみようと思います!

色々壁にぶつかったので解決策を残しておこうと思います。

環境

今回はMacBookで環境構築をしてみます!

Windows10での環境構築も後日ご紹介しますね!

  • MacBook
  • macOS: v10.14.3

インストール手順

早速インストールしてみましょう!

Flutter公式ページのMacOSインストールページをみると事前準備として以下のものが必要みたいです。

<事前準備>

  • bash
  • curl
  • git 2.x
  • mkdir
  • rm
  • unzip
  • which

 

ターミナル開いて、gitと入力し、エンターを押してみる。

~$ git

 

gitなどが入ってなさそうなら入れておく。

Xcodeインストール

Flutter公式サイトのインストール手順は、まず、SDKインストールから始まっていましたが、私はXcodeを先にインストールしました。

Xcodeを入れるとiOS版のシミュレーターが使えます!

(Windows版は残念ながらXcodeを入れられないデス…)

 

Step1: Xcode公式ページからダウンロード(右上の青色「Downlode」ボタン)

Step2: zipファイル解凍>ダブルクリック>画面の指示通りに進める

 

Flutter SDK ダウンロード

Flutter公式サイトからMacOSインストールページへアクセスします。

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

 

基本は公式ページの手順に沿っていきますが、若干端折ってる部分もあります。

Step1: 上記URLの「 Flutter SDK」Zipファイルをダウンロード

 

Step2: ダウンロードしたファイルをホームディレクトリへ解凍(私は「ユーザ名」ディレクトリ直下へ起きました)

 User > flutter

 

このままだとパスが通ってないのでターミナルで、ホームディレクトリからflutterコマンドを叩いてもcomand not foundが表示されます。次の手順でパスを通します。

IDEインストール(VS Code)

IDEをインストールします。

IDEの種類は色々あると思いますが、今回、MacではVS Code(ビジュアルスタジオコード)を使ってみようと思います。

Android Studioとかもあるのでその辺はお好みで。

 

Step1: VS Code 公式サイトから「Downlode」する

 

Step2: ダウンロードしたZipファイルを解凍。解凍後、アプリを「アプリケーション」ディレクトリへ移動しておく

 

Step3: 「アプリケーション」>「VS Code」クリック >VS Codeが開く。ここで一度アプリを閉じておく。

 

Step4: 新しくターミナルを開いて以下のコードを入力

~$ code ~/.bash_profile

→するとVS Codeのbashファイルが開く

 

Step5: 「.bash_profile」で以下のコードを入力し保存

export PATH=$PATH:$HOME/flutter/bin

Step6: ターミナルを開いてflutter を入れてEnter

~$ flutter

すると、なんとなくflutterが入ってそうな画面がターミナル上で表示されます。これでパスが通りました!もし、まだcomand not foundが表示されていたらパスが通ってないです。「User > flutter」の順でflutterディレクトリがなかったりしないかチェックしてみてください。

VS Codeにflutterプラグインを入れる

Step1: VS Code>四角いアイコン(左メニュー一番下)>flutterと入力>flutterのインストールボタン押下

これで準備完了。これでflutterが使えるはず!

flutterプロジェクトを作ってみましょう!

flutterプロジェクト作成

とりあえず、flutterプロジェクトだけを保存していくためのディレクトリを作成しておこうと思います!

 

~$ mkdir myflutter

~$ cd myflutter

~/myflutter $ flutter create hello_world

 

これで「hello_world」という名前のflutterプロジェクトが作成できました!

VS Code>File>Open>myflutter>hello_worldで上記で作成したflutterプロジェクトが開きます。

まとめ

Windowsで環境構築した時はかなり手こずりましたが、Macでは結構簡単に設定できました!

Windowsのインストール方法は別のページで紹介しますね!

フリーランスエンジニア登録するならココ

フリーランスエンジニア目指すならまずは「ポテパン」に登録してみよう!
ITエンジニアの無料カウンセリング【ポテパンフリーランス】

プロのIT技術コンサルタントが話を聞いてくれるので、フリーランスとして初めて働く方からベテランの方まで、様々なレベルの方に合わせてお仕事を紹介してくれます!気軽に相談できるのでおすすめ。

実は私もこの前無料カウンセリングに行ってきました。まだOLしてますが、いつかはフリーで働きたい。また、プログラミング歴半年(Rubyだけ)で無謀だと思いますが、仕事ありますか?と聞いてみました!

すると、ご丁寧に

30代は少し厳しくなってきますが、Ruby以外に、HTML、CSS、JSは最低身につけておいた方が良いとアドバイスをいただきました!それと、プログラム書いてなかったらすぐ忘れるので、とにかく勉強だけは継続しておくようにとご丁寧にアドバイスをいただきました!

2019年中には土日とかでプログラマーのお仕事ゲットしたいなぁ。。。

関連記事

[Flutter]Row/Columnウィジェットの使い方(part6)

[flutter]Hello-Worldを表示させてみる(part1)

[Flutter]GridViewのCheatSheet

[Flutter]TabBarVeiwの使い方

[flutter]実機でデバッグする方法

[Flutter]Statefullウィジェットの使い方(part9)