4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Flutter環境構築 〜Flutterのサンプルアプリを起動するまで〜

Last updated at Posted at 2020-05-15

Flutterとは

Googleが提供しているモバイルおよびWebアプリケーションのバックエンドサービスのこと。

Flutterインストールまで

Flutterのサイトにアクセス

Flutter

Flutterインストール画面へ

サイト右上のGet startedをクリック
flutter-start2.png

各OSごとのインストール画面へ

自分のPCのOSをクリック
flutter-start3.png

ファイルダウンロード

Flutter(SDK)ファイルをダウンロード
flutter-start4.png

ファイルを解凍

ダウンロードしたZipファイルを解凍
flutter-start5.png

ファイルを配置

FlutterファイルをPCドライブ内の好きな場所に移動。今回はUser直下にdevelopmentフォルダを作成し、その配下にFlutter(SDK)ファイルを配置。
flutter-start6.png

設定ファイルを開く

ターミナルを開きコマンドで、設定ファイルを開く

ターミナル
open ~/.bash_profile

パスを通す

FlutterコマンドをFlutterファイルにパスを通す

~/.bash_profile
export PATH="$PATH:/Users/ユーザ名/development/flutter/bin"

flutter-start8.png

設定を反映

ターミナルで設定ファイルの反映コマンドを実行

ターミナル
source ~/.bash_profile

Flutterプロジェクト起動まで

プロジェクト作成

ターミナルでFlutterプロジェクト作成のコマンドを実行

ターミナル
flutter create appname

シミュレータ起動

Android Studio
Xcode

flutter-start11.png

プロジェクトにカレントディレクトリ移動

cdコマンドで作成したプロジェクトにカレントディレクトリを移動します

ターミナル
cd appname

Flutter起動

Flutter起動コマンドを実行

ターミナル
flutter run

flutter-start12.png

この内容について

この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
【Flutter】環境構築 | コレワカ

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?