【Flutter】FlutterGakkai #6 にオンラインで参加したので軽くまとめてみた

概要

どうも、@daiki1003です！

久しぶりの記事になってしまったので、簡単なブログでも。

[第6回 FlutterGakkai](https://fluttergakkai.connpass.com/event/322849/)にオンラインで参加しました！

本当はオフラインで参加したかったんですが、やむをえず。

と言うことで、見た事を軽くまとめたいと思います。

参加した人は復讐がてら、参加してない人は行った気になってもらえると嬉しいなと思います。

それでは、行ってみましょー！

最深まで理解する Flutter アニメーション西峰綾汰さん

x.com

アニメーション周りのコード、長ったらしいボイラープレート記述したら動くけど何してるの？を解説してくださっていました。

内部実装の解説の後に、「StatelessWidget で書きたいのにアニメーションのためだけに StatefulWidget にしている」場合、 [flutter_hooks](https://pub.dev/packages/flutter_hooks)の useSingleTickerProvider / useAnimationController で実現出来る旨の解説がありました。

次に、 AnimationBuilder と RepaintBoundary を使ったtipsなんかも紹介されていましたね。

Flutterとエラー監視 ichizoku さん

x.com

Sentry の紹介と、 Sentry クイズをquiznを使ってされていました。

[Sentry](https://docs.sentry.io/platforms/flutter/) はサーバーサイドの人から話を聞いたこともある人がいらっしゃるかもしれませんが、エラーやパフォーマンスに関する情報を見ることの出来るSaaSです。

実は、 Dart や Flutter にも Sentry はあります。

sentry_flutter | Flutter package

Sentry SDK for Flutter. This package aims to support different Flutter targets by relying on the many platforms supported by Sentry with native SDKs.

sentry | Dart package

A crash reporting library for Dart that sends crash reports to Sentry.io. This library supports Dart VM and Web. For Flutter consider sentry_flutter instead.

Codecov の割引がある事、 Session Replay 、Release Tracking 、Suspect Commits などの機能についてクイズがあり、楽しみながらサービスの説明がされていてなるほどと思いました。

ロゴが出ていたので協賛されていらっしゃるかと思うのですが、全く嫌らしさがなくサービスの説明が出来るスキームだなと勝手に感じました。

(補足しておくと、今まで嫌だなと思った協賛企業はないです念の為)

Flutter内部実装からパクる、自作共通ウィジェット &AI さん

x.com

Flutterの内部の実装を見ることで、単純にFlutterに詳しくなるだけでなく普段の業務にも設計活かせるよ、と言った解説をされていました。

明日から使える最高のtips達でした…！

Enum を公開せず、名前付き引数で公開する

[Card](https://api.flutter.dev/flutter/material/Card-class.html) クラスには、 Card コンストラクタの他に Card.filled や Card.outlined と言った名前付きコンストラクタがありますが、これらは内部的には Enum で管理されています。

普段、開発しているとこの Enum をインタフェースに公開してしまいそうだが、名前付きコンストラクタにすることで

呼び出しが楽になる
全体を見なくては、と言う強制力が働きづらくなる

と言ったメリットが得られるとのことです。

同時に、 Enum が増えることが破壊的変更にならないのもメリットと感じました。

Raw~ウィジェット、コンストラクタの考え方の活用

クラス名やコンストラクタに、 Raw が含まれているものがあります。

[ Image ](https://api.flutter.dev/flutter/widgets/Image-class.html)ウィジェットの frameBuilder の様な、一見関係ないが、開発者には公開したいようなインターフェースを含む時に使われている様です。

ウィジェットを自作するときも、.raw コンストラクタでは、 Widget を引数に取ることで幅広く対応出来るようにしつつ、特定の用途に応じた名前付きコンストラクタを作成することで必要最低限の引数を受け取るようにすると言ったことも可能になります。

class MyWidget extends StatelessWidget {
  const MyWidget.raw_({
    required this.leading,
    required this.trailing,
    super.key,
  });

  const MyWidget.checkBox({
    required bool isChecked,
    required String text,
    super.key,
  }) : this.raw_(
    leading: // チェックボックス,
    trailing: // テキスト表示
  ),

  ...
}

引数は String ではなく、 Widget で

class MyWidget extends StatelessWidget {
  const MyWidget({
    required this.title,
    required this.child,
    super.key,
  });

  final Widget title; // or final String title;
  final Widget child;
  ...
}

Widget にすることで、以下のメリットが得られます。

アイコンを設置するなどの、自由度が得られる
指定の際に、Consumer でラップしたり Builder でラップすることで WidgetRef や BuildContext が利用出来る

内部で InheritedWidget を使う

InheritedWidget 使うと、バケツリレーも防げちゃうよと言う趣旨かなと理解しています。

大きなコンポーネントを作成する時に、小さいコンポーネントに分割するかと思います。

普通に実装していると、大事なモデル情報は全てのコンポーネントに都度引数として渡す必要があります。

InheritedWidget でこのモデルを参照できるようにしておくと、各コンポーネントで .of(context) とすることで取得できるよ、と言う事ですね。

更に引数がなくなれば、 const にも出来るのでかなりメリットは大きそうですよね。

ただ、これに関しては、個人的にはめちゃくちゃそうしたいと思う気持ちとインタフェースから依存が見えないと言うデメリットがあるなぁと頭を悩ませています笑

AWS AmplifyとBedrockを活用した生成AIアプリの開発 allJokin さん

x.com

Google GeminiをFlutterから利用する方法を簡単に解説された後に、商用で利用できないとのこと。

google_generative_ai | Dart package

The Google AI Dart SDK enables developers to use Google's state-of-the-art generative AI models (like Gemini).

そこで、 [AWS Amplify](https://aws.amazon.com/jp/amplify/)と[Amazon Bedrock](https://aws.amazon.com/jp/bedrock/)を使う方法を、料理の写真をアップロードすることで、料理名とカロリーを計算してくれるサンプルアプリをもとに解説されていました。

唐突な飯テロ…ｗ

また、最後にAmplify のデプロイをその場で試してくださっていました。

tsファイルの変更を検知して、数十秒でデプロイが完了するとのこと。

すごく簡単に生成AIアプリが作れそうなので、試してみたいです！