flutter

since 2021-10-30

https://flutter.dev/

Google が提供する UI Toolkit という話。

「Flutterで始めるモバイルアプリ開発」連載一覧

FlutterKaigi 2021 ハンズオン

アクセシビリティ

Windows で環境構築

2021年10月に Flutter 2.5 で Android 開発を試す

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

VS Code でいいらしい

Test Drive

  • コマンドパレットから Flutter: New Project → Application
  • 場所と名前を指定するとプロジェクトができる
  • エディタ画面の右下で Android 仮想マシンを選択すると、エミュレーターが起動する
  • F5 を押す

トラブル

VS Code で StatefulWidget

  • Add a Stateful widget
  • step 2 をやっていたとして。。。
  • lib/main.dart の末尾にテキストカーソルを移動
  • stful と入力して、補完候補の StatefulWidget を選択する
  • マルチカーソル編集状態になるので RandomWords と入力する
  • 下記のコードが書けている
class RandomWords extends StatefulWidget {
  const RandomWords({Key? key}) : super(key: key);

  @override
  _RandomWordsState createState() => _RandomWordsState();
}

class _RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Flutter 2.8 + PowerShell

since 2021-12-11

2.8 に更新。ダウンロードし直したのだが、実は

flutter channel stable
flutter upgrade

すればよかったらしい。

このまま PowerShell で flutter web を試す。

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

cd .\以前作ったプロジェクトのフォルダ\
flutter run -d chrome

This app is linked to the debug service: ws://127.0.0.1:64287/****/ws
Debug service listening on ws://127.0.0.1:64287/****/ws

💪 Running with sound null safety 💪

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

An Observatory debugger and profiler on Chrome is available at: http://127.0.0.1:64287/****
The Flutter DevTools debugger and profiler on Chrome is available at:
http://127.0.0.1:9100?uri=http://127.0.0.1:64287/****

Chrome でデバッグモードのアプリ画面が開く。

さらに上述の 9100 のURLを開くと、いわゆる dev tool が利用できる。

flutter build web
cd .\build\web\
start index.html

これだと画面真っ白

サーバーがいるのか。 Python 3.10 を使う。

py -3.10 -m http.server 8000

localhost 8000 を開くとアプリが表示された。

flutter run を Android エミュレーターでやってみる。

VS Code からエミュレーターを起動してしまったが、ここから CLI で続ける。

> flutter devices
3 connected devices:

sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64    • Android 12 (API 31) (emulator)
Chrome (web)                 • chrome        • web-javascript • Google Chrome 96.0.4664.93
Edge (web)                   • edge          • web-javascript • Microsoft Edge 96.0.1054.43

> flutter run -d emulator-5554

同じようにエミュレーターにアプリが表示され、

The Flutter DevTools debugger and profiler on sdk gphone64 x86 64 is available at:

として表示されるURLから DevTool が利用できる。

-d は device id の指定で、prefix でよいと書かれているので、emulator-5554 の場合は下記でもよい

> flutter run -d emulator

macOS + FVM

since 2021-12-11

macOS 11.6.1 (intel x64)

プロジェクトごとに SDK を使い分ける機能はここでは使わず、単に CLI で SDK インストールを行ってグローバルに使う。

brew tap leoafarias/fvm
sudo xcode-select --switch path/to/Xcode.app
brew install fvm
$ which dart
/usr/local/bin/dart

$ which fvm
/usr/local/bin/fvm

$ fvm --help
Flutter Version Management: A cli to manage Flutter SDK versions.

Usage: fvm <command> [arguments]

Global options:
-h, --help       Print this usage information.
    --verbose    Print verbose output.
    --version    current version

Available commands:
  config     Set configuration for FVM
  dart       Proxies Dart Commands
  doctor     Shows information about environment, and project configuration.
  flavor     Switches between different project flavors
  flutter    Proxies Flutter Commands
  global     Sets Flutter SDK Version as a global
  install    Installs Flutter SDK Version
  list       Lists installed Flutter SDK Versions
  releases   View all Flutter SDK releases available for install.
  remove     Removes Flutter SDK Version
  spawn      Spawns a command on a Flutter version
  use        Sets Flutter SDK Version you would like to use in a project

Run "fvm help <command>" for more information about a command.

$ fvm releases | tail
Oct 20 21  │ 2.7.0-3.0.pre    
Oct 28 21  │ 2.7.0-3.1.pre    
Nov 12 21  │ 2.8.0-3.1.pre    
Nov 18 21  │ 2.8.0-3.2.pre    
--------------------------------------
Dec 1 21   │ 2.8.0-3.3.pre     beta
--------------------------------------
--------------------------------------
Dec 9 21   │ 2.8.0             stable
--------------------------------------

$ fvm install stable
Flutter "stable" is not installed.

Installing version: stable...
Cloning into '/Users/nishimotz/fvm/versions/stable'...


$ fvm global stable
Flutter "stable" has been set as global
However your "flutter" path current points to:

.
to use global Flutter SDK through FVM you should change it to:

/Users/nishimotz/fvm/default/bin

$ export PATH=$PATH:$HOME/fvm/default/bin

$ which flutter
/Users/nishimotz/fvm/default/bin/flutter

$ flutter doctor

$ flutter create my_app
$ cd my_app

$ flutter run
# Web SDK で実行してしまう。シミュレーターで実行するには。。

$ open -a Simulator

$ flutter devices
# シミュレーターのUUIDを確認

$ flutter run -d シミュレーターのUUIDの最初の数文字
# シミュレーターで実行してくれる

詳しくは公式

ここで気づいたが、このプロジェクトを VS Code で開いて、拡張機能をちゃんと入れれば、DevTools は VS Code に統合されて表示される。

【Rails × Flutter】既存のWebアプリのモバイル版をリリースするまでに学んだこと

flutter.txt · 最終更新: 2021/12/12 16:44 by Takuya Nishimoto
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0