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

@kage110in株式会社セレス

Re:ゼロから始めるスマホアプリ開発 Flutter導入編

Last updated at Posted at 2023-01-31

はじめに

初めまして！
最近、Warlanderにハマっているエンジニアです。
Flutterを使ったスマホアプリに挑戦してみたいと思います。
今回は最初なので、Flutterを導入して、エミュレータでサンプルを動かすところまでやってみます！
スマホアプリの開発は初心者なので生暖かい目で見てくれると幸いです。

ちなみにいくつかに分けて投稿していくので最終的には何か一つアプリを作りたいと思っています！

この記事のゴール

Flutterの導入から、エミュレータを起動してサンプルを動かすところまで。

Flutterとは何ぞ？

クロスプラットフォームアプリケーション開発に秀でたフレームワークです。
言語はdartという言語使って開発します。
AndroidでもiPhoneでもwebでも何でも開発できちゃうので、開発にかかる負担が少なくなるといった感じです。
ただ、OS独自の機能は別途ネイティブなコードで実装する必要があるようで、完全に開発を一元化するといったことはできないようです。

制作環境

実装用PC：windows11
エディタ：Visual Studio Code、Android Studio
確認用実機：Google Pixel 5a

今回はAndroid用のアプリを作っていきます。
iPhoneはXcodeが必要なので今回は見送ります。
Appleって閉鎖的なんですよね。

Flutter 導入

まずは、FlutterのSDKをダウンロードします。

  1. 公式サイトからwindowsを選択
    https://docs.flutter.dev/get-started/install
    スクリーンショット_20230130_215051.png

  2. Flutter SDKをダウンロード
    スクリーンショット_20230130_215613.png

  3. ダウンロードしたものを解凍して、任意の場所に配置します

  4. 環境変数を設定します
    下記のパスを通してください。
    手順は https://www.howtonote.jp/windows11/blog/index11.html が参考になるかと思います。
    ユーザのシステム変数のpathを編集してください。

    flutter_windows_3.7.0-stable\flutter\bin

  5. コマンドプロンプトで以下のコマンドを実行します

    flutter doctor

Flutterのインストールがうまくいっているか確認できます。
コマンド プロンプト - flutter doctor 2023_01_30 22_16_24.png

Android Studio 導入

  1. 公式サイトからAndroid Studioをダウンロードしてインストールします。
    https://developer.android.com/studio
    スクリーンショット_20230130_223619.png

  2. PluginsからFlutter Pluginをインストールします
    image.png

  3. Android SDK Command-line Tools をインストールします

    1. 「More Actions」を選択します。
      image.png
    2. 「SDK Manager」を選択します。
      image.png
    3. 「Android SDK Command-line Tool」にチェックを入れてインストールします。
      image.png

Licenses認証

  1. コマンドプロンプトで以下のコマンドを実行します

    flutter doctor

    Androidと記載してある部分が黄色くなっていることを確認します。
    2.png

  2. 以下のコマンドを実行します

    flutter doctor --android-licenses

    ここで下記みたいなエラーが表示されたらJAVA_HOMEが環境変数に設定されてないので、設定しましょう。

    ERROR: JAVA_HOME is set to an invalid directory: C:\Program Files\Java\jdk-18.0.2.1

    その後、いろいろ聞かれますが、すべてyesで問題ないです。
    下記の文言が表示されればOKです。

    All SDK package licenses accepted

Android仮想環境作成

  1. 「SDK Manager」から「Virtual Device Manager」を押下する
    image.png
    　

  2. 「Create virtual device」を押下する
    image.png

  3. 適当な端末を選択してしてNextを押下する
    image.png

  4. 端末に乗せるOSを選択してNextを押下する
    ちなみに、最初はダウンロードから入るのでちょっと時間がかかる。
    image.png

  5. 仮想端末の名前を設定する
    ここで先ほど選択した端末やらOSやらを選び直せるみたい。
    image.png

これで仮想端末の作成は完了！

Visual Studio Codeの設定

Visual Studio Codeは以下からダウンロードしてください。
https://azure.microsoft.com/ja-jp/products/visual-studio-code

  1. FlutterプラグインをインストールしてVisual Studio Codeを再起動してください。
    vscodepng.png

  2. プロジェクトを作成する

F1を押下して、「flutter」と入力して、「New Project」を選択してください。
image.png

その後、「Application」を選択してください。
image.png

適当な名前を付けて、任意の場所に配置してください。
image.png

すると、何やら勝手に色々と生成されてました。
image.png

とりあえず、動かしてみる

  1. 右下の「Windows」と表示している部分を押下します
    タイトルなし.png

  2. 先ほど作成したエミュレータを押下します
    image.png

  3. するとエミュレータが立ち上がります
    image.png

  4. この状態から上部のメニューから「ターミナル」から「新しいターミナル」を選択して、「flutter run」と入力する
    image.png

エミュレータが立ち上がった！！！
image.png

次回

とりあえずサンプルを動かせる環境まで作れました。
Flutterにはホットリロード機能が付いてるいるので、その辺りを使ってみてFlutterを実際に触ってみたいと思います！

1
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
Sign upLogin
1
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?