[Flutter] 端末を傾けてWidgetを動かす

2024/6/7 FlutterKaigi mini in Osaka の発表資料

Transcript

1. [Flutter] 端末を傾けて Widgetを動かす beeeyan（ベーやん）
2. デモ Github https://github.com/beeeyan/gyro_app
3. 「傾けられていること」を検知する方法 「sensors_plus」を使う。 https://pub.dev/packages/sensors_plus
4. sensors_plusで検知できるもの 全てx,y,zの値をもつ accelerometerEvent ・重力（加速度）を含んだデータ userAccelerometerEvent ・重力（加速度）を含まないデータ gyroscopeEvent ・回転速度(rad/s)で提供される ( https://kawa.dev/posts/flutter-3d-gyro/ ) magnetometerEvent ・磁力計
5. 例） 右側面を地面に向けたとき
6. 基本 @override void initState() { super.initState(); _streamSubscriptions .add( accelerometerEventStream ().listen( (AccelerometerEvent event) {} ), ); StatefulWidget initStateの中でlistenする
7. Widgetの場所の指定 child: Stack( children: [ Positioned( left: widgetX, top: widgetY, Stack・Positionedを利用 ※ leftとtopが両方とも 0であれば左上の位置となる
8. 定数を乗算 accelerometerEventStream().listen( (AccelerometerEvent event) { setState(() { accelX = event.x; accelY = event.y; if (!isPhysics) { // 新しい位置を計算 widgetX -= accelX * 20; widgetY += accelY * 20; // 画面外に出ないようにする if (widgetX < 0) { widgetX = 0; } 　　　　　　　　〜枠をはみ出ないようにするための制御〜 } });
9. 等加速度運動 // 物理演算で計算するためにTimerで値を更新する。 // SensorInterval.normalIntervalの値で処理できたかも。 // デフォルトstatic const normalInterval = Duration(milliseconds: 200); _timer = Timer.periodic(Duration(milliseconds: timerMilliseconds), (Timer timer) { if (isPhysics) { final seconds = timerMilliseconds / 1000; // 速度の更新 velX -= accelX * seconds; velY += accelY * seconds; widgetX += velX * seconds + 1 / 2 * preAccelX * pow(seconds, 2); widgetY += velY * seconds + 1 / 2 * preAccelY * pow(seconds, 2); preAccelX = accelX; preAccelY = accelY;
10. 等加速度運動 速度更新の式 : 距離 : Timerを利用したのは「t (s)」を知りたかったから ( GPT-4o案) → sensorの更新間隔だけで処理できたかも
11. 反発係数 壁にぶつかった時、反発係数をかけて速度を反転させる。 if (widgetX < 0) { widgetX = 0; velX *= bounceFactor; preAccelX = 0; } if (widgetY < 0) { widgetY = 0; velY *= bounceFactor; preAccelY = 0; } bounceFactor自体がマイナス
12. 回転 加速度から位相角を取得 final rotationAngle = atan2(accelY, accelX); Transform.rotateで回転状態を反映 child: Transform.rotate( angle: isRotate ? rotationAngle : 0, child: Container( height: boxSize, width: boxSize, decoration: BoxDecoration(
13. 別の検証 : Flutter Flame 「flame_forge2d」 https://pub.dev/packages/flame_forge2d https://flame.tnantoka.com/examples/physics/ https://www.egao-inc.co.jp/tech/flutter_2d/
14. 加速度センサーの反映 @override Future<void> onLoad() async { super.onLoad(); final viewWidth = size.x; final viewHeight = size.y - kBottomNavigationBarHeight - kToolbarHeight; ball = Ball(pos: Vector2(size.x / 2, size.y / 2)); add(ball!); accelerometerEventStream().listen((AccelerometerEvent event) { accelX = event.x; accelY = event.y; }); _timer = Timer.periodic(const Duration(milliseconds: 16), (Timer timer) { if (ball != null) { ball!.body.applyForce(Vector2(-accelX * 1000, accelY * 1000)); } }); onLoadの中で呼び出せる 物体に「applyForce」で影響を 与えることができる
15. まとめ ・実実装するとなると、それなりに大変かも。 　（自然な動き、、とは?） ・要件が許せばflameから検討するのが良い可能性がある。 　（学習コストはそれなりにありそうだが、みなさんが考えるやりたいことに近いかも） 〜 感想 : モバイルの可能性を追求しているという点では楽しかった
16. 参考 https://pub.dev/packages/sensors_plus https://note.com/hatchoutschool/n/n03667b574f77 Flame） https://flame.tnantoka.com/examples/lifecycle/ https://pub.dev/packages/flame_forge2d https://flame.tnantoka.com/examples/physics/ https://www.egao-inc.co.jp/tech/flutter_2d/ https://pub.dev/documentation/flame_forge2d/latest/flame_forge2d/Body/app lyForce.html and GPT-4o