投稿

2月, 2022の投稿を表示しています

Visual Studio Code(VSCode)をインストールし、Flutter開発環境を整える話

イメージ
本記事をご覧いただき、誠に有難うございます。 投稿主の無能と申します。 前回まででFlutterの環境構築を整え、実際にFlutterのデモアプリを起動させることができました。 今回は、Visual Studio Code(VSCode)をインストールし、VSCodeのFlutter開発環境を整えたいと思います。 Visual Studio Code(VSCode)をインストールする Visual Studio Code(VSCode)ってどんなエディタ? Visual Studio Code(以下VSCode)はMicrosoft社が開発したエディタで、シンプルでありながらもカスタマイズ性に優れており、開発者にとってはもう定番となっているような存在 です。 しかもMacやLinuxでも使えるクロスプラットフォーム対応でありながら、フリーで使えるオープンソースのエディタとなっています。 無能も普段Chromeブラウザの次にVSCodeをインストールし、シンプルなテキストエディタとしても真っ先にWindwosのメモ帳から置き換えて使っています。 Flutterも公式でVSCodeを紹介しています。 Flutter公式のエディタのセットアップの手順の中で、Android Studioと共に紹介されている 無能はVSCodeで開発していきたいと考えておりますので、Android Studioでの開発を考えている方とのエディタ操作等に相違が出てくる可能性があることを、予めご了承ください。 では早速VSCodeをインストールしていきましょう。 VSCodeをDLする 「vscode」で検索すると直ぐに公式のDLページが見付かります。 Visual Studio Code公式DLページ: https://code.visualstudio.com/download OS毎に分かれているのでWindowsを選択します。 なお、常に安定した最新版がDLされます。 VSCodeのDLページでWindwosを選択 DLが開始されます。 DLが開始される DL完了後、インストーラを起動します。 DL完了後、インストーラを起動する 現在(2022/2月時点)のバージョンは1.64となっています。 このインストーラを起動すると、最初に使用許諾について同意を求められますので、同意して次に進みま...

無能がFlutterを独学し始める話【5/5:実際にFlutterを触ってみる】5/5-2:作成したFlutterプロジェクトをエミュレータで動かす

イメージ
本記事をご覧いただき、誠に有難うございます。 投稿主の無能と申します。 前回は新規でFlutterプロジェクトを作成しました。 今回は、作成したFlutterプロジェクトをエミュレータで動かしてみたいと思います。 作成したFlutterプロジェクトを開く 前回までで作成したFlutterプロジェクトを開きます。 Android Studioで開くと、作成直後のままになっているのでREADME.mdというファイルが開いていると思います。 Android Studioで作成したFlutterプロジェクトを開く README.mdが開かれている 実際に作業するのは「main.dart」というdartファイルになります。 main.dartはlibフォルダ内にあるので、ダブルクリックで開きます。 libフォルダ内のmain.dartをダブルクリックで開く 開くと右側にソースコードが表示されました。 main.dartを開くと右側にソースコードが表示される 取り敢えずmain.dartを実行してみます。 実行はAndroid Studioの画面右上の、緑の再生ボタンになります。 Android Studioの右上にある実行ボタン 実行ボタンを押下すると、次のメッセージが表示されました。 実行ボタンを押下するとメッセージが表示された 接続しているデバイスが見つかりませんでした、というメッセージのようです。 前回までで作成したエミュレータを起動します。 作成したエミュレータを起動する Android Studio右上の<No Device Selected>から、Open Android EmuratorのPixel3aを選択します。 Android Studio右上の <No Device Selected>から、Open Android EmuratorのPixel3aを選択 少し待つとエミュレータが起動します。 エミュレータが起動すると、先程<No Device Selected>だったステータスがAndroid SDK Built for x86(Mobile)へ変化しました。 エミュレータ起動でステータスが更新された 起動したエミュレータは初期状態となっていて、言語も英語だし少々使い辛いと思います。 (勿論英語でも何ら不自由は無い、と...