Flutter を触れてみる

-

 どうも、ysです。

Flutter がずっと気になっていたので、今日は Flutter に触れてみるため、公式ドキュメントの Get started をやってみようと思います。

モバイルアプリ、デスクトップ、Webアプリを作れますが、今回はモバイルアプリ（Android）の画面を立ち上げるところまでやります。

開発環境のOSは Windows 10 です。


それでは早速始めていきます。

まずは、公式ドキュメントに沿ってセットアップしていきます。

https://docs.flutter.dev/get-started/install

Flutter SDK をダウンロードして以下に展開します。

展開先：C:\_work

環境変数の「Path」に、展開したファイル内にあるbinディレクトリを登録します。

登録したPath：C:\_work\flutter_windows_3.16.0-stable\flutter\bin

コマンドプロンプトで flutter を実行できるか確認してみます。

Dart も実行できるか確認してみます。

問題なさそうですね。

では、Flutter の Doctor コマンドで、環境が整っているか確認してみます。

「Android toolchain」、「Visual Studio」、「Android Studio」が無いって表示されましたね。

今回はデスクトップアプリ作りませんし、エディターは VSCode 使うので、「Visual Studio」はいらないですね。

というわけで、他の２つの環境を整えていきます。

まずは 「Android Studio」をダウンロード＆インストールします。

https://developer.android.com/studio?hl=ja

※インストーラは全てデフォルト値でインストール。

一回起動する必要があるそうなので、起動して空のプロジェクトを適当に作って開きます。

Flutter の Doctor コマンドをもう一回実行すると。。

「Android Studio」は完了ですね。「Android toolchain」がまだ無い状況です。

「Android toolchain」については、２つやらないといけないことがあるようです。

まずは sdkmanager のコマンドラインツールを使えるようにする必要があるようなので、書いてるとおり以下に沿ってやってみます。

https://developer.android.com/studio/command-line

と思いましたが、AndroidSDKディレクトリを開いたところ、cmdline-tools ディレクトリが無い。。

調べたところ、Android Studio で SDK Manager を開いて、SDK command-line Tools を有効にしないといけないみたい。


Apply したら確認画面でるので、OK 押します。

AndroidSDKディレクトリを見てみると、cmdline-tools ディレクトリが作られてました。

もっかい Flutter の Doctor を実行してみると、あとは Android licenses だけのようです。

書いてるとおり「flutter doctor --android-licenses」を実行してみます。

何やら質問が何度かされましたが、すべて「y」を入力して Enter で完了しました。

もっかい Flutter の Doctor を実行すると。。

必要そうな環境は全て整ったようです。

では、VSCode を起動して、Flutter extension を入れてみます。

コマンドパレットで Doctor コマンドがでること確認。

実行して、出力パレットに flutter が出ること確認。

これでプロジェクト作成の準備整ったようなので、コマンドパレットで「Flutter: New Project」を実行してみます。

[Application] を選択します。

プロジェクトの保存先ディレクトリを選択します。

プロジェクト名はデフォルトで出てきたものを選択します。

プロジェクトが作られました！

Dart Extention を推奨するポップアップが表示されたので、入れておきます。

右下のデバイスが空なので、どれか選択します。


エミュレータが起動しました。

Run > Start Debugging を実行します。

実行に結構時間かかりました。。（５分くらい）

初回だけかな？Debug Console に進捗状況が表示され、完了したようです。

エミュレータを見てみると、アプリが開かれてました！

ホットリロードのようなので、このままソースコードを一部変えてみます。

変更前：

変更後：

保存したら、エミュレータに即時反映されました！


というわけで、モバイルアプリの画面を立ち上げるところまでやりました。

今回はここまでとします。

デスクトップアプリの起動～インストーラ作成までをやってみたいところですが、それはまた次の機会にします。

おわり！

コメント

コメントを投稿

このブログの人気の投稿

ProxmoxでLet's Encryptを使用した証明書セットアップをやってみた

