11
1

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 1 year has passed since last update.

一番シンプルなFlutter環境構築

Last updated at Posted at 2022-03-07

header.png

  • パソコン環境は macOS 10.15 (2019年) 以降の人向け
  • Macで説明しますがWindowsでもほぼ同様です
  • (もし誰かWindows版を書いてもらえたらリンクを貼らせていただきます)


sec-flutter.png

  • 💙 1. 公式サイト からダウンロード
  • 💙 2. ダウンロードが終わったら Flutterフォルダ をその場に取り出しておく

download-flutter.png

  • 💙 3. ターミナルを開いて以下のコマンドを順番に実行
  • この作業のことを 「パスを通す」 と言う
$ mkdir ~/dev
$ mv ~/Downloads/flutter ~/dev/
$ echo '\nexport PATH=$PATH:$HOME/dev/flutter/bin\n' >> ~/.zshrc
$ source ~/.zshrc


sec-vscode.png

  • 💙 4. 公式サイト からダウンロードして起動
  • 💙 5. 左上からFlutter拡張機能 を検索してインストール


sec-chrome.png



ここまでで環境構築は終わっていますが、せっかくなので自分のアプリを作ってみます

sec-myapp.png

  • 💙 ターミナルで flutter create xxx を実行 (xxxはアプリ名英語)
  • 💙 VSCode で そのフォルダを開く
  • 💙 main.dart ファイルを開いて Run ボタンを押す
  • 💙 うまくいかなければ下のバーから Chrome を選択して、もう一度 Run ボタンを押してみる

select-chrome.png

実行できたら、さっそくコードを編集して遊んでみましょう!
それでは皆さんも一緒に Let's Flutter! 💙

11
1
2

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
11
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?