y-ohgi's blog

TODO: ここになにかかく

Flutter 2 でWeb サイトを立ち上げる

TL;DR

  • Flutter 2.0.0 の記念環境構築
  • 特にハマらずぬるっと構築がおわった

About

Google、アプリ開発SDK「Flutter 2」公開 Webとデスクトップ、Surface Duoもサポート - ITmedia NEWS

Flutter 2 が公開ということでWeb のプロジェクトを建てれるか雑に立ててみるてすと

Steps

Versions

  • flutter
    • 2.0.0
  • macOS
    • 11.2.2
  • Chrome
    • 89.0.4389.27

Flutter のインストール

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

はじめに brew info でflutter の2.0.0 を見に行っていることを確認して、MacOS 上にFlutter をインストールします。

$ brew info flutter
flutter: 2.0.0 (auto_updates)
https://flutter.dev/
Not installed
From: https://github.com/Homebrew/homebrew-cask/blob/HEAD/Casks/flutter.rb
==> Name
Flutter SDK
==> Description
UI toolkit for building applications for mobile, web and desktop
==> Artifacts
flutter/bin/dart (Binary)
flutter/bin/flutter (Binary)
==> Analytics
install: 2,067 (30 days), 5,350 (90 days), 9,815 (365 days)
$ brew install cask flutter

インストール後にバージョンを確認します

$ flutter --version
Flutter 2.0.0

flutter とChrome の接続確認を行います

$ flutter devices
1 connected device:

Chrome (web) 89.0.4389.72

アプリケーションの作成と起動

ref: https://flutter.dev/docs/get-started/web

flutter プロジェクトの作成

$ flutter create myapp

起動

$ flutter run
Launching lib/main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...             19.8s
Debug service listening on ws://127.0.0.1:51137/igE3c3yClV4=/ws

Running with unsound null safety
For more information see https://dart.dev/null-safety/unsound-null-safety

  To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".

flutter run コマンドを実行して暫く経つとChrome が起動する。

f:id:y-ohgi:20210304215156p:plain

おわり

所感

メジャーバージョンアップ記念に試しに触ってみよう、たぶんいっぱいハマるだろう。と思ったら何もハマらずにぬるっと動いてしまい逆に困惑している。
ただ、flutter のDockerize しようとしてX11 の壁があり、おとなしくローカルにインストールした。