「Flutter」で「Hello World」表示方法。〜 Android Studio環境〜

Flutter

2020.12.12

今回の記事は、「Android Studio」の環境下で「Flutter」を用いて「Hello World」をエミュレータ（仮想デバイス）に表示させるまでの記事です。

以前の記事で、MacにAndoroid Studio(4.0)とFlutterをインストールし、プロジェクトを開くところまでは行っているのでその続きになる部分です。

まだ環境構築を完了さえていない方は下記のリンクを参照して環境構築を行ってみてください。

環境構築URL：「Android Studio(4.0)+Flutter on Mac」

上記を参照してプロジェクトを作成するところまで行っていてください。
では早速記事の方に進んでいきます。

「Flutter」で「Hello World」する手順〜エミュレータの準備〜
「Flutter」で「Hello World」する手順〜 Flutterコード解説〜

「Flutter」で「Hello World」する手順〜エミュレータの準備〜

まずは上記の記事のままではエミュレータのインストールが済んでいないため下記操作を行ってエミュレータをAndroid Studioで実行できるようにインストールしていきます。エミュレータ（仮想デバイス）をAndroid Studioにインストールして使用できるようにしましょう。

上部のメニューバーの「Tool」→「ADKマネージャー」から好きな端末を選択して、インストールしましょう。容量は大きめなのでとりあえず1,2個くらいで今回の解説では下記を使用します。

先ほど表示した画像の一番左に右三角マークがあります。これがエミュレータの起動を表しているので起動すると下記のようなエミュレータが画面上に表示されます。表示されない場合は「HAXM」などのインストールに問題があるものと考えられます。基本的には問題ないと思われます。

この表示ができていれば完了です。

では次にコード紹介と解説に移ります。

「Flutter」で「Hello World」する手順〜 Flutterコード解説〜

HelloWorldを表示させるだけの場合は非常に簡単な操作です。まずは、「You have pushed the button this many times.:」と書かれている箇所を検索せいてください。「Command」＋「F」で文字列を検索できます。大体90行くらいにあると思います。ここが画面の中央に表示されるものになっているのでここを編集します。

mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times.:',//ここ！！
            ),
// 変更後↓ ///////////////////////////////////////////////
　　　　　　　Text(
              'Hello World',//ここ！！
            ),

これで準備は完了です。
下記ボタンをクリックしてエミュレータにアプリを反映させてください。