-
イメージ
■はじめに Proxmoxはデフォルトで自己証明書を使用しています。 このため、管理コンソールにアクセスすると「接続がプライベートではありません」といった画面が表示されます。 これの対処方法の一つとして、Let's Encryptを使用して簡単に証明書がセットアップできるとのことで、実際にやってみた内容を紹介したいと思います。 ■前提 ・自宅のProxmox環境（シングル構成）で実施 ・証明書取得時に使うのはDNS-01チャレンジ 　　HTTP-01チャレンジはWebサーバーを公開する必要があるためパス ・ハードル低めの（APIが使える）DNS Providerからドメインを取得して使用 　　下記の中からCloudflareをDNS Providerとして選択 　　　 How to use DNS API wiki ■手順概要 Cloudflareのアカウント作成～証明書反映まで、ということで実施内容としては下記となりました。 ＝＝＝＝＝ 1.Cloudflare アカウントの作成 2.Cloudflare ドメイン取得 3.Cloudflare アカウント APIトークンの作成 　　- ゾーン DNS を編集する権限を持つAPIトークンを作成 4.Cloudflare アカウント IDの取得 　　- ProxmoxのChallengeプラグインに投入するパラメータの取得 5.Proxmox ACME アカウントの追加 　　- 連絡先登録と利用規約への同意 6.Proxmox Challengeプラグインの追加 　　- Cloudflareのパラメータを投入 7.Proxmox ACME ドメインの追加 　　- 取得したいドメイン（FQDN）を設定 8.Proxmox 証明書の取得 　　- 証明書取得処理を手動開始 ＝＝＝＝＝ ■実施手順 1.Cloudflare アカウントの作成 Cloudflareのサイトにアクセスして画面右上の「ログイン」をクリックします。 　https://www.cloudflare.com/ja-jp/ ログイン画面に遷移するので、下部にある「サインインアップ」をクリックします。 登録するメールアドレスとパスワードを入力、ロボットでないこと確認にチェックを入れて「サインアップ」をクリックします。 アカウントが作成されます。 登録...
続きを読む

AIと共に「考える」エンジニアに！

-
イメージ
 ― ChatGPT時代に問われる「問いの力」と文章力 ― はじめに ChatGPTをはじめとする 生成AI が普及しはじめてから、もう2年近くが経ちました。   リリース当初は「すごい技術だな」と遠目から眺めている空気でしたが、今では多くの人がAIに触れる機会を持つようになりました。    我々 ITエンジニアとして 、アプローチはどうすべきか？何が必要か？について考えてみます。 AI利用の現状 まだAIを使い始めたばかりだったり、上手く使えてない人は、「このエラーを解決して」「この機能を実装して」と 指示を出すだけ になっているようです。   あるいは、「〇〇とは？」を丸ごとAIに聞いて解説してもらうケースも見られます。　便利ですが、それだと Google検索 と同じレベルに留まっていると感じます。 AIの本当の価値 私は、AIは 単なるコード生成ツールでも、Googleの上位互換でもない と考えています。   むしろ、使い方を間違えると取り残されていく可能性があります。  AIが本当に得意なのは、与えた問いに沿って 思考の幅を広げ、情報を整理すること です。   つまり、AIを活かすには、 問いを設計する力 が不可欠なのです。 問いを設計する力はAI以前からのビジネススキル 実は、問いを設計する力は、AIが登場する以前から、私たちエンジニアが日常的に使ってきたスキルです。   例えば、プロジェクトの課題を整理したり、仕様の確認事項を明確化したり、メールでの問い合わせの内容を意図通りに伝えたりなど...　いずれも、 相手や状況に応じて適切に問いを設計する力 がベースになっていました。   AIは文章やアイデアを生成してくれますが、 何を考えるべきかは教えてくれません 。だからこそ、この問いを設計する力がAI時代でも重要になるのです。 コンテキストエンジニアリング さらに最近は、単なるプロンプトの工夫（プロンプトエンジニアリング）だけでなく、文脈や前提を整理して問いを設計する「 コンテキストエンジニアリング 」が注目されています。   コンテキストエンジニアリングとは、単に「良いプロンプト...
続きを読む

ルーティングって何で必要で、何してるの？を React Routerで理解する

-
イメージ
はじめに フロントエンド開発が、正直苦手でした。 でも今回のプロジェクトでReactを触ることになり、「せっかくなら苦手意識を克服したい」と一念発起。 開発は終わりましたが、学習は継続しています。 Reactには多くの要素がありますが、今回はルーティングに絞ります。 バージョンの違いで書き方が変わり対応に戸惑ったこともあり、基本から振り返りつつ理解していった流れを記事にしたいと思います。 そもそもルーティングって何のために必要なの？ まず基礎の基礎になりますが、URL、ブラウザ、SPAの観点から振り返ります。 URLとは？ Uniform Resource Locator（統一資源位置指定子）の略語で、要するに「 インターネット上のモノの住所 」です。 https://example.com/products.html このようなURLの場合、ブラウザは、 URLを見る→( products.html というファイルが欲しいのだと解釈) サーバーにリクエストを送る HTMLファイル( products.html )をダウンロードして表示する つまり、URLは「どのファイルを取得するか」を指定する住所のようなものです。 ブラウザはURLで何をしているのか？ ブラウザにとってURLは「ページの識別子」です。 ブラウザは、URLをキーにして、いろんな機能を実現しています。      1. 履歴管理           URLが変わるたびに履歴に記録           「戻る」ボタンを押すと、履歴から1つ前のURLを取り出して、そのページに戻る           「進む」ボタンも同じ仕組み      2. ブックマーク           URLを保存することで、「このページ」を記憶           後でそのURLを開けば、同じページが表示される       3. URL共有...
続きを読む