0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[Docker][Flutter]DockerでFlutter開発環境を作りたいよ~

Posted at

【レオパ】2足歩行の練習

あ~~~、つかまり立ち出来て偉いでちゅね~~~❤
IMG_0058.jpeg

Flutter環境もDockerで作れないのか?

こっちの記事でJava環境をDockerで構築したろうみたいなことを書きましたが、他の言語でもそんなに簡単に環境が作れるのかを検証してみたく、普通に構築しようとしたらクソ面倒くさいFlutterの開発環境の構築をやってみたよ!!

とりあえずWebのみで起動後にChromeから画面は見られたので、多分出来たんだと信じたい。。。

手順(Dockerの開発環境の前準備)

基本的にJavaでやったことと同じで「どの環境を作る?みたいなダイアログがでてくる」ところでFlutterを選択すれば終わりです。
※特にバージョンとか聞かれなかったため、Flutterの最新になるのかなと思います(ターミナルでバージョン調べた
スクリーンショット 2025-02-18 101305.png

プロジェクト作成

空のフォルダを作成

アプリを入れるフォルダを作成する
※お試しでやったためflutterとか言うクソネーミング、本来ならプロジェクト名やアプリ名とか
スクリーンショット 2025-02-18 154809.png

コマンドパレットで【Flutter: New Project】からプロジェクトを作成

Skeleton Applicationで作った結果が以下となります(途中のキャプチャ忘れたわ

スクリーンショット 2025-02-18 155309.png

実行結果がこんな感じ

起動するとリモートの外のブラウザで開けるよ的なメッセージが出てくるのでChromeで開くようにする。
※なおChromeの拡張機能に【Dart Debug Extension】を追加しておかないと画面が表示されないため注意!!

起動後は一覧が表示される

スクリーンショット 2025-02-18 155854.png

右上のDEBUGの帯裏に有る歯車アイコンで設定画面が開き、ダークモードの切り替えなども出来る

スクリーンショット 2025-02-18 160149.png

一覧のアイテムをクリックすると詳細画面が表示される

スクリーンショット 2025-02-18 160213.png

ね、簡単でしょ?

フォルダ作る・コマンドパレット開いてポチポチ選択していく(プロジェクト名とかは入力したけど)ぐらいで、Flutterの開発・実行環境が出来ちゃうわけで、更に言うとFlutterのSkeleton Applicationで作っちゃえば、中身は多少いじるとはいえ、ありきたりなアプリの雛形まで出来ちゃうんだから便利な世の中になったもんよ。

注意

あくまで 実装・(Webの)実行環境 を構築しただけで、
アプリのビルドに関してはAndroid Studio入れるとか、XCode入れるとかしないとダメだと思われるため、
ちょっと勉強がてらにお試し実装したいなぁって時の補助的なアレだと思ってもらえれば幸いです。

ちょっとアレな話

スマホが割と普及して、cordovaとNode系フロント言語でハイブリッドアプリを作るみたいなのが流行りだしたぐらいの時に、Flutterがリリース(2018年ぐらい)されて、
Dartとか言うGoogle様が作ったわけ変わんない言語でハイブリッドアプリが作れると言うアレだったため「まだみんな知識がバブちゃんでスタートラインが同じぐらいの今のうちに押さえておけば天下取れんじゃね?」と出始めの頃にチョロっと勉強実装してましたが、
そんな出始めたばかりの言語の案件なんかねぇよ・そもそも今後流行りそうなの?と営業が抜かしたため、特に業務で使うことなく今日まで来てます(当然知識も中途半端

せっかく先見の明で色々と知識を増やしたところで、仕事にならなきゃ職務経歴書にも書けない【ただの雑学】なので、この業界(特にSESや受託など)に長くいれば居るほど、ありきたりな言語(Java・C#・NodeJSなんか)を卒なくこなせればいいかぐらいのモチベーションになっちゃうのが、残念なところですね。
またそこそこ覚えたとしても技術はどんどん進歩するため、使わなくなる(案件数が減る)言語やライブラリ(COBOL・LISP・C言語・jQuery・Bootstrapなど)も出てくるため、よほどのことがない限りは極めようなんて気にならないのも残念なところですね。

【レオパ】最後にわがままボディ

写真、上手くなりてぇなぁ(折角のiPhone16が台無し
IMG_0052.jpeg

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?