2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Flutter/Dart】Flutterをはじめよう

Last updated at Posted at 2022-08-15

1.はじめに

スマホやパソコンでアプリを開発してみたい方向けに、Flutterでのアプリ開発方法を説明していく。
今回は、Flutterのインストール方法とAndroidStudioのインストール方法を紹介する。
なお、インストール先はLinux環境として説明するが、WindowsやMacでも環境構築方法は同じである。

2.環境構築

2-1.Flutterのインストール

一番簡単なインストール方法はsnapの利用

$ sudo snap install flutter --classic

インストールできているかSDKパスを表示してみる

$ flutter sdk-path

flutterをどこからでも呼び出せる様に実行pathをマシンに覚えさせる。

$ export PATH="$PATH:/home/[user_name]/snap/flutter/common/flutter/bin"

依存関係や必要事項がそろっているかを確認

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.1, on Ubuntu 18.04.6 LTS 5.4.0-113-generic, locale ja_JP.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.67.0)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!

このような表示がでたらチェックが入るようにエラー対応が必要。
対応作をみつけるためには表示内容をそのままググると解答がたくさんヒットするはず。

[-] Android toolchain - develop for Android devices
    • Android SDK at /Users/obiwan/Library/Android/sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://docs.flutter.dev/setup/#android-setup for detailed instructions.

2-2.AndsroidStudioのインストール

以下からインストーラをダウンロード。OSに応じて最適なインストーラが自動で選択される
https://developer.android.com/studio

AndroidStudioがインストールされたらアプリを起動。
起動画面からPluginsを選択した後、AndroidStudioにFlutterとDartをインストール。
インストール後はRestartIDEのボタンを押してアプリを再起動。
赤枠位置に表示されたStart a new Flutter projectというボタンをクリック。
image_android_stduio.png
SDKパスをFlutter SDK Pathと書かれたエディットボックスに入力してNextボタンをクリック。
image_sdk_path.png
Project Name欄だけ埋めたらFinishボタンをクリック。
新しいプロジェクトが~/StudioProjectsディレクトリに作成される。
main.dartウィンドウをトップにした下記画面が立ち上がる。
image_new_project.png
ここまでくれば環境構築は無事修了。

3.まとめ

Flutterのインストール方法とAndroidStudioのインストール方法を紹介した。
環境構築がすんだのでプログラミングを開始できるようになった。

2
4
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
2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?