スポンサーリンク

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

Flutter
スポンサーリンク

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

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

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

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

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

スポンサーリンク

「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',//ここ!!
            ),

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

実行後下記のような画面表示の中央に文字が表示されていればOKです。

今回の記事は以上です。他にも随時Flutterの記事をアップしていくので気になる方はご参照ください。

本記事を読んでいただき感謝です。サイトを訪れていただいた方はプログラミング勉強中かと思いますのでプログラミング勉強のコツを合わせてご紹介。

スポンサーリンク
スポンサーリンク
スポンサーリンク

ブログに関しては500円程度かかりますが、それ以外は無料です。知識の吸収と並行してアウトプットは非常に効率が良いです。テックアカデミーに関しては講座レベルが高いにも関わらず、無料体験や人気口座も大幅値下げがあるので、重点的に学びたいものを無料体験してみてください。

転職時にも、エンジニアからテックアカデミー・Paizaは認知度が高いので、未経験入社採用を行う際履歴書で目に留まります。特にPaizaのスキルレベルA・SなどはIT業界でも評価されます。

テックアカデミー・Paizaの無料登録ができる期間中にぜひご利用してみてください。私も活用経験ありです。

Flutter
スポンサーリンク
スポンサーリンク
ともぶろぐ

コメント

  1. […] お疲れ様です。次のステップとしてHello Worldを出力するまでをこちらのリンクで記載しているので気になる方はご参照ください。 […]

タイトルとURLをコピーしました