flutter
since 2021-10-30
Google が提供する UI Toolkit という話。
「Flutterで始めるモバイルアプリ開発」連載一覧
- 「iOSやAndroidというプラットフォームの違いを解決するためのソリューションではなく、モバイルアプリ開発自体のあり方を改善するためのソリューションという一面」 https://codezine.jp/article/detail/12718?p=4
FlutterKaigi 2021 ハンズオン
アクセシビリティ
https://flutter.dev/docs/development/accessibility-and-localization/accessibility
アクセシビリティが高いFlutterアプリケーションを開発する by 1059999
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 を押す
トラブル
- ndk で怒られた
- local.properties に ndk.dir を書いたら解決した
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アプリのモバイル版をリリースするまでに学んだこと